Introduction: What is CSS?
CSS or so called Cascading Style Sheets is a light and really simple computer programming language, which is very flexible to use and helps transform the dull and grey. This software enables you to transform your web pages with color and multiple effects, especially after the appearance of the CSS third version.
In addition to styling our web pages, this software also helps the faster loading of the site as well as it makes the code more readable which makes the development of the pages easier.
The computer coding language is quite flexible because there is an option of using 3 different methods or even making a combination between them. The most commonly used method (due to a number of important reasons too complex to go into here) is to implement the CSS code in a special file with an extension .css. This is known as an External style sheet
The second option is directly to put the code in the tag of the page, this method is used if you want a unique style for one of your pages and is known as an Internal Style Sheet. The third option is called an Inline Style whereby the code is placed directly in a specific part of the post you are working on.
All types of combinations of the code will do the job, so it is up to you to decide which works best for you and your website and which you are most comfortable with.
A computer code sample with explanations:
In the above example, ‘body‘ is the selector or the code that tells CSS which part of the site the options (which is the information in between the curly brackets) need to be applied to.
As mentioned above, the content, which appears between the brackets, is an option which can be set to a particular part of the site. In the first part we are choosing which variable we will set and in the second part (after the two points), we set the value it will have.
In our example we set that our background is grey and has a distance of 10 pixels inside the frame selector .
CSS:Links marked with symbols
Without further added extras the hyper links are shown in the browser as colored and underlined by default in HTML. With CSS, the default look of the hyper links can be overridden and adapted to the individual needs.
Symbols are used for easier understanding
Link, which contains icons is not just a pretty, decorative extra, but is a helpful hint for the user on the nature of that link. This is usually another HTML document, but can also be a document in other format, such as PDF, Word or text document, an image, a sound file or an archive file (Zip or Rar) which will be started for download.
The user is free to activate the link or not. In the selection of symbols it is natural to want to choose on that has a direct connection with the action.
Creating a Class:Version 1
How can you attach an icon to the link? The method is based on the browser versions that is primarily used by the target audience. The older the browser is, the more complex the CSS formatting is. The simplest way is to create a separate class for the link.
The class is assigned to the corresponding symbol as a background image and positioned right next to the text. The padding should be at least the width of the image respectively, but a few more pixels could be left for visual appearance.
Version 2 :The attribute selector
For those who still use older browsers CSS opens up 3 more viable options.
Introduction to the CSS Flexbox model
The calls for alternatives to Floats & Co. when talking about flexible site layouts are getting stronger. One of these alternatives is the Flexbox model of CSS, which should be very interesting in the light of “content choreography” and “responsive web design”. In this post I want to introduce Flexbox shortly and explain its basic functioning.
Why is Flexbox so exciting?
In responsive design, it is important that the various elements of web site design are flexible. The Flexbox model offers extensive possibilities which before, we could only dream of. You have the option to make flexible the elements both in height and in width according to different conditions. Boxes can be side by side in rows, together with each other or you can arrange them in columns, they can be positioned anywhere in the sequence and aligned to each other.
When you guys are up with the theme of the Flexbox, you will quickly realize that different spellings exist. To do this you must know that the syntax has changed several times in the past. If you come across outdated sources, you can update the code with relatively little effort.
Whenever you display the command: box; in the properties box or display the command: FlexBox; you will see, it is legacy code! The current syntax is to display: flex or the properties start with flex. A very detailed article on this topic can be found on CSS tricks.
Calculations with CSS calc()
Modern web layouts are becoming increasingly complex and this is why the developers continue trying to optimize the code. Especially if the website uses Responsive design and several design patterns with a different numbers of columns. This often leads to problems in the allocation of CSS classes. A nice way to rid the code of such unnecessary CSS classes is to allow calculation options using the CSS property calc(. The situation is similar when pixel values of percentage values need to be deducted. For example, to place banners in an otherwise liquid layout.
Calculating with CSS
The CSS property calc () allows the classical basic arithmetic. Please note that before and after a number the operator should leave a space. Also, division by 0 will generate an error.
Example 1: Advertising in Responsive Design
The first example uses a simple subtraction of the width of the main content. The article element should in principle have a flexible width based on percentage values. However, the right banners must be placed with a fixed size in addition to the content, so we prefer to use calc () from the rigid width of the sidebar of 100%.
Example 2: Calculate design grid
The second example shows the calculation of a grid configuration with a variable number of columns in the different breakpoints.
Browser Support for calc ()
The browser compatibility does not look so bad. Apart from Internet Explorers that are older than the 8th version, all modern browsers support the feature. A detailed list can be extracted from the website caniuse.com.
Browser support for CSS Regions
At the time of this post, browser’s support for CSS Regions is still extremely limited. Not a single desktop browser supports the function by default. However, it is available in Safari on iOS7+ regions, which should be especially interesting for magazine layouts on tablets.