What is CSS?
CSS stands for Cascading Style Sheets and it can be used to style your HTML files. HTML, or HyperText Markup Language, is responsible for the structure of your document. HTML tags are used to semantically divide your page content into meaningful sections. These sections and elements are then styled, and given layout characteristics via a separate .css file.
The Benefits of Using CSS
The alternative to using external CSS files consists of styling individual elements within your .html page…but this poses one major problem. Imagine you start out with a simple website; a few headings, images and paragraphs (nothing too crazy). Then, a couple weeks later, you decide to add some more pages. You will find yourself restyling many elements which you’ve already styled in your other file. For example, the font sizes of headings, the spacing below images, the width of your sidebar, etc. Fast forward another couple months…and you decide to change the color of the links throughout your website. Without an external CSS file declaring the styles for your entire website, you will need to go through and change the style for each individual link. Let’s start with a few examples:
a {
font-size: 12px;
color: #FFFFFF;
}Here, you can see an example of a style declaration within a .css file. You start with a selector, in this case ‘a’ which targets all hyperlinks. Then, you type a pair of curly braces, and within these braces you list off the specific styles you would like to apply to the selected element(s). As you can see above, I have set the size of my hyperlinks to be 12 pixels, and the color to be white (#FFFFFF).
You can also select elements based off of their class or ID. Here are some examples of assigning a class or ID to HTML elements, followed by some examples of how to style those elements:
<div id="sidebar">This is a div tag with an ID.<div>
<h1 class="blog-title">This is an h1 heading tag with a class.<div>
#sidebar {
width: 310px;
background-color: #EFEFEF;
}
.blog-title {
font-size: 48px;
font-weight: bold;
}
There are several other selectors which are more advanced and can target elements more specifically. I will delve into the details of these in a future post.
Lastly, in any .html file which uses CSS styling, you will need to link to the .css file in the <head> section of the .html file. This lets the HTML document know where to look on your server for the styles necessary to display the page.
<link rel="stylesheet" type="text/css" href="styles.css" />
When this code is placed in the <head> section of your .html file, the server will know to open the styles.css file and to apply any applicable styles to the current document.
Comments
I love reading your site for the reason that you can always get us fresh and awesome stuff, I feel that I should at least say a thank you for your hard work.
- Henry
Comment by rachat de credit on November 29, 2010 at 8:07 am