CSS stands for Cascading Style Sheets or in Hebrew Cascading Style Sheets, and is a format for designing web pages, using these sheets, you can determine the design of the tags in HTML, XHTML and any other language in the XML style for building websites.
What is CSS
Until CSS was developed by the International Consortium for Web Integrity Legislation (W3C), the design and content of the website were written in the HTML language, which made it difficult to read and write the code, also if we wanted to make any changes we had to make a transition between the pages, although today it is possible to do everything in one file for all the pages together, CSS basically provides the border between the design of the website pages to build the structure and content of the website.
- The first version of CSS was announced in 1996 which allowed control of colors and fonts, frames and spacing and today is no longer supported.
- In 1998 CSS2 was announced, this version allows the integration and support of more upgraded elements such as object placement and heights for example.
- A year later, CSS3 was announced and until now has not been recognized as an official standard, through which color changes, shading, rounded corners and transparencies can be made.
CSS3 support is mainly characterized by the Chrome browser, then by Firefox and almost not by IE.
CSS3 allows us great flexibility when designing the web pages, so it is possible to create changes in the size of the box, rounded corners, defining an image as a border more simply and all this without any need for external software such as Photoshop from Adobe.
Option to create animations and roll-over without the need to use JavaScript, there is no need to flood elements, everything can now be done more simply using the amount of selectors and pseudo-elements that CSS3 now offers for us.
CSS3 – selectors
Using selectors it is possible to define to which elements we can add the CSS rules, due to the large amount of selectors that were added with the new CSS3 standard, we can be more precise in applying the CSS rules for design on selected elements.
CSS3 allows us to contain the design rules in CSS according to attributes, adjustment to regular expression and adding new Class and id selectors.
box module
Using the flexbox module you can now place elements side by side more easily and adjust their size.
While in the CSS2 standard it was necessary to overflow elements in order to arrange elements and columns next to each other, now in the CSS3 standard this can be done using an upgraded box-orient and box-flex feature in order to adjust the sizes of elements on the page to the size of the device used.
rounded corners
Adding rounded corners has become a real trend lately, but the method of adding these corners was not simple, the CSS3 standard offers to do it for us by a simple feature called border-radius.
When the value of the expression is expressed in pixels or in percentages, it indicates the degree of roundness of the corner in the box, a higher value indicates greater roundness, and when the value is expressed using the number 0, the corners are vertices and squares, in order to execute this code in the various browsers, we will have to add a moz prefix to Firefox and a webkit prefix to IE, Chrome, Safari.
shading
Even in order to perform shading, the use of external software such as Photoshop is not required, so you can add shading to boxes or text using a simple featurebox-shadow, a great feature added to CSS3 and supported by all browsers.
Setting the shadow requires focusing on three values, deviation in horizontal direction, deviation in vertical direction and the color of the shadow.
- Deviation to horizontal direction allows shifting the shadow to the right or left according to a positive or negative value, respectively.
- Deviation to vertical direction allows the shadow to be shifted down or up depending on a positive or negative value, respectively.
- The third value is the color of the shadow, the closer the numbers get to the maximum value of RGB (which is responsible for mixing the colors red, green and blue to achieve the desired shade) the darker the shade will be.
Web design using CSS3 allows for us a total separation between structure and design through simplicity of work and greater flexibility in designing elements and actions that previously required the use of external software