Quick CSS Tutoral! - UK Web Hosting | Dedicated Server Windows and Linux VPS Forum

**Ben** · #1 (**permalink**) 19-01-2007, 18:29

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!

**Ben** · #2 (**permalink**) 17-12-2007, 10:43

Okay. Let's make sure you know most CSS properties. I'm going to bundle them all in one selector then explain each one individually:

Code:

p {
font-family: verdana;
font-variant: small-caps;
font-size: 12pt;
text-align: center;
text-decoration: underline;
text-transform: capitalize;
text-indent: 5px;
background-image: url("http://www.eukhost.com/images/images/images/secret.gif");
backround-position: top left;
background-attachment: fixed;
background-repeat: no-repeat;
background-color: #ffffff;
}

font-family: could also be: verdana, arial, sans-serif; if verdana isn't available choose arial else choose from sans-serif. Note that sans-serif are fonts without feet, serif are fonts with feet and mono-space are fonts that have a fixed width.

font-variant: could also be none

font-size: you can also choose px (pixels) and em.

text-align: can also be left and right

text-transform: can also be uppercase, lowercase and justify

text-indent: makes an indent (white space).

background-attachment: can also be scroll. Fixed means when the page scrolls it stays in the same position..

background-repeat: repeat, repeat-x, repeat-y and no-repeat.

In the next tutorial I'll explain about margins and paddings.

:santasmiley: :santasmiley: :santasmiley: :santasmiley: