Welcome to Virtual Tutorial World Guest!



Define Text Sizes With CSS

 
Post new topic   Reply to topic    VTW Forum Index -> CSS
View previous topic :: View next topic  
Author Message
Please Register and Login to this forum to stop seeing this advertsing.





Tokens:


Posted:     Post subject:

Back to top
computergeek67
Administrator
Administrator


Joined: 31 Jul 2007
Posts: 144


Tokens: 147
Location: US

PostPosted: Wed Jan 23, 2008 6:18 pm    Post subject: Define Text Sizes With CSS Reply with quote

The 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



_________________



Come to me if you have any questions
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:   
Post new topic   Reply to topic    VTW Forum Index -> CSS All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

Card File  Gallery  Forum Archive
Powered by phpBB © 2001, 2005 phpBB Group
Virtual Tutorial World ©2007-2008 computergeek67

Affiliates