CSS Basics
Using CSS to control your Text Appearance
CSS is a great tool for controlling how text looks easily and cleanly. This is a basic tutorial on how you can accomplish this task. I am assuming you are going to hand code all of your HTML/CSS, but this tutorial will work with any method you are using.
Setting up the CSS file.
To start with we need to define our CSS file. So lets start by making a new text file using notepad and save it as "my_first_css.css" without the quotations. Then we want to type the following.
.my_first_css {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
}
What does this code all mean?
What does this mean? Basically this is saying we want the font to be Arial, we want it to be 12px, and we want it to be black. We could have defined a lot of other factors, but I chose not to for the sake of simplicity. Save it and we now have a new file "my_first_css.css ready to use.
Using the CSS file to control your page text.
The reason we would use a CSS file like this is to give our entire site a universal look. We could get much more advanced, and do a lot of really neat stuff but since this is just a very basic tutorial we are only doing "basics". To use the CSS file to control your text is quite simple.
<html>
<head>
<title>CSS Basics</title>
<link href= my_first_css.css " rel="stylesheet" type="text/css">
</head>
<body class="vanEEText">
My First Basic CSS
</body>
</html>
What we just did
What we just did is set a link to the CSS file and then call it to set all of the text in the body section of our code to use it. The reason we use a link is so that we don't have a pile of junk code at the top of our page. From the stand point of Search Engine Optimization this is needless code that impacts our overall site theme. Using a link to the CSS is a clean and simple way to make sure all your pages look the same.
To take and expand upon this you can edit your CSS file to add table controls, and other features so that you can literally control the entire layout of your page with next to no onpage code. Great for search engine optimization, and also good from the standpoint of keeping the site clean and clear to navigate code wise.
Emancipator,
Online WebDev & Consultant
Advice is always free, so are my free site reports!
|
code
of ethics sitemap contact
us
