homepage Welcome to WebmasterWorld Guest from 54.234.2.88
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

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]

 

transistor




msg:1210150
 5:09 pm on Dec 19, 2002 (gmt 0)

Thanks!
Wow! this sound really interesting.
Let me see if I get this correctly, does this means that I can link a main style-sheet to a page, and have different other style-sheets imported in the main style-sheet?

andreasfriedrich




msg:1210151
 5:09 pm on Dec 19, 2002 (gmt 0)

One is HTML while the other is CSS syntax. Each is governed by its respective spec.

Andreas

jaybee




msg:1210152
 6:21 pm on Dec 19, 2002 (gmt 0)

Nick_W

Season greetings and all that feel good spirit thing.

Jolly good show.

I've been into CSS two years now, and ALL I have learnt came from research beginning with Dave Raggett's intro to CSS, and one other person whom I contacted earlier at that time.

I remember it had something to do with this <\/>. At the time I thought it was a V but how wrong was I. Forward slash \ followed by a backward slash / because of CSS' schema.

After that I was on my way. All I did from thereon was to test, test and test every thing again. Eventually it sank in and everything came naturally.

As of the moment I am trying to move away from tables, but because of the different page lengths, I'm having to make changes to adjust for footers. It is a challenge to try and make a template where I could just insert it at the bottom of each and every page page and have it displayed exactly in the browser as I want it.

I don't intend to superceed the step by step class, but if you can send me a sticky on the layout I'd be very gratefull. Did some research on BOX but still nothing concerning my intended layout.

By the way, from what I read It appears a page designed by CSS 3 schema, may not render properly by all current browsers. I'm praying this will not render my layout ineffective. In the meantime I have only one page online just to be sure until I have tested and have seen the end result across all available spectrum, before I upload the others I'm working on at the moment.

I have flagged this subject and will be following the course because I know I still have much to learn. I hope others will follow the course as you proceed. This is a very valuable hands on step by step instruction and I'm sure everyone will appreciate the home work you did and kind enough to share it with all of us.
Jaybee

madcat




msg:1210153
 5:59 pm on Dec 20, 2002 (gmt 0)

does this mean that I can link a main style-sheet to a page, and have different other style-sheets imported in the main style-sheet?

Yes, but check out this thread:

[webmasterworld.com...]

dingman




msg:1210154
 9:28 pm on Dec 20, 2002 (gmt 0)

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

Actually, I think the lack of difference between the two is a function of a currently universal bug in CSS support than correct behavior. I haven't found it in the official specs yet, but I trust my O'Reilly book when it tells me that although multiple <link>ed stylesheets will be cascaded by any currently available browser, the correct behavior would be to offer the user a choice amongst the available <link>ed sheets, ignore the others, and continue the cascade from there. For that reason, on pages where I'm after the cascade, I may <link> the first sheet in the cascade, but anything I want to follow that is @imported.

WibbleWobble




msg:1210155
 1:51 pm on Dec 21, 2002 (gmt 0)

O'Reilly is correct as usual. Using <link> to send multiple external sheets to the browser should - in a w3c standards browser - give the user the option to choose, through a popup, or a menu dropdown.
I'm not entirely sure, but I think Mozilla supports this, though I've not come across it.
@import is for forcing the browser to display things a certain way, whether it be for different medias, or incompatible browsers.

ctsolutions




msg:1210156
 10:07 pm on Dec 22, 2002 (gmt 0)

The other difference between @import and link for style sheets is that @import is not recognized by older browsers (including nn4x) so you can link a style sheet created for older browsers, then use @import to include a style sheet which contains styles supported only by the newer browsers. In newer browsers, the styles in the @imported sheet will supercede those in the linked sheet because they come after the linked sheet in the code, while older browsers will just ignore the @import.

It allows you to have a special style sheet just for the older, css-challenged browsers, without requiring a separate page or any js.

I don't know whether it validates, but it works.

dingman




msg:1210157
 10:24 pm on Dec 22, 2002 (gmt 0)

I don't know whether it validates, but it works.

As long as you use valid CSS, it does :) You're just using a facet of CSS that while part of the standard is not universally supported. Nothing invalid about that.

papercut




msg:1210158
 8:26 am on Dec 31, 2002 (gmt 0)

just found the course. although i am not totally a novice, i can use the input. following along...

Xoc




msg:1210159
 2:59 pm on Feb 13, 2003 (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?


You only need this for top-of-the-page style sheets. Tedster is correct--the idea is that very old browsers don't understand the <style> tag at all. Because of that, they just render everything between <style> and </style>. It is not necessary in external style sheets, and causes errors in inline styles.

Also, it is possible that if you try to validate a top-of-the-page style sheet in a xhtml document, that something inside the style sheet might not validate unless it's enclosed in comments. The contents of the <style> tags are not html. I can't think of an example off the top of my head that won't validate, but there could be something.

It should be used like this:

<html>
<head>
<style>
<!--
body {color: black}
-->
</style>
</head>
<body>
...
</body>
</html>

For backwards compatibility reasons, browsers are supposed to treat the content of comments inside <style> and <script> tags as things they should parse. It's a terrible kludge, but necessary to keep older browsers rendering pages okay.

cdplayer




msg:1210160
 11:24 pm on Feb 17, 2003 (gmt 0)

This is the first time I found the nerve to get close to CSS. The first part of your course was calming. Before I read part one of your course, when I look at some of the style sheets out there it was enough for me to start running and never look back. Now I can look at them just my knees knock.....

Part one is great!

Thanks!

andreasfriedrich




msg:1210161
 11:30 pm on Feb 17, 2003 (gmt 0)

Welcome to WebmasterWorld [webmasterworld.com] cdplayer.

Be sure to read Marcia`s WebmasterWorld Welcome and Guide to the Basics [webmasterworld.com] post.

Did you see the CSS Crash Course - Index - Menu for the WebmasterWorld CSS crash course [webmasterworld.com]?

There are two more parts to read :)

Andreas

cdplayer




msg:1210162
 11:56 pm on Feb 17, 2003 (gmt 0)

Thanks andreasfriedrich!

Yes I saw and will read part two and three of the CSS Crash Course. Thank you for the other link. I didn't know about that one. The more the better!

Quark




msg:1210163
 1:54 pm on Mar 23, 2003 (gmt 0)

Thanks for taking the time to post this. Very informative and easy to read. I'll look forward to catching up with further postings of this course.

Nick_W




msg:1210164
 2:37 pm on Mar 23, 2003 (gmt 0)

Welcome to WebmasterWorld! [webmasterworld.com]

You're most welcome, if you missed it, the index is here: [webmasterworld.com...]

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