You can access the full course here: Bite-Sized CSS
Now that you have a basic foundation of HTML, it’s time to move on to the next step which is to learn some CSS.
As you know, HTML allows you to represent the content on your page. It basically allows you to create all of the content, but it doesn’t tell the browser how these things should look, what sort of font should we use, what should be the size of the font, CSS allows you to make your page pretty. We’ve got this basic page. Let’s change the title. We’ll call it Hello CSS.
There are different ways to add CSS in your page and we’re gonna look at them all but just one of them for this lesson. The one we’re gonna look at requires you to create style tags. And these style tags need to go above the content that you’re going to modify. So if we wanna modify something here, this style tag needs to go above that. Why is that? Because the browser when it reaches the page, it starts from top to bottom. So if it reaches CSS, it knows how it needs to show what comes below.
Let’s make the title red. To select the byte tag is super easy. All you have to do is write the name of the tag, for example h1, if I wanna select byte tag and I wanna select all the h1 elements in my page. And now I use curly brackets and inside the curly brackets I add my CSS rules. The rule I want to add is color red. If I save the page and refresh, we see now the red text. And because it’s a different language, it has a different syntax.
The syntax consists of selection and then curly brackets and inside the curly brackets you add the CSS rules. There’s always a property and a value, a property and a value, a property colon a value semicolon. And you can add multiple rules in here. We could add also background color. I’ll make it blue. And that’s looking quite ugly but it’s on the direction that we wanna go.
In this lesson, you’ll learn to include your CSS code in a different file so that you don’t have everything mixed up in one file like we do now.
The way to include CSS in external files is to, first of all, create a new file for CSS. So I’m gonna go to File, New File, save this file and I’m gonna call it style.css. Next, I’m gonna grab the CSS code that we had, cut it and get rid of the style tags and I’m gonna put that code in here. The last part as you probably imagine needs to include this file somehow so let’s go and include this new file. We’ll use the same link tag which is used to include external files, in particular cases like the CSS or the favicon, but the rel in this case is gonna be stylesheet.
That’s just what you type on the attribute. And href will indicate the location of the file. In this case, the location of the file is on the same folder as the rest of my page. So if we now refresh the page, you’ll see that our CSS is back because we’re including it in an external file. Normally, it’s recommended to put CSS in an external file so that you can work separately in different files and the project is just more manageable. Also if more than one person is working on the project, it’s easier to work on different files in this manner. I’m gonna also show you another way of including CSS which is not recommended and this is to include CSS as an attribute.
So you can add a style attribute here and add CSS rules to it. For example, you can have color green. So in this case, we don’t do a selection because we are already selecting by basically placing our style attribute. So if we do that, see how this changed to green. But this is not recommended because you do wanna have separation between the content and the presentation of the content. The best way to achieve that is by putting it in an external file.
In this lesson, we’ll talk about IDs, and how we can use IDs to select single elements in our HTML page. Let me give you an example. I wanna select just this paragraph here.
If I go and type in p, that will select all the paragraphs in the page, but I just wanna select this one. So there are different ways to do it in CSS but I’m gonna illustrate this, the concept of ID, for this particular example. We can give this paragraph a unique ID. For that, we need to add the attribute id=””, and in here we enter the name, the unique ID of that particular element, it’s a unique identifier. It cannot contain spaces. You can say something like “main paragraph”, something like that, so instead of selecting all the paragraphs like that, we can select by ID.
For which we need to type in the hash sign, and then the name of the ID, and that will allow us to select a single element by ID. You can have multiple elements in your page that have different IDs, but, IDs need to be unique. You can’t have two elements that have the same value for ID, they all need to be different.
And it needs to exactly match the name that you selected here, so now, you can select by tag, which will select all of the elements that have the tag, and now you can also select by unique ID.