CSS Instruction

I need some help on understanding CSS. Could you provide some sample code on how to make a line of code 3 different sizes and font styles. I need to learn how to use CSS to cut down on coding. Also is there a link to a good tutorial on CSS ?
Thanks,
Michael
mhoggatt1Asked:
Who is Participating?
 
BatalfConnect With a Mentor Commented:
A couple of good sites about CSS

http://www.w3schools.com/css/default.asp
http://css.maxdesign.com.au/
http://www.csszengarden.com/

I'm not sure what you mean by 3 different sizes and font styles. In CSS, you can define font styles for your elements.

example:

<style type="text/css">
h3{
    font-family:verdana;
    color:#660000;
}

</style>

and in the body of your page

<h3>This text is in red</h3>
<p>Normal body text</p>

One of the advantages by using CSS is that you could put it in an external file which could be cached by the computers.

example:

<link rel="stylesheet" href="myCSS.css" type="text/css" media="screen" />

Here the css rules is in the file myCSS.css.  

Another advantage is that you are separating design from the structure of your document. The HTML code should not contain any layout information. If possible, all that should be put into the CSS file.


ps! Read about what happened when ESPN converted to css based layout on their web pages: http://www.mikeindustries.com/blog/archive/2003/06/espn-interview

Batalf
0
 
COBOLdinosaurCommented:
Wow! Great link Alf.  The date is interesting.  Two years ago we were pretty much promoting the mothods that they used including some use of absolute positioning.  We have moved to a more flexible design as some of the issue they had, have resolved but it gives up a great spot to point to for the 20th century thinkers that big sites have to use tables.

Thanks for adding the to my bookmarks.

Cd&

0
 
BatalfCommented:
Yes, it's a very interesting article. And the fact that they on top of all the other benefits saved 2 terabyte in bandwidth a day is just amazing. It should be an even bigger motivation for big sites to use CSS based layout. The conclusion "Everyone agreed that embracing standards was the right thing to do…" also pretty much sums it up I think.

Batalf
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
DaydreamsConnect With a Mentor Commented:
Hi mhoggatt1,

Take a look at this example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.styleone {font-size:2em; font-family:Verdana;}
.styletwo {font-size:12px; font-family:"Times New Roman";}
.stylethree {font-size:16px; font-family:Tahoma;}
</style>
</head>
<body>
<p>This paragraph has default style</p>
<p class="styleone">This paragraph has a size of 2em and the font-family Verdana</p>
<p class="styletwo">This paragraph has a size of 12px and the font-family Times New Roman</p>
<p class="stylethree">This paragraph has a size of 16px and the font-family Tahoma</p>
</body>
</html>

The styles cut down on coding because you can use the style as many times as you need to, while it is define once in your styles (which can be an external stylesheet such as suggested by Batalf).

(That is an interesting link, Batalf!)
0
 
COBOLdinosaurCommented:
I wonder what it costs a large site like that for 2 terabytes a day.  That is a huge cost saving just by cutting down the code, plus we already know there are substantial saving in maintenance costs.  

Maybe we should be emphasizing that botttom line $$$$$ factor when we are making the case for standards compliant CSS based development.

Cd&
0
 
mhoggatt1Author Commented:
Hi guys,
   Lots of good advice. If I place this code in a mycss.css file in a folder-

<style type="text/css">
.styleone {font-size:2em; font-family:Verdana;}
.styletwo {font-size:12px; font-family:"Times New Roman";}
.stylethree {font-size:16px; font-family:Tahoma;}
</style>

What would the code daydreams sent me look lile in the body ?
Thanks
Michael
0
 
DaydreamsConnect With a Mentor Commented:
Hi Michael,

When you put the styles in a .CSS file, omit the <style type="text/css"> and </style> tags in that file.

Remember to link your page to them as Batalf said in his first post. Put this:

<link rel="stylesheet" href="mycss.css" type="text/css">

..between the <head> and the </head> tags.

Read my comment above again please. You will see in the html I gave the descriptions of how a particular style will look. Your first style would show a paragraph with a font size of 2em and the font-family Verdana if you use the style as a class of the <p> tag. You may use it for other tags as well, for example <div> or other elements.
0
 
DaydreamsCommented:
mhoggatt1, glad we could help and thanks for the A!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.