CSS Tutorial : Part 1
Sample of the pdf document :
CSS adds style to tags in your html page. With HTML you told the browser what things were (e.g., this is a paragraph). Now you are telling the browser how things look (e.g., I want my paragraphs to have blue text with double-spacing and a purple background). To make all paragraphs have the style just mentioned, you’d add the following CSS code (I’ll explain what each line means in detail later):
p { background-color: purple;
color: blue;
line-height: 200%;
}
A. Adding Style to a Web Page (3 options):
You can add a style to your web page in 3 different ways:
Method 1. By including the style in the head section of the web page, e.g.,:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title> The web page </title>
<style type="text/css">
p { background-color: purple;
color: blue;
line-height: 200%;
}
</style>
</head>
Method 2. By including the style inline (e.g., in the tag itself in your html document), e.g.,:
<body>
<p style = “background-color: purple; color: blue;line-height: %200;”> This is a blue paragraph with a purple background color </p>
…
**Method 3** By attaching a “style sheet” to your web page, and then placing all your styles in that new style sheet.
To do this, you first create a brand new file (not a web page, a brand new completely blank file). You put in this brand new completely blank file they style(s) you want (e.g.,:
p { background-color: purple;
color: blue;
line-height: 200%;
}
2
Once the file contains a style, save it as blablabla.css. The blablabla part can be some other name, if you prefer, but the .css must be just that.
Now you’ve got to attach the style file to your html file. If you skip this step, the styles you’ve created in the css file won’t be applied to the web pag............
Click here for Download PDF / FREE
0 commentaires: