Beginning CSS
Many thanks to 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 on Thursday. Experiment with the following properties and make sure to put them in an external stylesheet:
- background-color
- background-image
- text-align
- font-family
- font-size
- height
- width
- links styling
- list-style
(No Ratings Yet)
Loading ...