What is CSS and how does it work?
Updated 9/1/2020
CSS, or Cascading Style Sheets, is the rule-based language that describes the presentation of web pages and allows the creation of beautiful, maintainable, and flexible website designs by controlling their formatting, presentation, and overall layout. CSS also adapts the presentation to different types of devices and also serves to keep content separate from presentation, making it much easier to read what’s happening in the HTML.
How does CSS work? It works by:
Converting the HTML into a DOM (Document Object Model).
The browser gathers HTML resources (embedded images, videos, etc.) and linked CSS.
The browser parses the CSS, sorts the rules by selector types, and puts them into different “buckets.”
The browser works out the rules that need to be applied, based on the selectors.
The browser attaches the style.
The render tree is laid out in the proper structure.
The page’s visual display is shown.
CSS will not work if the browser doesn’t understand it. Since CSS is always being developed, there may be times when a slightly older browser may not recognize a specific CSS selector or declaration. This can also happen if you made a spelling, property, or value error. When this happens, the browser just ignores that bit of CSS and moves on to the next.
A Little CSS History
CSS was first introduced in 1996 to change fonts, colors, alignment, and spacing. Prior to that, these changes had to be made using tags and color attributes in HTML. This made it difficult for web developers of large websites to change or add information without it being a long and expensive process, since every page had to be updated separately. CSS removes the style formatting from the HTML page, saves style definitions in external .css files, and allows the entire look of a website to be changed at once using just one file.
*Note: There is a case for using internal style sheets or inline styles. They are used on a case-by-case basis when a specific .html page requires a unique look.
To get back to its history, CSS 2.1 was released in 2004 and added layout and positioning among other things. CSS3 has since added effects like transitions, animations, and change sizing. Now, rather than being released bundled in a new version, new features are specified or developed by either the CSS Working Group or other invited experts and given a Maturity Level.
The Many Advantages of CSS
There’s a reason for widespread CSS use and it’s because are many advantages to using CSS:
It saves time from manually making changes to all the pages of a website. A single CSS file can be changed and it will affect every page.
Since changes are quick and easy, making constant or spontaneous changes is always an option.
Due to only requiring a few lines of code for making changes to many pages at once, the website database remains uncluttered and websites load faster.
CSS changes offer compatibility across a range of smart devices, meaning the display is the same for each.
Changes in the position of web elements can be defined to align with aesthetic appeal.
Search engines can better crawl and assess content, leading to improved SEO rankings.
The Few Cons of CSS
While there aren’t many of them, you should be aware of the few cons that come with using CSS.
The disadvantages include:
Since CSS works a little differently on each browser, there may be cross-browser issues after changes have been made. To overcome this, the compatibility of change effects on all the browsers will need to be confirmed after any change is made.
Different versions of CSS are still used all the time, sometimes making it confusing for beginners to learn the language.
An accident or mischievous act with the files can disrupt the formatting and display of an entire website because CSS is an easily-accessed, open, text-based system.
All You Need to Start Writing CSS
Since CSS files are just text files, all you need is a text editor to start writing CSS.
Here are some other basics for starting:
If you’re saving the CSS in a separate file, which is recommended, the extension is .css.
If your page is relatively simple, you won’t need more than one style sheet.
If you want to have more than one CSS file for keeping your code more organized, put your CSS files in a folder called Styles.
You have to link your style sheet to the HTML by using a link element in your HTML’s head tag. Otherwise, the style sheet will be ineffective.
This is an example of a link element. The rel attribute tells the browser how it’s related to the HTML:
<link rel="stylesheet" type="text/css" href="main.css">.
Add the link to the location of your CSS in the directory. In our example, the CSS file is in the same directory as our HTML file, so we don’t have to tell the browser to change directories, but the example below shows where you would do that.
Selectors, Properties, and Values Described
“Style” or “styles” are the terms that are used when speaking of changing the look of a site with CSS. Styles are set by using rules. To tell the browser where to apply the rules, selectors are used to find the elements you wish to alter from the HTML. Then, property-value pairs are used to set the values.
As an example, to make the entire body element’s background color purple, the “body” selector finds the “body” element in the HTML. Here is the block of code:
body {
background-color: purple;
}
Pay attention to the different punctuation elements. If any of these three aspects are missing, your CSS will probably not perform correctly:
All the values you want to change for a particular selector must be within the curly braces.
The property must always be followed by a colon.
There should always be a semi-colon after the value.
There are dozens of different properties available to style HTML. Background color, alignment, opacity, and font style are just a few of them. Find a great list of properties at W3C and practice adding more than one style to a selector. This will help you achieve DRY (Don’t Repeat Yourself) code.
As another example, if you want the body element to be purple and also have a width of 1200 pixels, include it all in the same selector.
body{
background-color: purple;
width: 1200px;
}
Also, you can give the same styles to different selectors at the same time by just adding a comma between them before the first curly brace. Here's an example where we want all our headers to display the same font and color:
h1, h2, h3, h4, h5, h6{
font-style: cursive;
color: red;
}
Where to Add Styles
You can add styles directly to HTML elements without including CSS. However, if you do this, you can create some major headaches for yourself in the future. This is because if you want to change something simple, like the color of the text, you’ll have to change the HTML of every page rather than simply changing the CSS for that specific item.
Using a style sheet will make your HTML easier to maintain since it’s only focused on content. A bonus to using a style sheet is that it’s much simpler to experiment with different designs. An option to add CSS styles to the HTML is to include them in the <head> where you can add a style definition inside of a style element, like this:
<style>
body{
background-color: purple;
}</style>
You can't really use those style rules throughout a website easily though. You'd have to add that style element to every single page of your website. So if you've got a pretty simple site with just a "Home", "About", "Contact" and a "Services" page, you still have to change all the code four times instead of just once with CSS.
A Word About Modules
Since CSS lets you style so many things, the language is broken down into modules. Each module is documented with:
The purpose of it.
The properties and features it contains.
Any links that define the technology.
Let’s say you want to change the background and border colors. You can look at the MDN Web Docs to find the Backgrounds and Borders module and apply it to your design.
Putting it all together
Here we have some simple HTML with a couple classes added to our elements:
<html>
<head>
<title>I love Superheroes</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noticia+Text:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<H1>My Favorite Superheroes</H1>
</header>
<div id = "superheroes">
<ul class="bold">
<li class="avengers">Avengers
<ol class="numbered">
<li>Iron Man</li>
<li>Hulk</li>
<li>Thor</li>
<li>Captain America</li>
</ol>
</li>
<li class="justice">Justice League</li>
<li class="turtles">Teenage Mutant Ninja Turtles</li>
<li class="xmen">X-Men</li>
</ul>
</div>
</body>
</html>
You can see that we've given the different superhero groups different classes. That makes it much easier to target them to change their styles. The way you tell CSS that you want to target an HTML class is with a period before the class name. So to change everything with a class of “avengers” to be red, tell CSS that you want to target an HTML class is with a period before the class name, like this:
.avengers{
color: #DB1421;
}
That'll change everything with a class of "avengers" to be red. The way that you target an id is with a pound sign. So if we want to target the HTML element with the id "superheroes" and give it some style we would write this:
#superheroes{
background-color: rgba(184, 184, 184, 0.5);
padding: 5px;
width: 50%;
font-size: 20px;
overflow: hidden;
}
This is what you'll see:
The Best Practice for Using Colors
You may have noticed that we used three different versions of color in our CSS.
We used:
The name (purple).
The hexadecimal value (#DB1421).
The rgba value (rgba(184, 184, 184, 0.5)). The “a” at the end of rbga stands for “alpha” and it controls transparency or opacity of color.
The best practice for using colors is to not use the name since that makes it a little more difficult for consistency with other objects in the brand (because it’s not a specific color). You should use either the hex value or the rgba value as they are both universally accepted. Although, using the rgba can be more useful since you can add the opacity directly to the color value.
Conclusion for “What Is CSS?”
There’s a lot to learn in CSS, but hopefully you now have a little bit of a foundation to get started. Practice by creating a simple HTML file and play around with the style sheet to get familiar with it.
Reading up on important CSS topics is also a very helpful way to either begin or grow your knowledge base. Here are two articles to get you started:
Or, you can take one (or many!) CSS courses such as:
Introduction to CSS (Beginner)
Styling Websites with CSS (Beginner)
Creating Page Layouts with CSS (Intermediate)
Applying Special Effects to a Site Using CSS (Intermediate)
Mastering CSS Animations (Advanced)
Responsive In-Browser Web Page Design with HTML and CSS (Advanced)
But, the best way to learn more is to follow the CSS Path offered by Pluralsight!
