Day 12 CSS
Day 12 is in the books! Today we were introduced to CSS and had to work through a few hours worth of exercises. What is CSS? So glad you asked! CSS stands for cascading stylesheets and it is actually a language in it’s own right. CSS is the way that we style our websites. Remember HTML is how we organize things. CSS is what makes it look nice. CSS is really powerful. You can change colors, fonts, sizes, and even create animations. The possibilities are endless as far as how you can manipulate the way things look.
I’m pretty excited because at this point things are really starting to come together. So far we’ve learned a good bit of javascript, html, and css. We are at the point now where we can actually start creating things. We know how to structure things on a page, we know how to style them, and we even know the fundamentals of javascript which will later allow us to manipulate how things behave on a page. That’s pretty powerful stuff for two and half weeks.
Let’s talk a little bit about how CSS works. What is this cascading business?
“The cascade is a fundamental feature of CSS. It is an algorithm defining how to combine properties values originating from different sources. It lies at the core of CSS as stressed by its name: Cascading Style Sheets.” -MDN
Ok that’s helpful so we know that it cascades through the file which sounds kind of like how javascript is interpreted. In javascript it’s really important to know how the interpreter goes about making sense of our code and the same is true with CSS. Let’s take a look at how the cascade goes about making sense of our CSS. At some point in your CSS you are going to run into a situation where you have multiple styles being applied to the same element. Which style will be the winner in this scenario? Understanding how CSS makes these decisions will help us prevent frustration later.
There are three primary ways that CSS will determine which style is the winner of a conflict:
- Importance
- Specificity
- Source Order
In CSS there is a way to make any element win in a conflict no matter what and that is a special piece of syntax known as !important. The !important rule when applied to a style will trump anything else in the cascade. It looks something like this.
.winner {
background-color: blue;
border: none !important;
}If I try to assign a border to this class anywhere else in my code it will not work. The !important rule will negate any other attempts to add a border to this class. Importance is powerful, but it’s really more of a way to plug a hole on a sinking ship then it is a best practice. If you write you CSS properly you shouldn’t need to use this rule. We’ll talk more about that next.
Specificity is another way that CSS will determine which style will win in a given situation. Simply put the more specific style application will win every time. Let’s look at how MDN explains this.
“Specificity is basically a measure of how specific a selector is — how many elements it could match. As shown in the example seen above, element selectors have low specificity. Class selectors have a higher specificity, so will win against element selectors. ID selectors have an even higher specificity, so will win against class selectors. The only way to win against an ID selector is to use !important.” -MDN
There is a complicated point value system for calculating how specific a selector is, but you get the general idea. If you run into a conflict that you can’t figure out you can look up how the specificity values are calculated.
You might be thinking at this point “What if two elements have the same importance and specificity?”. That’s a great question and there is something in place to solve this problem. It is referred to as source order. Source order simply states that if all other factors are equal whichever style is applied last will win. CSS is evaluating and applying the winning styles. Let’s look at an example.
div {
color: green;
}
/* This rule will win over the first one */
div {
color: blue;
}You can see that the color blue will win because it was applied last. That’s the basic idea behind how the cascade will resolve conflicts and decide which styles to apply.
Today was a fun day. Tomorrow we are going to start discussing the Document Object Model(DOM). That is going to be fun, because we will be able to manipulate the DOM with javascript. I’m really looking forward to that! I’ll talk more about what I learned in tomorrow’s post. Talk to you then.
12 down 88 to go!
