Hello and welcome back to Web Development 101, if you went through my two-part series on HTML you now know all the fundamentals of writing basic HTML. Sure, you might not be a guru yet, but you know enough to be dangerous, which is all you need to start playing around.
If you haven’t yet taken my Web Development 101 series on HTML please read them first below, you’ll need the info in these to start my series on CSS:
Web Development 101 – Learn HTML, Part One
Web Development 101 – Learn HTML, Part Two
Now onto the topic of this next segment, an an incredibly important topic for all web developers, the wonderful world of CSS.
This series is called Web Development 101 for a reason, I am starting at the very beginning with every topic I cover. If you already know CSS and are just using this to brush up, you’ll probably want to wait until parts two and three. For those of you that are learning CSS for the first time, read on!
So what is CSS?
CSS stands for Cascading Style Sheets and it is a much-needed compliment to HTML, in fact, you will find yourself using it as a core part of every site you build.
You see, HTML was created to define the content of a document, not to define how elements are displayed. When I first started writing HTML code myself in the mid-90’s creating a large website meant copying and pasting code over and over. This was because if you wanted to change the font, you had to encapsulate the text in a <font> and </font> tag.
Imagine scaling up to an one-hundred page website in this way, each page with all the individual elements tagged uniquely. Making a single change across the entire site would mean making changes on 100 different pages. Sounds like a hassle? Trust me, it was.
So the nice people at the World Wide Web Consortium (W3C) created CSS to allow developers to make one change, in one file, that could impact one, two, one-hundred, or even ten-thousand pages all at once.
Okay, at this point you’re probably ready to dive in and begin writing CSS, so let’s get rocking!
First things first, let me show you how to create an external style sheet, which is a single file where we’ll keep all of the styles for your site. You can separate these into multiple separate sheets if you’re OCD, but for now and in most cases, you’ll stick to a single file.
So open up your favorite text editor and create a new file named “styles.css” or “style.css” or “hangten.css” – that’s right you can really name it anything you want! Once you’ve created it let’s go back to our HTML document and link it in using the syntax below:
<link rel = “stylesheet” type = “text/css” href = “styles.css”>
Put this little snipped of code in the head of your HTML document somewhere above the </head> typically just below the <title> tag. Now let’s get back to the styles.css file and we’ll start creating the styles for the site.
CSS is separated into “Selectors” which are the element you want to style, and “Declarations” which are ways in which you want those elements to be styled. Let’s look at an example where we style the H3 tag, don’t worry if you don’t understand it all, I’ll explain it below:
h3 { font-size: 11px; font-family: arial; font-color: black }
By putting the line above in your styles.css file, he <h3> tag will now set the size, font family, and color. Imagine having to do this without CSS, every time you want text to by styled this way you would have had to do it manually, in-line, on every single page of your site. Now, you can make changes in one file and impact the <h3> tag everywhere.
You can start playing around the CSS right now. Just use what you learned in the HTML tutorials to make a simple site and then start styling elements using CSS. Of course you can do a whole lot more with CSS but this is a great introduction and starting point. Now start playing around, don’t just leave your learning to reading this article, do it yourself!
