Okay, a couple things. first you have a css file ex1.css with this in it:
Code:
<style type="text/css">
p.arial {font-family: arial}
p.{font-size: 70%}
p.{text-align: center}
p class="footer">
{
<p class="footer">Copyright © 2004-2008 ARK Interiors. All rights reserved.</p>
}
</style>
the style tags are not needed (and cause problems) the browser knows it is a css sheet by the extension. That would be like using a javascript tag inside a .js file.
Second, you don't need to specifically declare paragraph tags, you can make classes and IDs and assign them in the HTML to what ever you want.
Usually a basic CSS sheet will contain the following:
body style: this is your overall look of the page, from font stuff, to back ground colors, indents, etc.
ul/li lists: you will define your unorder list elements, in these, are there bullets or not, how are they displayed, etc.
links: everything from active, hover, visited for your links will also be defined. Highlights, colors, etc.
address: you can define an address design, make font smaller, italic, etc. etc.
With just that you can design the overall look of your page. Then comes the "more detail". Using div's, paragraphs, body elements, and the like with similar attributes. you define classes (noted by a period before the name - .lowerClass - ) or IDs (noted by the pound sign - #upperId - ) in which you can redefine the colors, actions, states, etc.
a simple css might look like this:
Code:
body {
padding-left: 2em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: 600;
color: #BBBBDD;
background-color: #000000;
}
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em;
}
h1 {
font-family: Georgia, Arial, SunSans-Regular, sans-serif;
}
h2 {
font-family: Georgia, Arial, SunSans-Regular, sans-serif;
}
h3 {
font-family: Georgia, Arial, SunSans-Regular, sans-serif;
}
hr {
border: none 0;
border-top: 3px double #CC0000;
width: 100%;
height: 3px;
margin: 10px auto 0 0;
text-align: left;
}
ul.navbar li {
color: blue;
background: #336699;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black;
}
ul.navbar a {
text-decoration: none;
}
a{
outline: none;
}
a:link {
color: #FF3030;
background: #000000;
}
a:hover {
color: #228B22;
background: #000000;
}
a:visited {
color: #CD2626;
background: #000000;
}
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted;
}
img {
border-style: none;
}
#images {
text-align: center;
z-index: -100;
}
.first{
background: #CCCCCC;
border: thin dotted #FFF8DC;
font-family: serif;
font-size: 14px;
font-style: normal;
color: navy;
}
.second
{
background: #CCCCFF;
border: thin solid #9F2D41;
font-family: serif;
font-size: 15px;
font-style: normal;
color: red;
}
As you can see, if you go down line by line, I have defined a lot of things, colors, fonts, font styles, back grounds, background colors, etc.
To utilize this CSS I might have a page look like this:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Tess Css Page!</title>
<link rel="stylesheet" type="text/css" href="CSSName.css">
</head>
<body>
<div id="images">
<h2>Testing of the page!</h2>
<div class="first">
This div is a different style than the body.<br>
Here we might add a photo:
<br>
<img src="image.gif" title="picture" alt="picture">
</div>
<div class ="second">
This div is even more different than the body or the other div<br>
Here we might have a link or two:
<a href="http://dynamicdrive.com">Dynamic Drive</a>
<a href="http://cleverwasteoftime.com">CWoT</a>
</div>
<hr>
I can then include my address as defined in the CSS:
<address>
mymail@me.com
</address>
</div>
</body>
</html>
Then you will want to run your HTML page through a validator service as well as your CSS to find and help fix any errors.
CSS - Changing text in External so it automatically changes in web pages
Reply With Quote
Bookmarks