HTML Help

myuzik_man63 · Joined: 18 Oct 2009 Posts: 7

Hey. I don't know a whole bunch about HTML, but I am still learning. I have, however, taken web design classes and have designed several websites, so I'm not completely new to the world of HTML.

Anyway, I am using a web designing program, Kompozer (which isn't great, but it works). I can't figure out how to create a stylesheet. It will let me create styles, but it won't apply the styles to the page. Can anybody help me?

This is the style I've got right now:

<style type="text/css">
.uwg_style {
border: medium solid #666666;
font-family: DejaVu Sans Condensed;
font-size: medium;
background-color: #333333;
color: #b30000;
background-image: url(images/uwg_logo.jpg);
background-attachment: fixed;
}
</style>

sticks464 · Joined: 31 Dec 2006 Posts: 2311

If the styles are in the head section of the page, all you have to do to apply it is to put a class with the same name to an element in the html.

Code: <div class="uwg_style">Blah Blah</div>

Any style with a period (.) in front is a class, if it has an # it is an id. Classes can be re-used on a page but an id is a one time deal per page.

The styles it is writing are not the best

Code: border: medium solid #666666;
you should define the border with pixels
Code: border:2px solid #666;

Code: font-family: DejaVu Sans Condensed;
You should never specify a single font type since most users do not have a lot of fonts. Any font that contains 'whitespace' or space between words has to be enclosed with quotes.
Code: font-family:"DejaVu Sans Condensed", Verdana, Arial, Helvetica, sans-serif;
and can also include the font size using the shorthand method
Code: font:12px "DejaVu Sans Condensed", Verdana, Arial, Helvetica, sans-serif;

Code: font-size: medium;
Font sizes should be set with pixels or em's, IE is the only browser that understands and will correctly render 'medium'.
Code: font-size:12px;

or

font-size:1em; /*1em being = to 12px*/

Code: background-color: #333333;
background should be written using the shorthand method
Code: background:#b30000;

Code: color: #b30000;
Is used correctly

Code: background-image: url(images/uwg_logo.jpg);
background-attachment: fixed;
}
both of these rules can be included in the background rule if you use the shorthand method.
Code: background:#b30000 url(images/uwg_logo.jpg) fixed;

Reference: CSS, html and javascript http://reference.sitepoint.com/css
Just type in the word you want a definition and an example of;
example:type in any word, class, font, background etc.