Remember that activity we did last time in the HTML tutorial, where we pulled up a webpage's HTML page source? And how we said it was all HTML? Well, I kind of lied. It's was actually one part HTML, one part JavaScript, and another part called CSS (Cascading Style Sheets). We won't get into JS here, since that is more for website with forms, but let's discuss CSS. Where is CSS hiding?
CSS is hiding in these lines:
<div class="active">
<p class="myText">
<link rel="stylesheet" type="text/css" href="myStyles.css">
If we look closely, you may notice that there's that weird attribute "class", and oh look! There's some file called myStyles.css! Hmm...
CSS (Cascading Style Sheets) allows us to wrap up all those attributes we talked about in the HTML tutorial into a separate file. So instead of having 5 different attributes on a tag, we can bundle it all up and just use <class="myClass">, then specify all of those attributes elsewhere.
Well.... is that all? Does it just make HTML a little more readable? Of course there's more! Say I have a webpage I'm designing, and I want all the tables on all the pages in my website to look the same. If I have 5 attributes I need to specify, say the table's border, width, height, cell padding, color, text color, etc, we wouldn't want to type all of that every single time, right? That's annoying, unreadable, and tedious. We've got assignments to finish here! And if I want to change the border, I'd have to go in and change the same thing for every single table on all of my webpages! If we use CSS though, we can put all of that formatting in one place. Changing the border would only require changing one line!
Another cool thing about CSS is that it's easy to use what other people have programmed (hint hint, this is what we're going to do in the Bootstrap tutorial). So all you have to do is use their completed CSS file, and you can base your website off of their design!
So there was that whole "myStyles.css" thing we saw earlier, right? CSS is just another text file that you'll add to the folder containing your webpages. The syntax is a little different from HTML, though. Here's a part of the CSS file we use on our website.
.body-content{
padding-left:20%;
padding-right:20%;
color:#e9c77b;
padding-top:40px;
padding-bottom:40px;
}
.body-content h1 {
color:#e2b49a;
}
.body-content p {
font-family:'Roboto Condensed', sans-serif;
font-size:22px;
}
img {
max-width:100%;
max-height:100%;
}
Yep, kind of looks like another great big gobble of words and punctuation. Let's break it down.
Selectors These are the things before the curly braces. Their job is to search for HTML tags. So .bodycontent looks for all HTML tags that you've labelled using class="body-content". But wait, I've found a typo! Why doesn't img have a period in front? This just means that the CSS will search for <img> tags. So the period means "search for class="myClass"", and no period means "search for this tag".
Multiple selectors If you notice we have examples like .body-content h1 and .body-content p. What do those mean? They are just saying "all the <p> tags inside a tag labelled class="body-content"". This is used for nested HTML tags.
Properties These are the things inside the curly braces, but before the colon in each line. Some examples in the ones shown above are color, font-family, and padding-left. If you notice, these are HTML attributes! So what we're doing with these is we're just typing out all the HTML attributes we want for the tags we've selected.
Values Finally, these are the part after the colon. Examples would be 20%, #e9c77b, and 'Roboto Condensed', sans-serif. These specify the value you are giving to that HTML attribute.
And that's it! So, as a short example, say we have this in our HTML and CSS files.
<!--HTML file-->
<link rel="stylesheet" type="text/css" href="myStyles.css">
<div class="body-content">
<p>Here is my paragraph</p>
</div>
/********CSS file*********/
.body-content p {
font-size:22px;
}
This is the same as just the HTML shown below.
<div class="body-content">
<p font-size="22px">Here is my paragraph</p>
</div>
If you followed the link to W3School's list of HTML attributes, you may notice that some things can only be done through CSS! Important tags like color have to be specified through CSS. So it's important to know both HTML and CSS when designing your website! Now head over to that Bootstrap tutorial for an extension on this CSS tutorial. Off you go!
<link> tag inside the <head> block!