In this lesson you'll begin to learn CSS: you'll learn how CSS works, how we use it, and why we use it. We're also going to review the typical web site structure.
Before starting these tutorials, you should have a good understanding of HTML. If you haven't learned HTML yet or need to review, you can go through my Fundamentals of HTML course.
CSS stands for Cascading Style Sheets. A style sheet is a file that sets the values of properties for a document's appearance, including properties for colours, fonts, borders, spacing, and layout. The "cascade" refers to how various styling rules are applied to selections of elements and how they override each other. For example, you could define all <h1> elements to have green text, and then later in your style sheet you could add a rule that says "all <h1> elements inside <article> elements must have purple text, instead". So all <h1> would have green text unless they're inside an <article>, in which case they'd have purple text. This kind of cascading behaviour allows you to easily format elements not just on a single HTML page, but on several pages without any extra code.
CSS is a set of properties and values that allow you to customize the appearance of a web document. Where HTML defines the CONTENT of the document or application, CSS defines the style of the document or application.
In the old days, before CSS, we used to style our documents using HTML code, like this:
<body bgcolor="#f99">
<div><center><h1><font face="Arial">My Web
Site</font></h1></center></div>
<div><font face="Arial" color="#600" size="2"><u>Firstname
Lastname</u></font></div>
<p bgcolor="white"><font face="Arial">This is an example of some very old
HTML code. Coding this way was <b>very tedious</b> because if you
wanted to change your theme, you had to search through <u>ALL</u>
your HTML code for tags and attributes that defined your theme. These
included things like:
</font></p>
<ul type="circle">
<li><tt>TT</tt> element, which displayed text in a mono-spaced
font.</li>
<li><tt>CENTER</tt> element, which centered its contents
horizontally</li>
<li><tt>FONT</tt> element, which changed the face, colour,
and size of the font inside the element</li>
<li><tt>U</tt> element, which underlines its content</li>
<li><tt>BGCOLOR</tt> attribute, which changed the background
colour of the element</li>
<li><tt>BACKGROUND</tt> attribute, which changed or added
a background image inside an element</li>
<li><tt>HEIGHT</tt> and <tt>WIDTH</tt> attributes,
which changed the height and width of an element</li>
</ul>
<p bgcolor="white"><font face="Arial">There were many others;
that list only contains a few or the more common ones.</font></p>
<div bgcolor="#600"><center><font size="-1">2000 Firstname
Lastname</font></center></div>
</body>Using HTML elements and attributes for things like colours and fonts
was very tedious because if your colour theme changed or you wanted
to change the font, you'd have to search through all of your HTML
code and locate all occurrences of the bgcolor and
color attributes and all occurrences of the
<font> tag so you could edit them.
It also meant that adding new pages that followed the same theme consistently was tedious and prone to error: there are so many little attributes and tags that's it's really easy to miss some when you're coding a new page. We would often create a template page (e.g. template.html) with all the tags/ attributes with all the settings and placeholder text, but it was too easy to miss filling in an element with actual content.
CSS was introduced to make the job of styling pages easier! With CSS, you can store your styling code in one single file, or even a few different files, and then reference the appropriate file in all of the HTML pages. If you wanted to change your theme, you only had to edit one or two CSS files, and all pages that reference those files would automatically appear with all the new styles.
CSS even allowed us to do things like layout. In the past, we would generally use HTML tables for layout, but this made it impossible for visually impaired users to navigate a web site with a screen reader. CSS uses things like positioning, Flex Box, and responsive grids to lay out elements on the page, making them easy to modify and also make them more accessible to screen readers and smaller/larger screens.
Lastly, CSS implements the cascade. This means that you can put your default styles in an external CSS file, and then easily override those styles for a specific page using Internal CSS, or even for one specific element on the page by adding In-Line CSS. Style rules have a level of specificity, or a specificity score to determine which style rules override default styles.
CSS was first developed to separate presentation from content. In other words, to separate the colours/fonts/layouts of a document from the HTML markup and content of a page. This made it easier to update the styles or content of a document. In particular, it allowed developers to create a set of styles and apply them to several pages in a web site. Before CSS, styling was coded right into the HTML and content of the page, so it was a cumbersome process to update colours, fonts, and layouts: you had to find the styling information buried in the HTML content on every single page and edit it manually.
CSS 1 became available in 1996 and allowed developers to style colours, fonts, backgrounds of pages, and various text attributes such as letter/word/line spacing, and alignment. CSS 1 also defined what we now refer to as the "box model", which is a set of properties that defines borders, margins, and padding of elements. Browsers weren't really up to speed on CSS at this time, so sometimes things displayed unpredictably: a page might look one way in BrowserA, and differently in BrowserB.
CSS 2, in 1998, allowed developers to define the layout of web pages with positioning properties. It also contained additional media types for things like audio and video, and more complex ways of selecting elements to style.
CSS 3 was published in 1999 and included properties that allowed you to build web sites that looked like slide presentations. This included transformations - properties that allowed you to animate elements and change their appearance using things like rotation. The CSS 3 standard also introduced "modules" to organize the various CSS properties, such as "Selectors" and "Box Model". This allows a specific module to progress in its development faster or slower than other modules, and even allows for the development or invention of new modules without having to update the entire CSS specification.
CSS 4 and above probably isn't ever going to exist. Since CSS 3 divided everything into modules, this has allowed individual modules to grow on their own. For example, the Background & Borders module has grown and improved into what you might think of as part of CSS 4 - it has had many improvements and updates that have gone beyond what was originally part of CSS 3. But because CSS 3 modules can each improve and progress independently at their own rates of speed, it means that the entire CSS 3 specification doesn't need to be re-written. So there will probably never be a "CSS 4" or anything higher.
Therefore, there is no defined number for the current version of CSS. The CSS standards are maintained by the World Wide Web Consortium's CSS Working Group.
You can access the current standards for CSS at the CSS Home Page under "Standards and Drafts".
Recall that CSS stands for "Cascading Style Sheets". The "Cascading" part is an important part of how CSS works, which is part of specificity. When you define styles for an entire web site, you can override some of those styles for a specific document. You can even override those document styles for a specific area of the page. The most specific styling rules will always override the more general ones, and the styling rules defined most recently will always override the ones defined earlier. This will become more apparent as you learn how to code CSS rules.
So what can we do with CSS? The best way to answer this question is with an interactive demonstration. Visit the What Can CSS Do? demonstration and try each of the different stylesheets by clicking on the links to "Example 1", "Example 2", and "Example 3". Write down every single thing you see that changes (besides the title of the page, which is actually done with JavaScript, not with CSS). What parts of the page change when you select the different stylesheets?
Now try the "No CSS" example. What things are no longer visible in the page? What has changed? Make a list of all the things you think CSS can define, change, or configure in an HTML page based on your observations.
After doing the demonstration, you should have noticed the following changes between the 3 different stylesheets, and the "No CSS" example:
You might have spotted other things. In summary, CSS can alter the following things:
You can even do advanced things like changing how items appear when the mouse hovers over them or when they have the focus.
Once you have a general understanding of what you can do with CSS, you can start learning how to change the appearance of your HTML pages by learning about CSS Syntax.