Starting with CSS

posted by: Mr. Bergquist 13 November 2011 No Comment

Many thanks to Ms Martin & tizag.com for a tutorial some of this is based on!

Why Use External CSS?

  • It keeps your website design (CSS) and content (HTML) completely separate.
  • It’s much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the “link” tag.
  • You can make drastic changes to your web pages with just a few changes in a single CSS file.

Creating a CSS file

Open up Notepad++ or any other plain text editor and type the following CSS code:

body {
    background-color: gray;
}
p {
    color: blue;
}
h1 {
    color: white;
}

Now save the file as a CSS (.css) file. Make sure that you are not saving it as a text (.txt) file, as Notepad++ likes to do by default. Name the file “celebrity-style.css” (without the quotes).

In your celebrity HTML file, add the line in red inside of your head:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="celebrity-style.css" />
    </head>
    <body>
    ...

Make sure your CSS and HTML files are saved in the same directory. Now open your HTML file in your web browser and the entire body should have a gray background, all paragraphs should be blue and all first-level headers should be white!

Experiment

Today, start by playing around with these ideas. Don’t worry too much about making it look great — we’ll talk about that later. Experiment with the following properties and make sure to put them in an external stylesheet:

1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 3.80 out of 5)
Loading ... Loading ...

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>