What is CSS
Cascading Style Sheets (CSS for short) determine how to display Internet pages written in <HTML> or other markup languages.
With the development of websites, it became important to separate the Internet page into two different components: the "What" and the "How". The "What" is the data that is displayed to the user. The "How" determines how to display it, from font size and color to position on the screen and distance from other elements.
CSS is considered best practice for layout, and has replaced the use of tables almost everywhere. CSS is versatile enough to create complicated designs, like a three-column page with inline images.
The "C" in CSS
The "Cascading" in CSS is a powerful tool best explained through an example.
Suppose you declare that all links in your site will be displayed in underlined red font. Additionally, headline links (links that sit inside an H2 element, for example) will be displayed in italicized green font.
Since all headline links are first and foremost links, they will receive the underlined red font property. Then, because they have a more specific declaration, they will be italicized, and the red font will be overridden by the green font of the second declaration. You'll end up with underlined red links throughout your site, except in your headlines, where all links will be underlined, italicized, and green.
CSS allows you to assign additional "tags" or classes to each HTML element, and then to assign display properties to any combination of classes and elements. For example, you can define a class called "important" and use it with both an H2 element and an image tag. If you define that everything with class "important" is displayed centered, on a different background, and with large space before and after, these rules will be applied to both the headline and the image, despite them being completely different elements. On the other hand, you can say that some images are of class "left" and some are of class "right", and make each image class appear on its respective side of the page.
Declaring different classes for the same HTML elements, declaring same classes for different HTML elements, defining a style for each combination of elements and classes, and making these styles cascade-able, all combined, give you almost complete control over how a page is displayed.
Additional benefits of CSS
Separating the "How" from the "What" has several advantages:
- Separating style from content makes both easier to read.
- By applying the same CSS to all pages in your site, maintaining consistency becomes an easy task instead of a daunting one. For example, if one day you decide you want all your links to be green instead of red, you only need to change it in a single central place (your CSS file), instead of every single page in your website.
- At the same time, you can assign different CSS files to different pages, to give each page a unique look without making your CSS file ten miles long.