homepage Welcome to WebmasterWorld Guest from 54.205.144.54
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

This 45 message thread spans 2 pages: 45 ( [1] 2 > >     
CSS Crash Course - Introduction to StyleSheets
What are Cascading StyleSheets?
Nick_W




msg:1210120
 10:23 pm on Dec 17, 2002 (gmt 0)

CSS Crash Course - Introduction
What are Cascading StyleSheets?

Hi everyone, I'll be running a series of crash course, hands
on
CSS tutorials over the next couple of months as many members
still have yet to break the ice with stylesheets. And more than a few have made it part of their New Years Resolutions! [webmasterworld.com]

You will find the index to CSS Crash Course here [webmasterworld.com].

What will you learn?
The course will be very much a practical, hands on guide, with links to
further reading and information. We'll take a simple XHTML Document [webmasterworld.com] and
gradually turn it into a presentable web page whilst learning the basics
as we go. For example:

  • Font Control
  • Selectors
  • Colors, Borders, Margins and Padding
  • The CSS Box Model
  • CSS-P - Using CSS for Layout
  • Form presentation
  • List styles
  • Anything else you want (just let me know..)

You're invited to discuss the course and please point out any missing or
complimentary information. er... and mistakes of course ;)

Browser support
All of the stuff we'll be discussing in this and the next part of the course (font control), is well supported by the major browsers, including NN4. Where an exception to this occurs, I'll let you know. If you spot something I miss, let me know...

So What are Cascading Style Sheets?

Essentially, CSS is the preferred way of styling HTML elements. That
includes colors, fonts, positioning and other presentational
aspects of n web page.

HTML was not originally designed to handle the presentation of web
pages, just the structure of hypertext documents. By the time
we got to HTML 3.2 though, both Netscape and Microsoft had added a whole
bunch of new and sometimes proprietary tags and attributes to the
original specification.

Prime examples would be the <font> tag, the color attribute and the
annoying <blink> tag. None of these are supported in current XHTML specs.

The consequences and legacy of HTML 3.2 still
haunt us now, we surf a web of pages that are bloated, display poorly,
and in extreme cases are downright butt ugly.. Not to mention the
fact that the majority of pages that are written using this kind of code
are an accessibility nightmare.

All is not lost!
In December 1996, almost exactly a year before HTML 4.0 was released, the World Wide Web Consortium [w3.org] answered this progressively worsening problem with StyleSheets!

The Concept of StyleSheets

The basic idea behind CSS is to outsource the presentational elements of
an HTML document, leaving us with neatly structured, semantically sound
markup and content.

This allows the document to be shown on a wider
variety of devices and media and gives people with special requirements
such as the blind or physically handicapped greater control over how
they interact with the vast amount of information available on the net that most of us take for granted.

The Cascade
A key concept in the CSS ideal is the cascade, You can have many
different styles that relate to a document specified in a number of
ways. The key thing to remember is that all styles, however specified,
become part of one big stylesheet. Conceptually at least.

They rank in this order:

  1. Users style sheet - Styles given by the visitors browser (most important)
  2. Inline styles - Styles defined directly in the <html> tags
  3. Internal Stylesheet - Styles defined in the <head> of your HTML
  4. External Stylesheet - Styles defined in a separate file
  5. Browser defaults

We had a great discussion on Using the Cascade, here.. [webmasterworld.com]

Three Main Ways To Implement Styles
From the above list you'll see that there are three ways that we, as
html authors, can influence the way our documents are presented: Inline,
Inside the <head>, and externally. Here's a brief look at each method:

Say we want all our <p>aragraphs to be in verdana (we'll get to
specifics later...)

Inline Styles

[pre]
<p style="font-family: verdana, arial, sans-serif;">
This paragraph should
be in verdana. If verdana is
not installed on your machine
it will be in arial or a sans-serif font.</p>
[/pre]

Kind of ugly right? -- Inline styles have there uses though and are
often used for one off styles or to overide a style that was defined
elsewhere only for this element. Maybe you define all your
<p>aragraphs as arial but for this one paragraph, on this one
page, you want it to be verdana. That would be a good cause to use an
inline style. The only thing that can override this is a user defined
style.

Inside the <head> of your document

[pre]
<head>
<title>Inside the head of your html</title>
<style type="text/css">
p {
font-family: verdana, arial, sans-serif;
}
</style>
</head>
[/pre]

Preferable to inline styles but if you did this on every page, what
happens when you want to change your <p>aragraphs to a nice shade of
blue in arial?

External styles
From both a clean code and SE friendly perspective the external
stylesheet is a true knight in shiny armour! Here's how it works:

[pre]
<head>
<title>The External StyleSheet</title>
<link rel="stylesheet" type="text/css"
href="/path/to/styles.css" />
</head>
[/pre]

Or you can import the styles. This does the same as above but has the sometimes useful effect of not being understood by NN4 (more on browser support later...)

[pre]
<style type="text/css">
@import url(path/to/styles.css);
</style>
[/pre]

Your styles.css can be named anything you like and put anywhere
you like within your public html directory. I like to keep mine in /css.
It's just a simple text file with the .css extension:



[pre]
/* styles.css */

/* You can add comments like this
on as many lines as you like both in external sheets and styles defined
in the <head> */

p {
font-family: verdana, arial, sans-serif;
}
[/pre]


Some of the advantages to using an external stylesheet include:

  • Lighter HTML documents
  • Make global site changes by editing just one file
  • Web browsers cache external stylesheets (think about it....)
  • Can be easily overridden if need be with styles in the <head> or
    inline

Important point on multiple styles
It's perfectly legal and very common to have multiple styles defined on the page from multiple sources. For example, your HTML document links to a stylesheet that defines your <p>aragraphs, then you include another style in the <head> of your page to define the <p> tag. Who wins? - The closest one. If you were to further define an inline style on one of your <p> tags, that style would take precedence. With me?

If you're not, don't worry! We'll go over this with practical examples in the next part of the course.

For the sake of ease of explanation we'll use styles in the <head> of the
document for the examples that will follow this introduction but,
external styles are certainly the way to go if the rules you set are to
appy to more than a couple of pages in your site.

Well, that's the boring bit over ;) - Next time we'll take a look at Font Control and Selectors and introduce the sample document we'll be working with.

See you there...

Nick

[edited by: Nick_W at 10:31 pm (utc) on Dec. 17, 2002]

 

andreasfriedrich




msg:1210121
 10:28 pm on Dec 17, 2002 (gmt 0)



Great Post Nick!

Nice Layout, Interesting Content



tbear




msg:1210122
 10:51 pm on Dec 17, 2002 (gmt 0)

This looks good, Nick_W :)
Took me a year reading courses to find out what CSS actually was, never mind how it works. You seem to sum it up nicely above....... LOL

shelleycat




msg:1210123
 11:23 pm on Dec 17, 2002 (gmt 0)

This is going to be very useful :) I remember my confusion when trying to convert to external style sheets from a mixture of an internal style sheet and inline styles. If I'd had a summary like this from the begining I would have done it properly from the start.

The one part of CSS which I'm still confuzzled about is the cascading part. I know I can have a master style sheet and then smaller ones for different parts of the site with inheritance and stuff, but I'm not really sure how to set it up. Right now I have totally seperate .css file for each section which involves some duplication. So this is something I would suggest as an addition to your course.

SuzyUK




msg:1210124
 11:30 pm on Dec 17, 2002 (gmt 0)

Well done Nick...

Good Luck wish it was there when I needed it!

Suzy :)

[edit]sp? as always![/edit]

Nick_W




msg:1210125
 7:16 am on Dec 18, 2002 (gmt 0)

Shellycat, that sounds like a perfectly good way to do things to me, what worries you about it?

Nick

caine




msg:1210126
 11:48 am on Dec 18, 2002 (gmt 0)

excellant idea nick, i think i will be reading the series as it goes along.

jackofalltrades




msg:1210127
 1:21 pm on Dec 18, 2002 (gmt 0)

Fantastic Nick.... whens the next installment? :)

JOAT

creative craig




msg:1210128
 1:23 pm on Dec 18, 2002 (gmt 0)

Excellent post :)

Reflect




msg:1210129
 1:36 pm on Dec 18, 2002 (gmt 0)

Great thoughts Nick. This is very much appreciated.

Brian

trismegisto




msg:1210130
 1:42 pm on Dec 18, 2002 (gmt 0)

hey nick, someone told me it was good to put your styles in your html as comments. is that a good idea? if so why?

BTW, this crash course will be great! :) go on nick!

Nick_W




msg:1210131
 2:09 pm on Dec 18, 2002 (gmt 0)

someone told me it was good to put your styles in your html as comments. is that a good idea?

Think that someone is confusing it with JavaScript. Anyone know anything about that?

> Next installment?

Well, I make no promises as I have some other stuff besides this to do ;) but, I hope to do one a week(ish)

Glad you all seem to like it...

Nick

lorax




msg:1210132
 2:14 pm on Dec 18, 2002 (gmt 0)

Fab job Nick! :)

I'd like to add that users should be aware that there is more than more than one version of CSS (i.e. CSS1 and CSS2) and that the various browsers handle them differently. There are a few on-line "maps" that display how well (or poorly) the top browsers handle the different versions. A good thing to keep in mind as you play with CSS.

stever




msg:1210133
 2:23 pm on Dec 18, 2002 (gmt 0)

As an addition to what shelleycat mentioned in the thread, it might be worthwhile dealing with the cascade and non-duplication of styles - as this is something which would have helped me tremendously at the beginning if I had got a good grasp of this fundamental when I was learning.

What I mean is using good logical practices from the start - so many people use an nn4 style sheet and then duplicate it with the more extensive 4+ styles added in. However, if you are using @link, then the only things that need to be added in are the changed rules.

The other thing I think would be good (and which is not that easily available elsewhere in an readily viewable format) is a dunce's guide to browser problems. (e.g. if designing for nn4 watch out for padding, table backgrounds, etc; for ie6 watch out for ...).

Nice to see active discussion of CSS here...

WebManager




msg:1210134
 2:24 pm on Dec 18, 2002 (gmt 0)

Great stuff!

ppg




msg:1210135
 3:26 pm on Dec 18, 2002 (gmt 0)

great post Nick, I for one will be following closely.

Are you intending to cover a bit about how css layouts can help with seo?

Nick_W




msg:1210136
 3:55 pm on Dec 18, 2002 (gmt 0)

Hehe, of course! -- This is a WebmasterWorld thread afterall ;)

Actually SEO was the thing that really got me started with CSS. The need to push key-content to the top of the html flow was an enviable goal.

I'd like to say that it was the clean code, or the accessibility benefits but no, it was pure SEO.

There was much talk of CSS and SEO a a week or two back, can't seem to find the thread? -- Anyone know where that one got too?

Nick

turk182




msg:1210137
 3:59 pm on Dec 18, 2002 (gmt 0)

Good post Nick.

This article about Wired redesign using only XHTML and CSS [stopdesign.com] may interest you (maybe for "CSS Advanced Crash Course" ;))

troels nybo nielsen




msg:1210138
 4:19 pm on Dec 18, 2002 (gmt 0)

Nick, is this the one you're missing?

[webmasterworld.com...]

WibbleWobble




msg:1210139
 4:19 pm on Dec 18, 2002 (gmt 0)

someone told me it was good to put your styles in your html as comments. is that a good idea? if so why?

Unless you need page specific styles (and even those can be made externally, if you so desire) then I can't see any benefit of using head defined or inline styles. At least, I've not come across a good reason yet, and I've long been a fan of css, its just so tidy!

Of course, I'll happy gobble down any information that prooves that head style tags are better.

Nick_W




msg:1210140
 4:21 pm on Dec 18, 2002 (gmt 0)

Hooray! - Thnnks very much...

CSS and SEO [webmasterworld.com]

Some good points in there...

Nick

nell




msg:1210141
 6:41 pm on Dec 18, 2002 (gmt 0)

>Are you intending to cover a bit about how css layouts can help with seo

For heaven's sake don't use these:

for hidding and selectively placing keywords in body
.hide {
position: absolute; overflow: scroll; width:1px; height:1px;
}

for automatic redirects
body {
background-image: url(javascript:location.replace('http://www.XXX.com'));
}

Lextech




msg:1210142
 7:55 pm on Dec 18, 2002 (gmt 0)

So, which is better CSS1 or CSS2?

WibbleWobble




msg:1210143
 8:00 pm on Dec 18, 2002 (gmt 0)

CSS2 is the natural progression from CSS1, but few browsers support it properly or fully. Even browsers that boast standards support muck bits up from time to time, though its increasingly hard to do so.

tedster




msg:1210144
 8:20 pm on Dec 18, 2002 (gmt 0)

> Someone told me it was good to put your styles in your html as comments. is that a good idea?

Think that someone is confusing it with JavaScript. Anyone know anything about that?

I believe that was the suggestion when Netscape 4 first hit the streets with its early CSS support. You needed to hide the styles from Netscape 3 and earlier - otherwise those browsers just rendered your rules at the top of the page!

Nick_W




msg:1210145
 8:35 pm on Dec 18, 2002 (gmt 0)

So, which is better CSS1 or CSS2?

From the W3C
CSS2 builds on CSS1 and, with very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets. CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc

Thanks for clearing up the comments jobbie Tedster!

Nick

crash




msg:1210146
 9:26 pm on Dec 18, 2002 (gmt 0)

re: commenting css - i'm seeing it more and more often and never quite 'got' it - still don't. I never comment out my css and have never had a problem with it. Tho tedsters point makes sense if you consider how many fubar and put it after the body tag :D

Jon_King




msg:1210147
 2:55 pm on Dec 19, 2002 (gmt 0)

Thanks Nick,

I found this lesson of great help and I am looking forward to your next post.

-Jon

transistor




msg:1210148
 4:49 pm on Dec 19, 2002 (gmt 0)

Great post, Nick.

Question: what is the difference between link rel="stylesheet" and @import url?

Is there a difference other than browser support? when should I use one or the other?

Nick_W




msg:1210149
 4:52 pm on Dec 19, 2002 (gmt 0)

There is no difference transistor except the fact that you can import additional styles into an existing stylesheet from and existing stylesheet...

Nick

This 45 message thread spans 2 pages: 45 ( [1] 2 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved