TO UNDERSTAND THIS TUTORIAL PLEASE HAVE EXPERIENCE IN HTML/XHTML.
Okay, well I've learned CSS over the past few weeks, and I guess I'll provide a quick overview of basic CSS. More tutorials are available at my Web
website hosting (coming soon).
All CSS code goes within curly braces:
Code:
selector
{
code here
}
If you want to make an external style sheet, make a new file called
mystyle.css and open that file and remove all tags. Put the following code:
Code:
p
{
color: #FF0000;
}
Now, go to the index file (normally called index.html), and add the following code after the <head> tag, not after the </head> tag.
HTML Code:
<link rel="mystyle" type="text/css" href="mystyle.css">
Now in between the <body> and </body> tags add:
HTML Code:
<p>Text Here</p>
This will add a colour of red to the text.
Next, if you want the same selector, but use it with the class element. Use:
Code:
.p
{
color: #FF0000;
}
Use the following code to make the text red.
HTML Code:
<p class="p">Text Here</p>
You can add it only for a specific HTML selector:
Code:
span.value
{
color: #FF0000;
}
Now when you use
HTML Code:
<span class="value">Text here</span>
it outputs the colour of text.
Next, if you want every text a colour of red, regardless if you set it to a colour of red with a different selector, use this:
Code:
*
{
color: #FF0000;
}
No code required. It will automatically make all text a colour of red.
If you'd like multiple selectors to do the same text, no point making multiple selectors when you can do this:
Code:
p, h1
{
color: #FF0000;
}
Use as normal, for instance:
HTML Code:
<p>Text Here</p>
or
HTML Code:
<h1>Text Here</h1>
.
If you want to use the id element, use this:
Code:
#id
{
color: #FF0000;
}
Then use the HTML code:
HTML Code:
<p id="id">Text Here</p>
or
HTML Code:
<span id="id">Text Here</span>.
I'll make an advanced tutorial later
. Hope you enjoyed it!