[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS Instruction

Posted on 2005-04-30
8
Medium Priority
?
217 Views
Last Modified: 2012-08-13
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
0
Comment
Question by:mhoggatt1
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 32

Accepted Solution

by:
Batalf earned 1000 total points
ID: 13900767
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13900875
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
 
LVL 32

Expert Comment

by:Batalf
ID: 13900989
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 15

Assisted Solution

by:Daydreams
Daydreams earned 1000 total points
ID: 13901187
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13901340
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
 

Author Comment

by:mhoggatt1
ID: 13913408
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
 
LVL 15

Assisted Solution

by:Daydreams
Daydreams earned 1000 total points
ID: 13913790
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
 
LVL 15

Expert Comment

by:Daydreams
ID: 14007820
mhoggatt1, glad we could help and thanks for the A!
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month18 days, 22 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question