LESSON 03 – INTRO TO CSS
WHERE TO PUT
CSS CODES?
There are several places
that you can place CSS styles.
Because our goal is to learn
how CSS can be used to control the look of an entire website, we will only
focus on using CSS in an external file.
USING A CSS
FILE
The CSS file is simply a
text file that is renamed to .css. For
your browser to know that it needs to apply the rules in the CSS document, you
need to place the following tag in the head section each html document:
<link
rel="stylesheet" type="text/css"
href="filename.css" />
Here is the basic template
for an html document that will use the file myCSS.css for CSS rules.
<html>
<head>
<title>My
Title</title>
<link
rel="stylesheet" type="text/css"
href="filename.css" />
</head>
<body>
Put
all your content here.
</body>
</html>
CSS SYNTAX
We now need to know how to
specify rules in CSS to make things happen on our site. The way that the words are written is called
syntax. We will now learn basic
CSS syntax.
The general syntax for a
rule is the following:
selector
{
property:value;
}
You can also repeat the property:value;
line for different properties.
Of course, the problem is
that we need to learn what are possible selectors and what are their possible
properties. Lets look at a few
examples.
Placing the following alone
in your css file will make the background colour for all paragraph tags set to
pink.
p
{
background-color:pink;
}
EXAMPLE 2
The following will make the
text in all <h1> headers blue and centered:
h1
{
color:blue;
text-align:
center;
}
EXAMPLE 3
We can have many rules in
the same CSS document. The following
will set different fonts for all headers in <h3> and all text in
<p> tags.
h3
{
font-family:
times;
}
p
{
font-family:
courier;
}
The example above includes
details for two items. Each detail is a
rule. So the example contains two
rules.
You can actually place your
rules using a single line. So the
example above could be written like this:
h3
{font-family: times;}
p
{font-family: courier;}
COMMENTS
Comments are explanations of
what is happening in a CSS file. They
are completely ignored by the browser.
They are there simply to allow you to explain some of the code.
You use /* to start a
comment and */ to end a comment.
The following is part of a
css file.
/*Setting
all headers to pink on blue*/
h1
{
color:pink;
background-color:blue
}