HTML Part 10 – Attaching and Linking CSS

In the previous guide, we discussed heading rules, comments, and offered some thoughts on HTML in general. In this last part of our main guide, we’ll discuss an important element of web coding – the ability to modify the appearance of HTML through what is known as a Cascading Style Sheet. While we won’t go into too much depth on CSS as this is an HTML guide, we will show you the three ways in which you can put CSS into your HTML.

The three ways to add CSS to your page are: through an External Style Sheet (most recommended), Internal Style Sheet, and inline style.

External Style Sheet

An external style sheet allows you to easily create general styles that will be found throughout your entire site. It also requires the most file management (which is not a whole lot, really). What yo need to do is first create your HTML document in your folder. Name it something easy to remember (or, use the default index.html filename). Next, create a folder. Name it something easy to remember (like “styles”). In that folder, create a text file and name it something easy to remember (like “style”). It doesn’t matter what you name this file, but the key important thing is to change the file extension from “.txt” to “.css”. So, you should have a file structure something like this:

HTML10_1

…and within your folder, something like this:

HTML10_2

Next, we are going to start editing our HTML page. Put the usual basic stuff in the HTML document like so:

HTML10_3

So, first things first: we are going to need some HTML we are going to modify. Let’s just do something really simple and modify the Paragraph (p) tag. So, we just insert some text while using the paragraph tag (make sure there is enough text to make your standard paragraph. What that text is really doesn’t matter) like so:

HTML10_4

Yeah, I think that’s enough text. So, what you should end up with when testing this code is something like this:

HTML10_5

Obviously, not a whole lot to this website, but this does serve to fit our purpose here.

Now, the next thing we need to do is to modify our CSS file. Open it up in notepad and put the following code in:

HTML10_6

What we are inserting is “p” (which tells browsers that we are changing the “p” tag in our HTML. Then, adding in a curly bracket (which is found when holding shift and pressing the button to the right of most keyboards). This tells browsers that we are starting to define what modifications we are putting on our paragraph tag. Next, we are saying that we are changing the “text-indent” (how much are we moving the first line in our paragraph over). We are then adding a colon which tells browsers that we are going to tell them how much we are indenting our text. Next, we are telling the browser that we want to move the first line over by 50 pixels through the “50px”. Next, we are adding the semi-colon to tell browsers that this is all we are doing with the text indent. Finally, we are adding the other curly bracket to tell browsers that we are done with the new rules surrounding the Paragraph tag. That’s really what we are saying. If that doesn’t quite make any sense, don’t worry, we’ll go through this in more detail in our CSS tutorial. For now, the important thing is that we have the above code in our CSS file.

Once you have done adding this little bit of code in, save the file and close it. We are no longer making any changes to the CSS for our little test.

Now, let’s go back to editing our HTML page. What we need to put in our HTML page is a way for browsers to find our CSS page. If the HTML page isn’t pointing to our CSS page and telling browsers that we have put in place some rules for displaying certain things, all browsers will be reading is what we put in our HTML portion of our website.

What we first need to do is put this “link” into the “head” tags. The code we need is < rel=”stylesheet” type=”text/css” href=”[folder name]/[stylesheet name].css”>

In my case, this is what I inserted:

HTML10_7

While link, rel, and type might not be all that familiar to you, href should be very familiar if you know linking in HTML. This follows the same principal of internal linking – pointing directly to a file on your computer or server directly.

Save your HTML when done.

If you have followed these steps correctly, you should be able to open your HTML page and find that your text has been modified to include a nice indent. In my case, this is what I got:

HTML10_8

Note that the first line has some space at the beginning. If you see that on your page, you have successfully created and linked your external style sheet.

Now, if you create another HTML page that has completely different content (and you are using a “p” tag and have that style sheet properly linked in that HTML page within the head tags), you’ll notice that the rule you put in your CSS will apply to those pages as well. This allows you to create multiple HTML files and have one simple little CSS file make all of fancy pretty things you did to one page apply to every page. This makes web design substantially easier because you don’t have to manually design each and every individual page.

Internal Style Sheet

An internal style sheet is somewhat similar to an external style sheet. However, instead of creating a separate file for your styling, you are placing that stylesheet within your HTML page instead.

So, let’s go back to our HTML page we created and delete that line that linked to our external CSS file. If you didn’t follow our previous section, your code should ultimately look something like this:

HTML10_9

Like I said, what you use as text in the Paragraph tags really doesn’t matter. The important part is simply that there is a lot of text there to create a paragraph.

Now, the question is, can I add CSS to this page without having to go through the trouble of creating an entirely different page altogether? The answer is yes.

Let’s go to our head tags and use the “style” tags like so:

HTML10_10

While the style tags won’t do anything by themselves, these tags are telling browsers that this HTML page follows certain style rules. Next, we need to add our style rules in these style tags.

In this case, to see that our CSS is working, we are going to add “p” to modify our paragraph tag, curly bracket, “text-indent:” for our rule, “50px” for our value, semi-colon, and finally a closing curly bracket like so:

HTML10_11

Once this is saved, you should have an end result something like this:

HTML10_8

Note that the first line in our paragraph is indented. If it is, you have successfully created an internal style sheet.

Inline Styles

Inline styles might help with very complex styling problems, but, ideally, one should avoid these methods of styling and stick with keeping the stylesheet separate from your HTML presentation. Otherwise, the code becomes convoluted. I’ve personally never run into a situation where an inline style is the only option for styling websites, but if you absolutely have to style your website with something like this, this is how it is done.

If you are following along in either of the previous two parts in this section, delete the CSS you inserted in your page so you have something like this:

HTML10_9

Now, go to your Paragraph tag. You’ll need to modify the opening part of it. So add a space after the “p” and type “style=”. Add a double quote as this is going to tell a browser what the rule is you are inserting. Then, add “text-indent:50px;”. After that, add another double quotation mark to indicate that you are done creating a rule. What’s after this should be your angle bracket. This is what it should look like:

HTML10_12

Save the page.

What you’ll end up with is this:

HTML10_8

Note the indentation of our paragraph.

As you can tell from the code, with inline style is that the code can get very messy very quick. It’s also much harder to understand than the other two methods we used to insert a style sheet. This is a big reason why inline styles should be avoided if possible.

What Happens When You Use All Three

Let’s say we have used all three methods of inserting styles. What if the rules conflict with each other? What rule takes over?

Well, there is a hierarchy of what rules are read. If you have gone through all three sections of this tutorial, you should have that external CSS page. Don’t change it, we are going to leave it as having an indent of 50px. However, we want to still link to it, so we’ll put the linking code back in.

Now, in our HTML page, we are going to insert our internal style sheet, only set our text indent to 25px. This should cut the amount we have indented our paragraph in half. Finally, create an inline rule, only have the pixel value set at 100px (which, of course, would double our original indent.

What you’ll wind up having is this for our page:

HTML10_13

Which rule will win out? Our inline style. Here’s the end result:

HTML10_14

Note that our indentation is double to that of our previous tests.

As a general rule, the closer the style code is to our HTML, the more precedent it has to be used. So, our inline style (closest to our HTML) overrules our internal CSS rules. Our internal CSS rules overrule our external CSS rules (furthest away from our code). If you are mixing your different kinds of CSS rules, that is what is going to end up happening. Again, ideally, you just use an external stylesheet and be done with it. The flexibility you have with CSS is more than likely going to permit you to simply use an external CSS file.

So that is it. Next up, we have a guide dedicated to CSS. That is the natural next thing to learn.

Also, if there is anyone who wants a guide on a specific thing surrounding HTML, feel free to drop us a comment. We may be able to add to this guide if there is interest. I hope you enjoyed this guide and now have a basic understanding of HTML!

Part 9 – Heading Rules, Comments, and Thoughts on HTML | HTML Guide List | You are currently at the last part!


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.