computergeek67
|
Define Text Sizes With CSSThe first thing we need to do in our html file is to refer to our css file in the header section, this can be done with one line of code.
| Code: |
<link rel="stylesheet" href="style.css" type="text/css" /> |
Now you can write all the content you want in your html files, all text will be controlled from our style.css file.
So lets get down to business.
The way things work in a css file is by hierarchy, I will try to make this explanation as short and to the point as possible.
first we define things in the root called the html then the body and like so.
html
--- body
------ id's
---------class's
This means if you define a paragraph text size to 12 px in the body element, then all paragraphs will be 12 px, with the exception that you have giving other instructions further down the hierarchy.
In this example we will define is the text size of all our paragraphs on a web page, then we will do some other definitions further down our hierarchy. This might sound confusing by now, but try to look at the code below.
| Code: | body p {
font-size: 12px;
}
#content p {
font-size: 10px;
}
div.menu {
font-size: 8px;
}
p.bigP {
font-size: 14px;
} |
Did you understand the styles? well here is a brief explanation.
All text in our body content has a font size of 12 px, then when we go within a div element, or whatever element addressed with an id=content will have a font size of 10 px.
A div tag with a class called menu has a font size of 8px.
We could also go as deep to say that we specify every single paragraph's style by giving the p element a class="bigP"
This is actually the end of the tutorial, if you follow these guidelines you can be able to only change font sizes one place and it will change in all you web pages, which makes things a lot easier.
-0Tutor.com
|