TMF Web Design: Introduction to CSS

who is this article for? This article has been written for someone who is completely new to the concept of CSS and have a basic knowledge of HTML.

What is CSS?

CSS (Cascading Style Sheets) is a method for adding styles and controlling layout on a web page. CSS can be used to change the fonts, colours and spacing, etc. of any HTML element.

For example consider the two web pages below. The image on the left is a screenshot of a live website, the image on the right is the same website but the CSS has been removed. As you can see both webpages have the same content however they look very different as the webpage on the right has only the HTML markup applied.

What you can do with a website visually with CSS is limited by little else other then your own imagination. CSS can also be used in conjunction with other scripting languages such as JavaScript to create impressive animating effects on your website.

Writing CSS

Before you learn any of your first CSS selectors your going to learn how CSS is used in conjunction with HTML.

There are three ways CSS styles can be applied to HTML elements:

1. Inline styles - these are written within the opening tag of a HTML tag itself, similar to any other HTML attribute.

<h1 style="font-size:30px;">Web Page Heading</h1>

2. Embedded stylesheet - a style sheet can be written within the <head> element of a HTML page, similar to JavaScript.

3. Linked stylesheet - this is the best way to apply CSS to a website, it involves writing all of your CSS styles in a separate file (stylesheet) and linking all of the HTML pages in your website to that stylesheet. A stylesheet is linked with the following line of HTML code in the <head> of the page.

What's In a Selector?

One of the reasons CSS is such a powerful tool is the simplicity at it's core. All selectors follow the same basic structure. It all starts with defining (or 'selecting') the HTML element your going to style, after that you simply need to tell the browser what style you want to apply to that element:

h1 {font-size:30px;}

In the code above we are selecting the "h1" element. In HTML this would be known as the heading tag and would appear in your markup as "<h1>My Heading</h1>". After we have selected our element we then our style within curly brackets "{}". You can define as many styles for this element inside the curly brackets as you like, but each style must end with a semi-colon ";" to tell the browser that the style declaration is finished. If we were to add a second style to that selector it would look something like this:

h1 {font-size:30px; font-weight:bold;}

Selecting Elements on the Page

There are many ways to select elements in CSS. The example above selects the <h1> element by simply by the HTML tag name, by doing this the style will be applied to ALL <h1> elements on the page. Normally there is only one <h1> on a webpage anyway so this is ok, but if we wanted to style just one of many <p> tags on a page we would need to select that element a little differently.

One way of doing this is giving the paragraph we want to style an "id" or "class" attribute. Both of these can be used in CSS to select elements, allowing you to select a specific element by it's id or defined set of elements which all have the same class:

Defining an id:

<p id="paragraph">My paragraph</p>

Defining a class:

<p class="paragraph">My paragraph</p>

The name of the id or class can be anything you like and a single element can have both an id and any number of classes. To select an element in CSS by either the id or class we write a new selector:

Selecting an id:

#paragraph {border:1px solid #000000;}

Selecting a class:

.paragraph {border:1px solid #000000;}

By putting a "#" character before the name of the id your selector will style the element with that id value. Selecting a class is done in the exact same way except by using a full stop "." character in place of the hash.

A Few Examples

Inline Styles

The code below is an example of a simple web page with inline styles.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body style="font-family:Verdana, Geneva, sans-serif; font-size:0.8em;">

    <div id="header">
        <div>
            <h1 style="font-size:32px;">CSS Example</h1>
        </div>
        <div id="menu">
            <a href="" style="color:#3366FF; margin-right:5px;">Home</a>
            <a href="" style="color:#3366FF; margin-right:5px;">Link</a>
            <a href="" style="color:#3366FF; margin-right:5px;">Link</a>
            <a href="" style="color:#3366FF; margin-right:5px;">Link</a>
            <a href="" style="color:#3366FF; margin-right:5px;">Link</a>
        </div>
    </div>

    <div id="contentwrap">
        <h2>Content Heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis aliquet orci a mattis. Sed in diam vitae est egestas posuere viverra eget elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce vestibulum orci fermentum ipsum dignissim ut vestibulum lectus scelerisque.</p>
        <p>Praesent id erat felis, et posuere quam. Sed tincidunt venenatis commodo. Vivamus at elit dolor. Pellentesque mattis facilisis semper. Donec nec condimentum purus. Curabitur tristique pellentesque porttitor.</p>
    </div>

</body>
</html>

Embedded Stylesheet

To write an embedded stylesheet you need to define it using the <style></style> HTML tags. Within these tags all styles need to be written with a selector.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
   body {
       font-family:Verdana, Geneva, sans-serif;
       font-size:0.8em;
   }

   #logo h1 {
       font-size:32px;
   }

   .menulink {
       color:#3366FF;
       margin-right:5px;
   }
</style>
</head>

<body>

    <div id="header">
        <div id="logo">
            <h1>CSS Example</h1>
        </div>
        <div id="menu">
            <a href="" class="menulink">Home</a>
            <a href="" class="menulink">Link</a>
            <a href="" class="menulink">Link</a>
            <a href="" class="menulink">Link</a>
            <a href="" class="menulink">Link</a>
        </div>
    </div>

    <div id="contentwrap">
        <h2>Content Heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis aliquet orci a mattis. Sed in diam vitae est egestas posuere viverra eget elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce vestibulum orci fermentum ipsum dignissim ut vestibulum lectus scelerisque.</p>
        <p>Praesent id erat felis, et posuere quam. Sed tincidunt venenatis commodo. Vivamus at elit dolor. Pellentesque mattis facilisis semper. Donec nec condimentum purus. Curabitur tristique pellentesque porttitor. </p>
    </div>

</body>
</html>

Linked Styles

The best and most common way to apply styles to your website is to link a separate stylesheet file (extension .css) to the HTML page. The main advantage of this is that any changes you make on the stylesheet will be applied to ALL the pages linking to it, which makes many design changes extremely easy and efficient.

HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

    <div id="header">
        <div id="logo">
            <h1>CSS Example</h1>
        </div>
        <div id="menu">
            <a href="" class="menulink">Home</a>
            <a href="" class="menulink">Link</a>
            <a href="" class="menulink">Link</a>
            <a href="" class="menulink">Link</a>
            <a href="" class="menulink">Link</a>
        </div>
    </div>

    <div id="contentwrap">
        <h2>Content Heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis aliquet orci a mattis. Sed in diam vitae est egestas posuere viverra eget elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce vestibulum orci fermentum ipsum dignissim ut vestibulum lectus scelerisque. </p>
        <p>Praesent id erat felis, et posuere quam. Sed tincidunt venenatis commodo. Vivamus at elit dolor. Pellentesque mattis facilisis semper. Donec nec condimentum purus. Curabitur tristique pellentesque porttitor. </p>
    </div>

</body>
</html>

CSS styles:

@charset "UTF-8";

body {
    font-family:Verdana, Geneva, sans-serif;
    font-size:0.8em;
}

#logo h1 {
    font-size:32px;
}

.menulink {
    color:#3366FF;
    margin-right:5px;
}

Conflicting styles

You may have already thought this to yourself by now, but With three different ways (or locations) that you can apply CSS won't some of the styles clash with each other?

Well the answer is yes. When there is more than one style directed at a single HTML element there is a pecking order in CSS as to which style actually takes affect.

Linked styles are at the bottom, any other styles on an element (embedded or inline) will overwrite the linked style. In turn embedded styles can be overwritten by inline styles and of course the inline styles are at the top and cannot be overwritten except perhaps with some sneaky JavaScript.

There is a simple pattern to note here, the closer the styles are to the element the higher up the pecking order they go. However I also want you to note something else, the closer the styles are to the HTML the less versatile they become. For example, an inline style can only ever apply to that one element. Embedded styles can only ever apply to that one page. Linked stylesheets on the other hand can apply to an entire website.

3 comments:

hong_hai_longNov 15, 2010 12:41 AM
Absolutely brilliant post guys, been following your blog for 3 days now and i should say i am starting to like your post. and now how do i subscribe to your blog?
office activation key
TimNov 16, 2010 09:52 PM
Hi hong_hai_long, thank you for the kind words! you can subscribe either by RSS in the "subscribe" box on the right hand side of this page or by clicking "follow" in the followers box just below the subscribe box.
Anil RajanalaMay 18, 2011 10:43 PM
Wow that was odd. I just wrote an very long comment but after I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again. Anyways, just wanted to say wonderful blog!
Web hosting

TMF Web Design

Search

Saturday, October 16, 2010

Introduction to CSS