This Tut is to teach you about Cascading Style Sheets (CSS).
What is CSS: Basically what I am going to teach you is a better way to format all text and instead of using <font face=”courier”> and having to go through all the document if you feel you need to change it you can instead jst change a few lines at the top of your html code.
WARNING. You should have a begineers knowledge of html to follow this tut
Warning2. There may be mistakes and im not too good at writing tuts but i thought i would try
First off ALL CSS STYLES MUST BE WRITTIN IN HEAD
OK so move up to head and write this
Code:
<style type="text/css">
<!—
This tells it that everything that follows is styles for your page.
Next we have to create some styles don’t we. There is two ways to do this.It will either start with a dot or not. More on that later.
Code:
.subhead{
font-family:verdana,arial;
font-weight:bold;
color:Blue;
font-size:18px}
Ok lets go through it piece by piece. Ok so first we start with the
.subhead{
This tells the style that follows are for subheadings and when we call a subheading style its here. The parenthesis is just there. Lol
Next is font-family. This is basically the font thaty you want it to have. And then alternate fonts. IT MUST HAVE A SEMI COLON AT THE END OF THE LINE. Ok now that we have that straight lets move on. You should get the rest its pretty straight forwardNow you need a semi colon on every line EXCEPT the last one at which you put a parenthesis
Now to end your style sheet end it like this
Code:
<style type="text/css">
<!--
.subhead{
font-family:verdana,arial;
font-weight:bold;
font-size:18px}
-->
</style>
OK so that’s one style sheet done. Now how to use. This will go inside your body.
Code:
<span class=”subhead”>This is a subheading</span>
Ok you may see this and think wow that’s a lot of work just to make the text bold a bit bigger blue and a diff font. But no. You see you can use the class multiple times in your page. So if you have heaps of subheadings just use the c;ass. Then say na I don’t like the bold on them or na I think there a bit too small I need to make them bigger. Instead of going through your page searching for the tags you can just go to top change one line then all your subheadings change.
Now comes another way to use CSS and this is pretty cool ill show you two examples. Most of you should know the <h1> tag. Its prob the first thing you learn when leaning HTML. OK well you may think damn its stuck to that certain size or I want all my <h1>s to be a diff font or whatever lol then you may do this.
Code:
h1{
font-family:verdana,arial;
font-weight:bold;
font-size:22px}
ok notice there is NO dot infront of the h1. This is because it is a HTML tag already unlike our old .subheading.. Ok so pratically it is the same no doubt you have noticed this. But when we want to put use to our style in the body we use the <h1> tag normally. Instead of using our span tags.
This can be expanded to the whole text using
Code:
body{
font-family:verdana,arial;
font-weight:bold;
font-size:14px}
This means that everything inside the body will be verdana font, bold etc. Unless sp[ecified by another tag etc heading tags or font tags.
So to conclude here is our completed code.
Code:
<html>
<head>
<style type="text/css">
<!--
.subhead{
font-family:verdana,arial;
font-weight:bold;
font-size:18px}
h1{
font-family:verdana,arial;
font-weight:bold;
font-size:22px}
body{
font-family:verdana,arial;
font-weight:bold;
font-size:14px}
-->
</style>
</head>
<body>
<h1>Our Main heading</h1>
<span class="subhead">A subheading</style>
this text will correspond to our body style
</body>
</html>