CSS Formatting

Hi there Sonia.

I hope you enjoyed your Dreamweaver course yesterday.

These previous posts should be helpful:
https://www.stl-training.co.uk/post-4483-css.html
https://www.stl-training.co.uk/post-898-css.html

CSS definitions are usually linked in through an external CSS text file, or defined at the top of your document in the HEAD section.

There are 4 main types of CSS. Tags, Classes, Pseudo-class selectors and IDs. Below I will give examples of each. You can also use Dreamweaver's built in CSS tools for a more wizard/dialogue box style interface. The following is the code behind it.

Tags (redefining)
CSS code:
h1 {
color: red;
}

HTML code:
<h1>This will be red</h1>

Classes
CSS code:
.myHeading {
color: green;
weight: bold;
}

HTML code:
<p class="myHeading">This is green and bold</p>

Pseudo-class selectors
CSS code:
a:link, a:visited, a:active {
color: pink;
text-decoration: underline;
}
a:hover {
color: blue;
text-decoration: none;
}

HTML code:
<a href="/products.html">This link will be pink, unless mouse is hovered over, in which case it will be blue and no underline</a>

IDs
CSS code:
#dog {
color: brown;
}
#dog .puppy {
color: blue;
}

HTML code:
<div id="dog">This will be brown.
<span class="puppy">This will be blue</span>
</div>

A really great web site to help you get started and a bit of practise is http://www.w3schools.com/css/

I hope this helps Sonia. I look forward to any follow up questions you have to this, or answering any future queries you may have.

Kind regards, Rich