Something that is quite crucial to understanding CSS that we did not cover in the first part of this series is how to add CSS to your page. There are three ways to do so, and each one has a different level of ‘strength’ on the elements that they are targeting. They are as follows:
- External style sheets
- Internal styles
- Inline styles
Inline styles
Inline styles, by far, are the strongest form of styling an element. No matter how much you try to style an element through internal or external styles, you cannot override any inline styles. To add inline styles, you simply place the styles in the ‘style’ attribute of an element. Here is an example.
<h1 style="color:red;">My Dummy HTML</h1>
Notice that you do not need to include the brackets or the selector in inline styles since your are only allowed to style that one element. The example above will result in a h1 element with a red text color like so:
A Red Heading
Internal Styles
Internal styles are styles that are added to the ‘head’ section of your markup like so:
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to add CSS to your page</title>
<style type="text/css">
h1 {
color:green;
font-size:20px;
font-family:Arial;
}
p {
margin-left:20px;
padding:10px;
}
</style>
</head>
<body>
<h1>My header</h1>
<p>This is an example of a paragraph tag.</p>
</body>
</html>
You will notice the ‘style’ element has an attribute of type=”text/css”. Now, internal styles do not have to be in the head section, but if you want to comply with web standards, that is where you should place them. Internal styles do not have as much ‘strength’ to style html elements as inline styles, but they are certainly stronger than external style sheets.
External Style Sheets
External style sheets are ‘weakest’ form of styling a web page, but they are the “correct” way to do so.
To create a stylesheet, create a new file in your favorite text editor and and save as style.css in the same directory as your html page. Here is an example:
Here is an example of where you can place your external CSS stylesheet.
Now, to add an external style sheet to your page, you need to use the ‘link’ element, not the ‘style’ element. This has shot me in the leg several times (more than I can count on my fingers, I will admit…). If we were to want to link to the stylesheet style.css from the document index.html like in the screenshot above, and the index.html document is the home page of www.example.com, here is a good way to do it:
<!DOCTYPE html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://www.example.com/style.css" type="text/css" media="screen" />
</head>
Later on, we will cover what the media attribute means, but for now we will simply examine what else is happening here. The rel attribute specifies the relationship between the current document and the linked document, which means that the file that is being linked is a stylesheet for the HTML document. The href should be fairly obvious. This attribute specifies the location of the linked document in relation to the current document. If the style.css document were in a different folder or directory on our site, we would specify the path absolutely(i.e. ‘http://www.example.com/style.css’) or relative to the current document (i.e. ‘./style.css’). If you do not understand how folders and directories on a web server work, I would stick with absolute paths for now. The type attribute specifies (technically speaking) the MIME type of the file. This has to do with HTTP headers and server interaction, but for CSS, just put type/css.
Note: link tags must always go in the head section of your HTML document.
Conclusion
After this post, you should now be able to add a CSS stylesheet to your web pages no problem! As always, please subscribe to the feed or follow me on Twitter!
