CSS is the language used to make websites unique. To make websites look good. Start your quest to learn CSS in this article…
What is CSS?
CSS stands for Cascading Style Sheets, and is used to style HTML. Without CSS, the entire web would look like this:
With CSS, that same article would look like this:
As you can see, CSS plays a massive role in building the websites that we use every day.
The structure of CSS
CSS is made up of selectors and declarations. Take a look at this example:
This is known as a rule set. Here, h1 is the selector - this is because we are selecting all the h1 elements on the page to style. Next, we state our declarations in curly brackets. So all CSS selectors look like this (including the curly brackets, these are important):
Next, let’s take a look at the declarations - first of all, all the declarations go within the curly brackets of the selector that they belong to - so in the example above, the declarations would be styling the h1 elements. The declaration syntax looks like this:
Don’t forget the colon and semicolon, these are very important and must always be included. So, now you know the structure of CSS! Here is a code snippet to consolidate:
There is no limit to the amount of declarations that can be put in a CSS rule set. There rule sets can also be multiple rule sets in a CSS file:
Follow along!
Copy this HTML into a new HTML file called index.html
Next, create a CSS file in the same folder called style.css. Add the following code:
Open up your HTML file now - it should look normal, and the h1’s will not be red. This is because we need to include our CSS file in our HTML. We do this by adding a link to our head:
Now, when your reload your page, the h1 ’s should appear red!
Now you’re ready to follow along through the rest of this article (and any of my CSS tutorials, in fact!).
CSS selectors
As I mentioned earlier, CSS selectors are used to tell the browser which element you want to style:
In this example, you are telling the browser that you want to style all h1s with the styles inside the curly brackets. However, there are some other CSS selectors as well. Let’s go into the different types of CSS selectors and what they do:
Element selectors
This is like the h1 example you saw above. Simply type the tag name of the element, and it will select all of those elements (eg. all h1s)
Class selectors
This selects elements with a certain class attribute. For example, in the HTML that you copied:
The CSS syntax to select all elements with the another-class class would be:
Try adding this to your CSS file, and you should see the h2 turn blue. An element can have multiple classes, separated by spaces:
Here, the h4 has the classes of two and classes, while the h5 has the classes of multiple and classes. So, if you wanted to style both of these, you could use the classes class, as they both have it:
Add this to your CSS file - you will see the h4 and h5 turn gold.
ID selectors
As well as having classes, elements can also have IDs:
Note that they can have both classes and IDs (bonus, right?)
An ID is unique - no two elements should have the same ID. Unfortunately, an element may only have one ID ( 😞 ) Here is how you select and element with an ID of my-id in CSS:
Add this to your CSS file, and you will see your h6 turn magenta…
But wait! We’re not done yet! We still have to cover one of the most important parts of CSS selectors…
Combining CSS selectors
There are multiple ways to combine CSS selectors:
1. Selecting something inside something else
Here is an example from the HTML I asked you to copy near the beginning:
Let’s say that we wanted to make the “how are you?” orange. How would you describe this to someone, without just saying the bit that says “how are you?”
What you would do is you would say the span inside the li . Or the span inside the ul. Or the span inside the li inside the ul.
To specify a selector inside another selector, we simply state them after each other with spaces in between:
The example above is saying “Any span s inside ul s. There is no limit as to the number of selectors you can nest:
Here, the CSS is saying “Any spans inside li's inside ul's . You don’t have to just use element selectors, you can use any of the selectors that you have learned:
Here, we are saying “Any span inside the element with the ID of my-id inside any elements with a class of my-ul . As you can see, there can often be many ways to say the same thing in CSS. Try adding any of these code snippets to your CSS file and see what happens…
2. Selecting one element(s) using multiple selectors
Woah, what? Yeah, I spent a long time on #1, but in case you have forgotten I am still talking about ways to combine CSS selectors. The reason that you would want to do this option is to make your selection more specific. For example, take a look at this code from our HTML:
Let’s say that I wanted to select only the middle h5. How would you do this? You can’t say .classes, as that will also select the h4 . You can’t say simply h5, as they will also select the second h5 . So we need to be more specific. We want to say, “Select the h5 element with a class of classes .” Here’s how you would do this:
Basically, put all your selectors next to each other without a space (obviously you can’t do .classesh5, as then it will think that h5 is part of the class name). Try copying the above example into your CSS file and see what happens…
You can use as many classes as you want, as well as an ID:
Don’t add this to your CSS file though, I made up some of those classes and IDs…
CSS comments
This is the final thing I will teach you about today. Comments are used to make your code more readable and tell other people (or yourself) what is going on. The syntax for a CSS comment is like so:
As you can see, a basic comment is created using the /* comment text */ syntax. It is very important to include both the opening /* and the closing */. If you want, you can try adding some comments to your CSS file.
There we go! That is everything that you have to learn for today! Let’s do a final summary and see what your code and web-page should look like:
Final result
Your CSS file should look something like this (excluding comments):
And your final web-page should look something like this:
