Sonia has attended:
Dreamweaver 8 Introduction course
CSS Formatting
Hi
Could I get further clarification on CSS Formatting. Thanks
Sonia
RE: 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