The First “S” in CSS
💡
Essential Question: How are CSS properties used to “declare” styles on an HTML element?
The first “S” in CSS is the purpose of CSS: To style things.
Think of CSS as the body of a car. Most cars would look nearly the same without the body. They all have engines, wires, filters and batteries, among other things. It’s only when the body is added that the car starts to gain some personality and, dare I say, style. From there, it’s all about the paint color, what special rims are installed, and the fabric of the interior leather — basically, the accessories that add up to the overall look and feel of the car.
CSS is to HTML as bodies are to cars. It’s the layer of paint that decorates HTML. Without it, many sites would simply look the same: white pages with black text and blue links. Not extremely fun, right?
It’s that reason that “style” is important to the name CSS. How many times have you visited a site and gotten frustrated with it because the “user experience” was terrible? It could be for lots of reasons, but the way elements are styled plays a significant role in creating a delightful user experience.
Styles are what slide through the Cascade. Let’s say we make a mistake and declare two different colors on the same element:
.box {
color: #000;
height: 200px;
width: 200px;
color: #fff;
}Because of the Cascade, the second color gets priority and is the applied color. Nothing else cascades like this. It’s a pretty unique characteristic of CSS, and styles are the things doing the cascading.
Writing Styles
Notice, too, how the styles are written. We start with a selector, which, in this case, is a class:
.box {
}That selection is followed by a set of curly braces ({ }) that contains the styles. And those styles are written in what’s called property-value pairs, which tell the browser what part of the element we want to style (property) and how that style is applied (value).
So, if we want to style the background color of our selected .box element, we “declare” the CSS background-color property and provide the color value we want it to be:
.box {
background-color: orange;
}All of the styles that are declared on a selected element in CSS are called a ruleset. So, for example, what we wrote above is a ruleset that selects an element by its class name and declares one style. This is just a simple example, of course. Rulesets can get very big depending on what is being styled and the type of styling it needs. But we’ll go over much more about writing CSS in a bit.
Check Your Understanding
Please answer the following ungraded questions to help you determine whether you are ready to proceed to the next lesson in the module.
(1) What is a property-value pair?
Show the Answer
A property-value pair is the combination of a property that determines the type of style that is applied to the selected element (e.g. background-color) and a value that configures the property (e.g. #000 would set the background-color to the color black).
(2) What is the CSS code in between brackets called?
Show the Answer
The collection of property-value pairs in between the brackets of a CSS selector is called a ruleset. That makes a lot of sense since that collection is a set of rules that determine the styles of a particular element.