In this first part of our guide, we discuss how to link to a CSS file to an HTML file. There is actually three ways to do this.
Before we begin, we must stress that if you don’t know HTML, then we highly recommend first visiting our HTML guide. This is because CSS depends on HTML. As such, if you don’t know HTML, then CSS will likely make no sense to you. If, however, you know HTML, then read on!
For those of you who got here after reading part 10 of our HTML guide, some of this will seem like repeated information, but we wanted to make this guide as independent from the HTML guide as possible.
What Is CSS?
CSS stands for Cascading Style Sheet. If you’ve built a few bare HTML pages, you’ll likely notice that it may not look all that pretty. Links are blue, backgrounds are typically white, text is black, and fonts are all the same. It is certainly possible to add some splash of colour with HTML, but is there not an easier way to make things look pretty?
There is and the easiest to learn method is through CSS. One way of looking at HTML and CSS is that HTML gives you the basic infrastructure while CSS actually makes a page look pretty. CSS is actually a very powerful visual code. A great demonstration of how powerful CSS is is through the CSS Zen Garden. On the right hand side, you can pick through all the different CSS designs made on that page. You can also browse through whole pages along the top as well.
All of those pages have one thing in common: the HTML. The CSS is all different and all those sites look very different. In fact, it can be difficult to tell right away that you are even on the same site to begin with. How cool is that?
This guide isn’t intended on getting you to the point of knowing absolutely every CSS rule in existence. However, it is intended to get you started in figuring out how to generate websites with CSS. Yes, if you are a total novice or know nothing about CSS, you are reading the right guide for you!
Configuring Your First CSS Site
To begin with, you do not need web space to test your website. You can do this right on your own computer just like HTML. First, you’ll probably want to create a folder where you want to house all of your files. When that is done, you’ll want to right click and create a new text file like so:
Now, you’ll want to name it index.html.
For those of you on a Windows machine, you may get a pop up message like this when you try and change the extension:
Since we know what we’re doing, we’re going to click “Yes” because we are not creating a text document, but rather, an HTML file that can be edited in Notepad. As usual, the icon will change to whatever program you set as default to open web pages.
Next up, we’re going to create a new folder:
You really could name this folder anything, but a good catch-all name is styles. So, that’s what I’m going to name my folder:
Now, we’re going to need to open this new folder. After that, we are going to create a new text file. This time, we’re going to name it styles.css.
Again, you’ll probably get a pop-up warning you about changing file extensions, but again, we know what we’re doing, so we’re going to click “Yes”. You’ll also likely see this file icon change. This, of course, is normal. If not, no big deal.
Now, go back to your HTML file and open it in Notepad like so:
In your new HTML file, set up your basic HTML code like so:
Now, in your head, we are going to link to an external style sheet. What we need to do is add the following code:
<link rel=”stylesheet” type=”text/css” href=”styles/styles.css”>
Your HTML should look like this:
This line of code now points to your CSS file. If you’ve named your CSS anything differently or decided not to use folders, etc., then you’ll want to rename the file path located after the “href” in that line. For those of you who are wondering, no, this is one of those rare instances where you don’t need to close that HTML code.
Congratulations, you are now set to start coding in HTML and CSS!
FAQ
Is this the only way to add CSS to my page?
No. There is, in fact, three ways you can add CSS to your page. What is shown above is an externally linked to sheet. In my years of coding CSS, this wound up being my preferred way of adding CSS to a page. This is because as projects grew more complex, it wound up being easier just to link everything to one CSS file rather than repeating the CSS on all of my pages.
What are the other ways I can add CSS to my page?
A second method is to add an internal style sheet. This is accomplished by adding the <style> tags within the <head> tags. Below is an example of this:
Note that if you have an external linking style sheet and an internal linking style sheet, the internal linking style sheet will take priority. So, if you set your font size to 15 on your external sheet and set it to 12 in your internal style sheet, your font size will be 12.
A third way is through what is known as in-line styling. This is where you take a specific part of HTML and throw in some CSS for very specific styling. Below is an example of in-line styling:
Note that if you style your page using the other two methods, this will override both of the other methods if there is competing code. It’s been my personal experience that I very rarely use this method of styling. 99.9% of the time, you can style your content via the external linking sheet method in my opinion. In only the most complex and unique situations will I ever use this method. Of course, other coders may be different, but that is my personal coding preference.
< You are currently at the first part of this guide! | CSS Index | Headings and Paragraphs >