Chapter 3 - Basic CSS
CSS stands for Cascading Sylesheet, therefor one refers to it as css or stylesheet.
CSS plays the most vital part in modern web layout, without a good knowledge of CSS, you can't be a good webdesigner. CSS can be used to style your text and your links, it can be used to make mouse over effect and it can be used to position layers. I will go through basic CSS in this chapter, how to style text and how to create classes.
To apply CSS on a tag such as the <p></p> tag, you simple write <p style=" css code here "></p> here is a list of certain css code you can apply to the paragraph tag:
font-family: ;
font-size: ;
color: ;
font-weight: ;
As you may notice, every CSS attribute has a word, a colon and a semi-colon to end it. You place the value connected to the attribute between the colon and the semi-colon, like this:
font-size: 12px;
which of course means that the size of the font will be 12 pixels. To apply this in to a paragraph tag, you simply write:
<p style="font-size: 12px;">This text will gain the size of 12 pixels</p>
You may apply style="" to most html tags. But in most cases, there is a better way to deal with CSS. A rule in webdesign is to separate layout code and style code.
So how do I separate CSS and HTML code? You create a class with the CSS code and connect the class to a HTML tag, You must place this CSS class in a special Stylesheet section in the head section. Confusing? Don't worry, I will show you how it's done.
<html>
<head>
<!--This is the head section -->
<style type="text/css">
<!--This is the style section -->
</style>
</head>
<body>
</body>
</html>
Okay, now I know where, now I want to know how! let's say your class will be used to style a paragraph tag so that the text inside is bold, 14 pixels high and has Arial as font. Fist you must come up with a suiting name, like "p_font". So let's call the css class "p_font" because it's font style placed on a paragraph tag.
.p_font {
font-family: Arial;
font-size: 14px;
font-weight: bold;
}
You will notice me placing a dot before the name, you must do this in order for it to work. You connect this css class to a paragraph tag using class="", like this:
<p class="p_font">This text is styled with the css class p_font</p>
The best thing with making css classes is that you can apply them to how many html tags you wish. 10 <p></p> tags, 5 <h1></h1> tags and 1000 <img /> tags and they all get the same styling, obviously the <img /> tag would have little use for font styling hence it's an image. but there are a number of different styling methods that applies to images.
Here's a whole example of this:
<html>
<head>
<title>A website with CSS</title>
<style type="text/css">
.p_font {
font-family: Arial;
font-size: 14px;
font-weight: bold;
}
</style>
</head>
<body>
<p class="p_font">This font is styled using a css class</p>
</body>
</html>
There are no numerical limitations to how many classes or how many tags you can connect to a class, or serval classes if you so wish. So be open minded with CSS because it's incredibly powerful with the right knowledge of it. You can learn all the syntax there is to learn about it, yet don't scratch the surface of it's potential if you don't how you can use it in the best way.
You can also decide the styling of every tag in a certain family without applying classes to them, you do this by creating a sort of global CSS "class", for example:
p {
font-family: verdana;
}
This decides that all <p></p> tags have Verdana as font. There is no dot on this one, nor can you create custom names. if you write p {} you mean all <p></p> tags. if you write img {}, you mean all <img /> tags.
Now experiment with your new knowledge on the site you made in chapter 2, apply css classes to your <p></p> and <h1></h1> tags to change the text font, size and weight.