Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Crib Sheet, cheatsheets, shortcut lists, syntax lists, & others

Please share with a CSS neophyte any type of help lists you employ



4:33 pm on Sep 8, 2004 (gmt 0)

WebmasterWorld Administrator webwork is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

As part of my reading and attempting to learn and master CSS I've be taking notes. The aren't quite organized yet, but soon I hope to fashion them into what might be called a quick reference guide. (I am aware of the WebmasterWorld CSS crash courses, but they're aren't quite a 1 page 'ready reference' that I like.)

I'm guessing that others, more experienced than I, may have handy Notepad CSS 'helper lists' of CSS tips, desing rules, bug lists with fixes, and design tricks saved in a Notepad file on their PC desktop, printed out and taped to a nearby wall or screen, etc. If you do would you be so kind as to post your helper lists here, such as your abbreviated version of, say "how floats are coded" or "favorite CSS properties shorthand" etc.

Below is my running notes list from my weekend reading about CSS. If there's any errors in my helper list please feel free to point them out, but also put up a list of your own.

Here's my notes:

CSS SYNTAX basic rule format: Selector {property: value} or Selector {Declaration}

Do NOT leave spaces between a property's value and the units of the value! Example: If you use "margin-left: 20 px" instead of "margin-left: 20px" it will not work in Mozilla or Netscape.

Grouping selectors: Applies style to all grouped HTML elements, separate each selector with a comma.
color: green

If multiple properties in declaration separate each property (rule) with semi-colon ";"
p {text-align:center; color:red; }

If Value = multiple words enclose "value in quotes"
p {font-family: "sans serif"}

Font family values are one of few that should be separated by commas (not just spaces). This indicates that they are ALTERNATIVES.

Colors when applying colors the hex value is ALWAYS preceded by the symbol "#". With hex values for color you can always reduce the duplicate numbers/letters from #OOOOFF to #OOF

Readable rules: Describe each property on a separate line.
text-align: center;
color: black;
font-family: arial

Visual layout CSS design trick: Add a border to boxes while working out design!
Example: div{border:1px solid #f00;}
This allows you to see where everything is, what type of padding, margins, etc. you are working with, etc. Adding the borders really helps to get a visual on a layout.

Class selector: Allows different styles to be applied to the same HTML element. (Since HTML 4.0 every HTML tag has had the class attribute, specifically introduced to aid in the selection of elements for styling with CSS
p.right {text-align: right} Creates class of paragraph aligned right
p.center {text-align: center} Creates class of paragraph aligned left.

In your html document you employ this:
<p class="right"> This paragraph will be right-aligned.</p>
<p class="center"> This paragraph will be center-aligned.</p>

To create a class rule applicable to all elements omit the HTML tag name when creating the selector.
.center {text-align: center}
Now, all HTML elements with class="center" will be center-aligned:
In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:
<h1 class="center">
This heading will be center-aligned
<p class="center">
This paragraph will also be center-aligned.
Another use: Could use .gray .yellow classes to color alternating rows of a table.

ID selector. A class selector may apply to SEVERAL elements on a page. An id selector always applies to only ONE element in a document so an ID attribute must be unique within the document. The id attribute, like the class attribute, was made universally application to all HTML elements in HTML 4.0

Use: If you have an <h1> on every page that you want to be 20px in red
h1 {
color: CC0000;
font-size: 20px;
Now, if you want the <h1> on your homepage to be in blue:
h1 {
color: CC0000;
font-size: 20px;
h1#homepage {
color: 0000FF;
Then, in your HTML you incorporate
<h1 id="homepage">GiftDirectory.com</h1>

Div tags Div tags are simply a generic means by which to group elements or sections of a document. They have NO formatting AT ALL, allowing you to style them as you wish. They are BLOCK level elements

SYNTAX for Linking to Stylesheets

External stylesheet named mystyle.css then use this in the <head>:
<link rel="stylesheet" type="text/css" href="path/to/mystyle.css" />

Importing stylesheets?
<style type="text/css">
@import url (path/to/mystyle.css);

In line stylesheet?
<p style="font-family: verdana, arial, sans-serif;">Paragraph in verdana.</p>

Inside the <head> of the html document (USEFUL to employ FOR TESTING of template page by incorporating within the <head> during testing and them moving CSS to external stylesheet.)

<style type="text/css">
p {
font-family: verdana, arial, sans-serif;

Stylesheet file: Intuitive name ending in dot css; NO HTML tags in your dot css file.

Comments in HTML: HTML comments use <!-- and -->

Comments in Stylesheets: Comments use /* This is a style sheet comment */


9:30 am on Sep 10, 2004 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Part 3

8. Media Types

Media Types [w3schools.com] are methods of providing CSS to the differing types of well, media! The w3 schools link shows the different media types and also that there is an @import method which can be used all within a single stylesheet, however this is not yet widely supported.
@media screen
p {font-size: 14px;}
h1 {more rules..;}

@media print
p {font-size: 12pt;}
h1 {more rules..;}

You can also use the @import method with a specified media following it, but again it's not yet fully supported well..
@import "mystyle.css" screen;
@import "myprintstyles.css" print;

so using seperate stylesheets and declaring the media type in the <link rel..> or <style type...> statement is probably still the safest.
<link rel="stylesheet" type="text/css" href="myprintstyles.css" media="print">
<style type="text/css" media="screen">
@import "mystyles.css";

not ideal, but better than nothing?

There are many types of media and applying a computer screen design to all of them may be less than practical at this stage. Would it be better if a PDA (small screen rendering device) got plain unstyled text instead of trying to force an 800px horizontal width on it?

9. Be aware, be very aware...!

The CSS Box Model [w3.org] is still the biggest cause of cross browser width problems. OK, So IE in "standards compliant" mode now matches the specs and other browsers, but designing to that will not make your pages look the same in IE5 and 5.5.

If you apply padding and/or borders to a fixed width/height element it will cause that element to be differing widths/heights x-browser. The solution is to avoid by nesting elements (e.g. applying the width to the parent and the padding/border to the child) or to use an IE Hack/Filter to provide it with a different width. more on IE Hacks Later

For this reason it's better not to use the border on all elements trick for visualising your elements, use background colors on these elements instead. otherwise IE will re layout the whole page for you ;)

Default Margins and how they can and do collapse!
A Lot of Elements have default margins on them. e.g. <p>, h1>, <ul>, <form> etc..
There are recommended defaults [w3.org] but these are not adhered to by the different browsers. So perhaps the safest way to make sure they are consistent is to zero them all and set your own.

* {
margin: 0;
padding: 0;
border: 0;

the above code snippet at the start of your stylesheet should bring any default surprises back into your control, this will also take care of the <html> and <body> elements providing you with a consistent "canvas" to start work on.

Collapsing margins [w3.org]
Vertical Margins collapse for a very good reason. e.g. you have your paragraphs set to have a top and bottom margin of 20px.. if the margins did not collapse you would land up with a 40px gap between 2 x adjacent paragraphs. Collapsing means the two adjacent margins combine to form a margin = to the greater of the two settings , in this case they were the same so they combine to form a 20px margin.

but again different browsers have interpreted the specs in different ways. This time they all seem to get it right the main difference being which element they actually render the collapsed margin on.

IE as usual has a strange quirk. It can't handle collapsing margins on default margins, especially in float related situations, but again explicitly setting margins seems to help it so that backs up the "zero the defaults and set your own" theory.

Some browsers choose to render the margin on the root element in the collapsing scenario and this tends to produce non-required whitespace (gaps)

.red {background: red; height: 20px; border: 1px solid #fff;}
.container {background: #ff0;
border-width: 0 1px;
border-style: solid;
border-color: #000;
h1 {margin: 20px 0;}

<div class="red">..</div>
<div class="container">
<h1>header text</h1>
<div class="red">..</div>

the <h1> has it's margins, but they are collapsing with the margins on the container div, yes they're zero, but after the combination with the <h1> margins they are taking the 20px; so it's the container which now has the margins and you're getting whitespace between the header and the top and bottom red divs. This may not be desirable in a design situation especially when try to get vertical borders to meet up with the top/bottom of the page. The solution is to seperate any margins that you don't want to collapse, in this case the container div. You seperate margins from touching (being adjacent to) each other by adding a border or padding, so simply adding a 1px top/bottom border or

padding: 1px;
to the .container's CSS will help. Obviously if this a "pixel perfect" scenario this will adjust the height of the div but no design should be pixel perfect anyway should it ;)

Again because the use of borders in this scenario is a "cure" for whitespace, if you visualise test pages using the "border on all trick" you may not being seeing these gaps until you remove the borders.. so again.. background colors are best to test!

10. Quirks Mode v Standards Compliant Mode

V6 Browsers introduced a "switch" to allows us to switch into "standards compliant mode". In (very!) short if the V6+ browsers see a valid DTD at the start of the page, it will render in strict mode. The HTML Forum explains more here [webmasterworld.com], and there is a link to valid doctypes at the start of this series of articles.

Also Opera has a useful explanation [opera.com] of the 'switch' which includes other browsers and what it supports and doesn't. It tends to emulate IE quiet closely!

IE6 (and Opera) is the one where you'll notice it most as the difference between their quirks and strict is the biggest. M$ used it to bring their box model into line with the recs and other browsers. While some argue that their original Box Model was more intuitive than the recommended one, nonetheless at least we now have consistency so we know what we're working with.

I find that in the matter of testing for Box Model Differences throwing the page into Quirks Mode is the easiest method to test if there are any. Without having to have remove/replace a strict DTD, IE6 will go into quirks mode if the <xml prologue> precedes the DTD. In fact any comment preceding the DTD will do it I use <!-- q --> when wanting a very quick look it saves me remembering the <?xml version="1.0" encoding="iso-8859-1"?> every time.

It should be noted that this does not make IE6 exactly into IE5.x but in the absense of installing multi versions of IE [webmasterworld.com] it may be a quick method for you (in testing only) to see what's going on. We can't and probably won't have the luxury of ignoring IE5.x for a while yet!

If you want to continue to use IE in quirks you will only need to provide one set of "fudged" values to IE, but if you use IE Strict you may need to send 2 values, this means at some stage you may need filters to provided differing widths to IE5.x/IE6(quirks) and IE6(strict)

IE6 strict has other things that the strict mode brings into line.. they are fully described on Microsoft's Pages [msdn.microsoft.com] some of the more often used at the minute include:

  • Box Model
  • margin keyword : auto; ~ used for centering.
  • recognizing that <html> is the root element, not the <body>

    choosing which method to write your pages in depends on if you know (want to know) what differences will require to be changed. Again this underlines the need to design in a standards compliant browser first and then hack/fudge for IE. It's easier because the methods exist to bring it into line ;)

    ... more to follow....

    edit reason: added Opera's Link

    [edited by: SuzyUK at 9:29 am (utc) on Sep. 17, 2004]

  • dcrombie

    11:06 am on Sep 10, 2004 (gmt 0)

    This will work in Safari and some or all Mozilla/Gecko browsers:

    /* normal links are blue - standard CSS */

    A:link, A:visited { 
    color: blue;

    /* links with a target value are green - useful if you use target="_blank" for external links */

    A[target] { 
    color: green;

    /* links with an href value of '#' are grey - useful for internal links when building a site */

    A[href="#"] { 
    color: #333;

    These can be used in combination with the normal CSS1/2 selectors:

    /* hide external links if they're already been there - the reverse can also be interesting */

    A[target]:visited { 
    display: none;



    11:19 am on Sep 10, 2004 (gmt 0)

    10+ Year Member

    Link style sheets in like this:

    <script src="/js/function.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/css/lo.css" type="text/css" />
    <style type="text/css">
    @import "/css/hi.css";
    <!--[if IE]>
    <style type="text/css">
    @import "/css/ie.css";

    If you link in your CSS after your JavaScript (or any other script) you can avoid a 'flash of unstyled content'.

    lo.css will be applied to all browsers, including pre-version 5 ones like Netscape 4 and Internet Explorer 4.

    hi.css will be applied to version 5 and later browsers only.

    ie.css will be applied to PC flavours of IE5, 5.5 and 6 only.

    The only browser that this system won't pick up correctly is IE4.5 on the Mac, which will read the hi.css styles. This browser is as good as extinct though.

    Having multiple stylesheets like this becomes more important when you're working with floats layouts, where a lot of stuff just will not work in pre-version 5 browsers. lo.css allows you to produce a minimally styled 'text only' version of your site for backwards compatibility. These style declarations can be overwritten in hi.css for current browsers.

    The conditional comment around ie.css can be changed to <!--[if IE 5]> or <!--[if IE 6]> if needed, but will allow you to apply styles just to specific IE versions with having to resort to hacks.

    [edited by: SuzyUK at 10:11 am (utc) on Sep. 13, 2004]


    11:21 am on Sep 10, 2004 (gmt 0)

    WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    >>reverse can be interesting huh! - sure can ;)

    I've not covered the advanced selectors that you just described. I'm kinda sticking to supported stuff, so thanks for that!



    11:22 am on Sep 10, 2004 (gmt 0)

    WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    Tips 'n' Tricks

    Part 1

    1. Link Specific Rules ~ states and anchors

    Always specify link :pseudo classes [w3.org] in the order LVH(F)A in your CSS file in order to avoid conflicts.
    Link, Visited, Hover, Focus, Active.

    A popular mnemonic to help remember this is LoVe/HAte, with the recommendation that if you're using :focus it goes before :active

    a:link {}
    a:visited {}
    a:hover {}
    a:focus {}
    a:active {}

    sometimes you will see, and it is OK to use (but see next section) something like this

    a {color: red; background: #fff; text-decoration: underline;}
    a:hover {color: #000; text-decoration: none;}

    the first rule sets the general rules for all <a>nchor states the second one is specifying that a change will be made on hover, it's specificity at work again.

    You will note from the link provided above that the pseudo classes are selectors all we are doing in that shorter method is using the a:hover as a more specific selector than a.

    Using anchors/bookmarks
    If you use these in the form of

    <a name="bookmark">This is my anchor text</a>

    then be aware that that shorter rule above will affect it because it's targetting all <a>nchors's in the document not just a:links.

    (Although you can place <a name> anchors without text in them so the colors/effects wouldn't be noticeable anyway.)

    So if you do use <a name> anchors then you will need to use a more specific method (like the first one) in order to seperate the a:links from the <a>nchors or

    :link {rules}
    :link:hover {rules}
    :link:active {rules}

    would do it too... using the :link selector then making it more specific!

    Named anchors are disappearing...

    "name" is actually now deprecated and although it still works it's recommended that you use ID instead, and with that you might not need to create anchors you could just the pre-existing ID's within your document structure to anchor to instead.

    Instead of creating <a name="top">Top of page</a> somewhere near the top of your page, you may already have an element <body>, <header div> at the top of your page that has a id on it?
    e.g. <div id="header">....

    So at the bottom of the page you want to provide a link back to the top you just use a bookmark link as normal but use the ID instead of name.
    <a href="#header">back to top</a>

    This is why an ID should only be used once per page to IDentify a division/section of the page.. used properly you can then bookmark any part of a page that has an ID.

    Special Note: do not use just
    :link {rules}
    :hover {rules}
    etc.. to select your link effects, while it will work fine (selector will do it's job), the newer compliant browsers that support

    on all elements (Not IE) will apply the hover effect to all elements on the page!
    I've seen pages where entire divs change color when hovered over.. sometimes it's deliberate (aesthetic effect) but sometimes it's just that the <div> is taking on properties that were intended for :links only.

    2. Shorthand Properties

    Shorthand properties are useful for cutting down on excess code, but be aware that if you use a shorthand property later in the cascade than a long-hand one the shorthand one will overrule it.
    p {
    margin-top: 20px;
    color: red;
    background: #fff;

    .center {
    width: 50%;
    margin: 0 auto;

    <p class="center">the centered text</p>

    From the first rule you expect all your <p>'s to have a top margin of 20px, however you later decide you want to center a paragraph for some reason. so you apply a class of center to it with the second rule. But wait your top margin's gone! the shorthand method of using margin to center something has set the top and bottoms margins on that class to zero.

    This is a simple example, but when you get into background properties it can happen often. It might be best if you don't use shorthand on specific classes unless you want to override general defaults set earlier in the cascade.

    .center {
    width: 50%;
    margin-left: auto;
    margin-right: auto;

    would've worked in this case because it wasn't over writing the margin-top, it's giving additional margins instead.

    to be continued..


    1:09 pm on Sep 10, 2004 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member

    Okay, this thread needs to be added to the library!

    After that, we can all turn out the lights and go home; there won't be anything left to cover in the forum. :)


    1:30 pm on Sep 10, 2004 (gmt 0)

    WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    lol photon..
    I bet you're all thinking at least then she might shut up ;)

    jetboy.. that's a good one I'll add it in to the bugs/tips section when I get there..



    1:31 pm on Sep 10, 2004 (gmt 0)

    WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    Part 2

    2. Shorthand Properties continued..

    Margin, Padding & Border

    margin is a shorthand property for:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

    padding is a shorthand property for:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

    Their shorthand property is in a specific order.
    Top ~ Right ~ Bottom ~ Left
    I remember it by thing clockwise 12 - 3 - 6 - 9, though a mnemonic that can be used TRouBLe!

    Examples with margin, but padding is the same

    {margin: 10px 20px 5px 15px;}
    top = 10px right = 20px bottom = 5px left = 15px

    further shortening can be done:

    {margin: 10px 20px 15px;}
    top = 10px right and left = 20px bottom = 15px

    {margin: 10px 20px;}
    top and bottom = 10px right and left = 20px;

    {margin: 10px;}
    all = 10px

    although this order applies to Margin Padding and Border ~ Border has more to it than that...

    Border is a shorthand property for the following three (also shorthand) properties:

  • border-width
  • border-style
  • border-color

    it's shorthand appears like this:

    {border: <width> <style> <color>}

    e.g. {border: 1px solid #000;}

    It will apply the same width, style and color to all four borders. Note: these can be applied in any order.

    The full longhand version of that code would require 12 lines

  • border-top-width: 1px;
  • border-top-style: solid;
  • border-top-color: #000;
  • border-right-width: 1px;
  • border-right-style: solid;
  • border-right-color: #000;
  • border-bottom-width: 1px;
  • border-bottom-style: solid;
  • border-bottom-color: #000;
  • border-left-width: 1px;
  • border-left-style: solid;
  • border-left-color: #000;

    But because each of the individual sides also have their own shorthand property, which still uses the same shorthand syntax as "border" above: e.g.

    {border-top: <width> <style> <color>}
    you could shorten it in the first instance to this:

  • border-top: 1px solid #000;
  • border-right: 1px solid #000;
  • border-bottom: 1px solid #000;
  • border-left: 1px solid #000;

    So you could change any one of the borders using this method . it's four lines of code and each border is under control..

    but wait.. there's a three line version which will do the same job. Remember the three border shorthand properties mentioned above..

  • border-width
  • border-style
  • border-color

    well these use the same shorthand syntax/specific order that Margin/Padding uses.


  • border-width: 1px 1px 1px 1px;
  • border-style: solid solid solid solid;
  • border-color: #000 #000 #000 #000;

    with each of the four values corresponding to the T-R-B-L order:

    so that could then be shortened to:

  • border-width: 1px;
  • border-style: solid;
  • border-color: #000;

    I prefer this format as you can change any one border or part of it without adding subtracting any lines and avoid possible cascade conflicts as it's under full control in one rule without being too longhanded.

    e.g. if you decide not to have a top border you would simply change it to:

  • border-width: 0 1px 1px; /* top right/left bottom */
  • border-style: solid;
  • border-color: #000;

    and the second two rules have not changed in this case because the 0 width causes the border not to render.

    ... more to follow ....

    [added]the note that the border shorthand properties can be specified in any order[/added]

    [edited by: SuzyUK at 11:03 am (utc) on Sep. 12, 2004]

  • ronin

    2:16 pm on Sep 10, 2004 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member

    Stylesheets containing cascading style rules, may themselves be cascaded.

    Some large-scale sites are such that some styles are global, some styles are specific to pages in Section A only and some styles are specific to pages in Section A (subsection 3).

    Writing all the style rules in a single CSS document makes the document burdensome - especially if you are accounting for Section A (subsection 1) all the way to Section Z (subsection 10). This slows initial loading times when a visitor first accesses a site.

    Alternatively, writing a separate stylesheet for each subsection defeats the object of using external stylesheets in the first place. This negates the advantage of stylesheets being cached in the browser, since the style rules have to be re-parsed on every new page.

    In fact, /sectiona/subsection3.html only needs to refer to a single css document:

    @import url(/css/a3.css);

    Then, the first line of a3.css can be the reference:

    @import url(a.css);

    and the first line of a.css can be the reference:

    @import url(global.css);

    The result will be that all the global.css rules will apply first, followed by all the a.css rules and finally the a3.css rules.

    A visitor who has already been to other parts of the large-scale site will already have global.css cached in the browser and will only need to parse a.css and a1.css. A visitor who has already navigated between Section A subsections 1 and 2 will have a.css already cached and will only need to parse a3.css.

    I use this technique on my site where all the positioning, margin, padding, spacing and general style rules are in the global farm.css stylesheet and all the colour information for each section is contained in the respective pigs.css, chickens.css, ducks.css and sheep.css stylesheets.


    2:37 pm on Sep 10, 2004 (gmt 0)

    Nice one ronin. I'm about to make that leap on some of our sites but wasn't sure of the exact syntax. The plan is to have some server-wide formatting options (pretty tables, lists, forms, ...) in a 'global' CSS file included from each site-specific one.

    I think this is what put the 'Cascading' into CSS - rather than the fact that subsequent, or more specific, selectors can override previous ones as someone mentioned earlier.



    5:11 pm on Sep 10, 2004 (gmt 0)

    WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

    I just noticed on reading this thread off line ( saved page ) that there is something that breaks the format ( gives me a horizontal scrollbar ) in the first 25 posts ...

    My knowlege of CSS being minimal ..I have no idea which one of you did it ..nor with what particular piece of code? ...

    not a complaint ..just curious ....what did this?

    is it fixed? if so mods please delete this post ..

    but I am still curious how it happened ..Posts from #26 onward ( inclusive ) dont do this ..

    I am on Firefox 0.93 at 10024x768 ...doze 98II


    9:36 pm on Sep 12, 2004 (gmt 0)

    WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    Tips 'n'Tricks: Part 3

    2. Shorthand Properties continued..

    Font Shorthand

    font [w3.org] is a shorthand property for:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

    font {<font-style> <font-variant> <font-weight> <font-size / line-height> <font-family>;}

    the individual properties are not seperated by commas (internal choices of font-families still need to be though), all parts are optional but if they are not declared they are still understood to be there and will take on the individual defaults instead.

    the 3 choices as seperated by can be put in any order and if not explicitly set they will revert to their default of normal

    p {
    font: italic small-caps bold 12px/3.5 georgia, serif;

    is the equivalent of:
    p {
    font-style: italic;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 12px;
    line-height: 3.5;
    font-family: georgia, serif;

    Example 2:
    p {
    font: bold 12px georgia, serif;

    is the equivalent of:
    p {
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: normal;
    font-family: georgia, serif;

    Note: setting a font using a shorthand property later in the cascade will override more explicit settings from earlier on. e.g. the second example if used after the first will reset values (back to default) from the first even though they're not declared.

    If you only require to override one part of a setting the has been set using shorthand earlier in the cascade you should use the long hand

    property as this will only affect that particular property.

    p {
    font: italic small-caps bold 12px/3.5 georgia, serif;
    p.normal {font-weight: normal;}

    <p class="normal">this is now normal weight text</p>

    The p with the class of normal will still be take on the properties specified in the first rule and the second rule just targets the font-weight.

    values are calculated from the font-size that is set on the element so 3.5 in the first example is 12px x 3.5 = 42px.
    can also be set in percentage values so 3.5 would be = to 350%.


    Always offer a choice of font family names and make sure the last one is a generic family name. Commas indicate that each name is a choice within a list, browsers will go through the list, and choose the first one it has available. The generic one will suggest an alternative to a browser should it not have any of your previously named choices installed.


    p {font-family: verdana, helvetica, arial, sans-serif;}

    Note: Quotes around

    names should not be used except if
    value = multiple words that are not hyphenated

    p {font-family: "Times New Roman", serif}
    p {font-family: verdana, sans-serif}

    generic family names will suggest an alternative to a UA that does not have any of your pre-defined choices available:

  • serif (e.g. times new roman, georgia)
  • sans-serif (e.g. verdana, arial)
  • cursive (e.g. zaph-chancery, caflisch script)
  • fantasy (e.g. critter, cottonwood)
  • monospace (e.g. courier, MS Courier new)

    ... more to follow ....

  • vkaryl

    9:49 pm on Sep 12, 2004 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member

    Hey Suzy -

    You can just publish the book when you're done here....

    GREAT stuff!


    9:58 am on Sep 13, 2004 (gmt 0)

    ALWAYS define your default font/s in the BODY selector - they will then apply to everything on the page. You can override them for individual elements like headings if they need a different font.


    BODY { 
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;

    H1, H2, H3 { 
    font-family: "Times New Roman", serif;
    color: #000;


    11:03 am on Sep 13, 2004 (gmt 0)

    WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    Tips 'n'Tricks: Part 4

    2. Shorthand Properties continued..

    Background Shorthand

    background [w3.org] is a shorthand property for:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

    background {<background-color> <background-image> <background-repeat> <background-attachment> <background-position>;}

    the individual properties are not seperated by commas, all parts are optional and can be used in any order but if one or more of the choices are not declared they are still understood to be there and each "unset" property will be assumed to have been set (implicitly set) to the individual default instead.

    p {
    background: #fff url(mybgimage.gif) no-repeat fixed 0% 50%;

    is the equivalent of:
    p {
    background-color: #fff;
    background-image: url(mybgimage.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0% 50%;

    Example 2:
    p {
    background: url{mybgimage.gif);

    is the equivalent of:
    p {
    background-color: transparent;
    background-image: url(mybgimage.gif);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;

    Note: setting a

    using a shorthand property later in the cascade will override more explicit settings from earlier on. e.g. the second example if used after the first will reset values (back to default) from the first even though they're not declared.

    If you only require to override one part of a setting the has been set using shorthand earlier in the cascade you should use the long hand backgrund property as this will only affect that particular property.

    p {
    background: #fff url(mybgimage.gif) no-repeat fixed 0% 50%;

    p.repeat {background-repeat: repeat;}

    <p class="repeat">this now has a repeating background image</p>

    The p with the class of repeat will still be take on the properties specified in the first rule and the second rule just targets the background-repeat property.

    Note: Quotes around

    names should not be used, they are not required and older browsers will choke (especially on single quotes)

    Note: the path to a

    should be relative to your stylesheet, watch this while testing with an embedded stylesheet then transferring the CSS to an external file within it's own folder. Relative paths within the stylesheet may need to adjusted or it may be better to use absolute paths depending on your site structure.


    normally this needs 2 x values set and these can be percentages, lengths or keywords. The default when no values are set is 0% 0% which equates to top left of the element.

    background-position: 50% 50%;
    background-position: 14px 54px;
    background-position: top center;

    the percentage and length values are applied in the order:
    horizontal(x) ~ from the left,
    vertical(y) ~ from the top

    the keywords ~ the two values have three choices:
    <top center bottom> <left center right>
    ~ can be applied in any order. e. g.
    top left = left top

    if one value only is given:
    percentages and lengths will take it that the horizontal (from the left) position has been set and the vertical (from the top) will default to 50% (note: not the 0% original default!)

    if either top, right, bottom, left, center is set the other will default to center (again not the 0% original).

    You can use combinations of keyword, length and percentage values
    Examples: {50% 20px} or {center 20px} or {center 10%}.

    Note: when using combinations of keyword and non-keyword values, 'left' and 'right' can only be used as the first value, and 'top' and 'bottom' can only be used as the second value, keeping the {x, y} order in place as required by the length / percentage values.

    ... more to follow ....

  • SuzyUK

    10:08 pm on Sep 13, 2004 (gmt 0)

    WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    Tips 'n'Tricks: Part 5

    2. Shorthand Properties continued..

    list-style Shorthand

    list-style [w3.org] is a shorthand property for:

  • list-style-type
  • list-style-position
  • list-style-image

    list-style {<list-style-type> <list-style-position> <list-style-image>;}

    the individual properties are not seperated by commas, can be used in any order and all parts are optional ~ but if an individual property is not declared they are still understood to be there and an element will take on their individual defaults instead.

    ul {
    list-style {square inside none;}

    is the equivalent of:
    ul {
    list-style-type: square;
    list-style-position: inside;
    list-style-image: none;

    Example 2:
    ul {
    list-style: square;

    is the equivalent of:
    ul {
    list-style-type: square;
    list-style-position: outside;
    list-style-image: none;

    Note: setting a

    using a shorthand property later in the cascade will override more explicit settings from earlier on. e.g. the second example if used after the first will reset values (back to default) from the first even though they're not declared.

    If you only require to override one part of a setting the has been set using shorthand earlier in the cascade you should use a longhand list-style property as this will only affect that particular property.

    ul {
    list-style-type: disc;

    ul {
    list-style: none;

    will set both <list-style-type> and <list-style-image> to none

    Note: <li> items will inherit

    values from their <ol> and <ul> parent elements and setting the list style on a <ul> or an <ol> is the recommended way to control the overall lists, then descendant selectors (specificity) will enable you to target individual <li> elements if required.
    ol ol li {list-style: disc;}
    ul li {list-style: square;}

    ... more to follow ....

  • HannahG

    8:10 pm on Sep 14, 2004 (gmt 0)

    10+ Year Member

    Wow, what a great thread! I've learned more about CSS in a single morning than I have all year! SuzyUK, you are a goddess!

    Although I am by no means amoung the CSS elite or even the somewhat knowledgeable newbie, hopefully these things that I've picked up along the way might be of some use.

    Centered "column"
    After finding a fixed width centered column CSS model out there on the 'net, I found that I really wanted to be able to have the column be all white to the bottom of the screen, but the remainder of the screen to the side to be grey. Although I found workarounds using height and a bunch of other higgery jiggery, it wasn't without bugs.

    Finally I hit upon the idea of using a centered 1-pixel high background graphic the same colour as I wanted my column to be, and the same width as the column layer - all that was left was to tell it to only repeat on the y-axis and give it a background color of grey. Voila! One contrasting color "column" that extends to the bottom of the screen no matter how many times you resize your browser or increase the text size.

    It works like a charm in all the current browsers I've tested and is dead simple. Can be adapted for (shudder) table layouts, too!

    body {
    color: #000000;
    background: url(mybackground.gif) repeat-y center #333333;

    Make print-friendly CSS
    My little pet-peeve is when I print off a website and find that the text is cut off, there's things like ads that I don't want, or the text is illegible because of size or colour. Once I heard about print stylesheets and how relatively easy they are to make, I don't see any reason why all CSS-ers shouldn't have them.

    Here's a print-friendly tip I picked up somewhere on the 'net for when making sites with header layers: make a print-friendly header layer in your page. It could contain a graphic, or nicely formatted text, but above all, it should be a print-friendly width. In your screen CSS, set this layer as display: none. In your print CSS, hide the screen header layer(s) and position your print header layer as you'd like.

    Remove border="0" and pare down your code
    Whenever linking an image, I used to put in border="0" in the img tag so that there wasn't a big ugly blue box around it. Until I found out that putting that attribute in is not XHTML strict compliant. Besides that, there's a much easier and code-light way to do it with CSS:

    img {
    border: 0;

    Of course, since coming here, I see that SuzyUK has a much better way of doing it that clears any browser defaults that might be hanging around for other things too:

    * {
    border: 0;

    Prepare for XHTML compliancy and go lowercase
    All of my research indicates that XHTML compliancy will become more prevalent. To prepare for this and to side-step any possible browser pitfalls as a result of making a page XHTML Strict, I follow XML.com's advice:

    Cascading stylesheets are parsed slightly differently in the XML world. When attached to HTML pages, CSS selectors are case-insensitive. But when attached to XML pages (including XHTML pages served with the proper XHTML MIME type), CSS selectors are case-sensitive. This shouldn't come as too much of a surprise; everything in XML is case-sensitive. Keep all your CSS selectors lowercase and you'll be okay.

    Snugging titles up to paragraph text
    I realize this is a no-brainer for all you CSS gods and goddesses (I'm not worthy!), but it was a great epiphany for me and might be helpful for all the other neophytes lurking out there.

    Ever want to have it so your headings snug up to the content below it? I used to use negative margins which resulted in bad joojoo with Netscape and Mac browsers. I couldn't figure out how to make it look consistent without the paragraph text running over the heading. Then one day I stumbled across another epiphany that all knowledgeable CSSers will eventually find out and that has been discussed in this thread already at length: every browser has it's own default margins and borders for just about everything. Knowing this, it's simple to make the headings act properly:

    /* Use SuzyUK's glorious global margin/padding buster */

    * {
    margin: 0;
    padding: 0;

    /* Define a heading */

    h1 {margin-top: 10px;}

    /* Define a paragraph */

    p {margin-bottom: 10px;}

    /* Sit back and wonder why you didn't think of it before */

    The margins can be anything you want, the important part is to make sure that the heading's margin-bottom is 0 and the paragraph's margin-top is 0.

    That's all I can think of myself. Feel free to pick nits on it; I need all the help I can get :)

    Oh, and SuzyUK...can I be your groupie? ;)


    8:54 am on Sep 15, 2004 (gmt 0)

    WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    it feels like I'm writing one already ;) It wasn't meant to be I just never realised there was quite so much!

    HannahG, lol ;)

    Thanks for your points, all good, the one about XHTML compliancy is a good one and appears in a later edition of the tipsheet. But that text you quoted pretty much sums it up, whether or not you use XHTML just now or not it starts good practice if you're going to use it OR it avoids some case-sensitive CSS selector problems even if you're not, it's one of those good habit/coding practice things.

    There is more to follow, hopefully each bit is titled/numbered properly so you can fit the Crib sheet together and Then the tips together.

    still to come:
    Tipsheet #3 - Colors
    Tipsheet #4 - Units
    Tipsheet #5 - Avoid Common Pitfalls

    Cribsheet #11 - Inheritance
    Cribsheet #12 - Inline and Block Elements





    8:56 am on Sep 15, 2004 (gmt 0)

    WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    Tips 'n'Tricks: Part 6

    3. Colors

    syntax: {color: value;}

    the color value can be specified in (at least) three ways

  • keyword
  • hexadecimal (hex)
  • rgb (red green blue)

    (this is by no means a comprehensive explanation of the entire color picking system but instead brief notes..)

    The suggested list of keywords [w3.org] [with hex values in brackets] that can be used is:

    • aqua [00ffff]
    • black [000000]
    • blue [0000ff]
    • fuchsia [ff00ff]
    • gray [808080]
    • green [008000]
    • lime [00ff00]
    • maroon [800000]
    • navy [000080]
    • olive [808000]
    • orange [ffa500]
    • purple [800080]
    • red [ff0000]
    • silver [c0c0c0]
    • teal [008080]
    • white [ffffff]
    • yellow [ffff00]

    Note: keyword orange is not supported in earlier browsers
    Note: be careful with spelling if using keywords.

    Hexadecimal (hex) colors
    these are made up of three pairs of the 16 hexadecimal characters
    (the characters in ascending order : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f)
    An explanation of the hexadecimal notation is beyond the scope of this so very simply put..

    Hexadecimal colors, provide more choice of colors but can only be made up of a combinaton of the 16 characters above.. so if you see a color and wonder is a 0 (zero) or a O (capital oh) it can't be an O (oh) because that's not a hex character.

    the first pair = the red component
    the second pair = the green component
    the third pair = the blue component

    Hex colors should always be preceded by the # in your stylesheet.

    Example: #0000ff

    this is roughly translated:
    the first pair '00' says no red
    the second pair '00' says no green
    the last pair 'ff' means full blue

    if each of the three pairs is made up of the same characters it can be shortened to one character.
    #0000ff = #00f
    #336699 = #369

    RGB color notation
    {color: rgb(0, 0, 255);}
    {color: rgb(0%, 0%, 100%);}

    e.g. rgb( followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by );
    Note: normal brackets as opposed to curly braces

    the first value '0 or 0%' says no red
    the second value '0 or 0%' says no green
    the last value '255 or 100%' means full blue

    Note: percentage symbols must be used if the percentage method is being used even if it's zero see more about units later

    The integer values 0 thru 255 are eqivalent to 0% thru 100% and.

    The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation:
    rgb(255,255,255) = rgb(100%,100%,100%) = #ffffff = #fff

    Graphic programmes/color pick utilities sometimes show the full decimal equivalents for each colors, you can use the windows calculator in scientific view to convert a decimal value to a hexadecimal value.

    ... more to follow ....

  • Hester

    10:13 am on Sep 15, 2004 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member

    Be aware of commands that don't work in older browsers (if you plan to support them). An example is the '*' selector used in many posts here. Sadly it DOES NOT WORK in Netscape 4. So you'll need to apply styles to each element you use instead.

    Avoid IE/Win-only styles too. They simply won't work in other browsers. These include 'bordercolor' and filters.


    10:34 am on Sep 15, 2004 (gmt 0)

    Hex codes aren't that hard to understand once you know the basics. You just have to know that the hex value #ff is equal to decimal 255 and equivalent to 100%.

    Browser-safe colours only have six gradiations for red, green and blue for a total of 6x6x6 = 216 colours. So all you need to remember is:

    #00 =  0 =  0% 
    #33 = 51 = 20%
    #66 = 102 = 40%
    #99 = 153 = 60%
    #cc = 204 = 80%
    #ff = 255 = 100%



    10:45 am on Sep 15, 2004 (gmt 0)

    10+ Year Member

    And way off topic, but if you need help with choosing colours, then take a look at the various free colour mixers on the web, such as:

    [wellstyled.com...] (formerly Pixy's Color Scheme Generator)

    A search for 'color wheel' on Google will turn up a few more.


    2:33 pm on Sep 15, 2004 (gmt 0)

    10+ Year Member

    css = math hehe atleast when your doing funky layouts.

    1. A formula I use:
    Total Width = N(em,px,%)border + N(em,px,%)padding + N(em,px,%)writable space or block

    Total Width = Float1[N(em,px,%)border + N(em,px,%)padding + N(em,px,%)writable space or block] + Float2[N(em,px,%)border + N(em,px,%)padding + N(em,px,%)writable space or block] + Float3[N(em,px,%)border + N(em,px,%)padding + N(em,px,%)writable space or block]

    Sometimes I'm thorn between Flo or Marge.

    2. Import vs Link vs Inline
    Import makes older browsers ignore CSS when they dont understand it. This is where your valuable mark up comes to work. You can present a logically structured page even with out the CSS with the mark up.

    3. Seperate style sheets into layout.css, font.css, color.css. You'll save 75% of your time trying to locate your own concoction of properties. This also helps alot if u want to have preference options on layout and colors and font choices.

    4. /* Always comment your CSS and group them according to zones of your page. */

    5. stick to a uniform format with cases. its not necessarily case sensitive but different browsers interpret them differently.

    6. ID vs Class. Its like Neat vs Cluttered. So I personally prefer neat. :)


    2:50 pm on Sep 15, 2004 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member

    ID vs Class. Its like Neat vs Cluttered. So I personally prefer neat.

    No, it's like Once vs Many. There is a clear difference. ID can only be used once on a page, class can be used one or more times.


    4:07 pm on Sep 15, 2004 (gmt 0)

    10+ Year Member

    heres an example of once vs many

    <div id="contains all spec for this block">


    <h1 class="ye1"><h1>
    <p class="yes2"></p>
    <p class="yes3"></p>
    <li class="yes3"></li>
    <li class="yes4"></li>

    you're right, you can use class as to plentiful times as you want but if you have divided a page into zones and functional blocks, you wont have to repeat a rule for every line?

    true, it maybe situational. i just dont like being redundant all over the place.

    perhaps we can relay a more better basis for our expressions in why id vs class is relevant in some situations and in others its not if we had an example to study.


    4:38 pm on Sep 15, 2004 (gmt 0)

    10+ Year Member

    No. That's an example of once vs. silly.


    <div id="contains all spec for this block">


    <div class="contains all spec for this block">

    <div class="contains all spec for this block">

    Note: Neither the class or id declarations should contain spaces


    5:52 pm on Sep 15, 2004 (gmt 0)

    10+ Year Member

    Before this thread goes any farther, there is one element of good CSS design that has been neglected; when naming ids and classes, always name them based on the functionality they provide. So...

    <div class="highlight">highlighted text</div>

    is better than

    <div class="green"> highlighted text</div>

    The reason for this comes from the idea that someday, you might want to redesign your webpage. After you change all your other page settings, you'll notice that that green text you were using as highlights just, doesn't seem to stand out the same way. Now it should have a tan background! Easy to do, right? and without even touching the HTML! Of course, the class name "green" doesn't make any sense at all if it really generates a tan background...

    Another perk to this is that it makes the process of creating alternate stylesheets very easy.

    To anyone reading this thread and learning CSS, the best way I ahve found of mastering things like Floats and the Box Model is to find an existing website design created using a table based layout. Your goal is to re-create that website, pixel perfect, using tables only to store tabular data (Bonus points if you can do it without Absolute Positioning). The website should render exactly the same as the original in both Mozilla and IE (Not so hard with Standards Compliance Mode in IE now). I gaurantee, once you are done you will really understand the way these things work.


    6:20 pm on Sep 15, 2004 (gmt 0)

    10+ Year Member

    yes the silly example is predominant of most sites new to css.

    i think it was a matter of politely showing uses of id and classes and reference to them as what noah pointed out.

    my bad. ;p


    6:59 pm on Sep 15, 2004 (gmt 0)

    WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    Import makes older browsers ignore CSS when they dont understand it.

    Yup this is one good reason for using it, especially if you have the luxury of not having to support <=v4 browsers.

    I wanted to ask about this anyway, if you look back to post #24 you'll note I've made an amendment explaining that the reason I was using @import without url()
    @import "mystyle.css";
    is because it also hides from IE4 as well as NN4, whereas the @ import that uses ():
    @import url(mystyle.css);
    only hides from NN4, is that correct? can anyone confirm.. (you see that's the problem with using things, you know there's a reason you just can't always remember why.. :o)

    -- Also can anyone confirm, give opinions about the PDA's use of media type handheld, I think that previously although most handheld devices didn't actually support "handheld" they did support "screen" media in error, I don't know if that's still the case or not? --
    edit: above is OT sorry.. what was I thinking.. I still would like to know though in order to keep media types section correct.. but I've moved myself ;) here [webmasterworld.com]


    Seperate style sheets into layout.css, font.css, color.css. You'll save 75% of your time trying to locate your own concoction of properties.

    Not sure I'm a fan of this idea, unless it's a personal site that you understand where you've put everything .. I would think that maybe globallayout.css, then everythingelse.css.. but seperating colors and fonts hmm.

    Grouping selectors saves so much more time and space, and the cascade is easier to read if the whole elements CSS is in one place?

    I've had to debug stylesheets, that have been split into 4-5 sheets and to a newcomer (me) coming into this scenario it can be a nightmare (time consuming) trying to figure cascade and inheritance and someone elses logic let alone when it's all over the place

    Certainly for advanced sites like ronin talked about using @import to cascade the globallayout.css into a subsite's CSS, there has to be some benefit, but when tasks are split between a team the rules about what you can change and can't would need to be strictly adhered to.. just my thoughts of course, but I don't see this on a "neophyte" list yet.. splitting the cascade might only complicate things in the beginning, like running before walking?

    /* Always comment your CSS and group them according to zones of your page. */

    Agreed this takes care of the above situation and passes reminders onto someone following/working with you or even yourself at a later date..

    ID vs Class. Its like Neat vs Cluttered. So I personally prefer neat.

    I think it's more IDentification v's CLASSification, you're right though IDentify a logical area on page = header, nav, footer, newslinks, then as jetboy 'says' classes still have their place because each division within an identified area may not necessarily be classified the same for instance in your newslinks identified area are you may have some links classified as "hot", some as "funny" , "boring" ..etc..

    Thank you, I've literally copy/pasted that post, on the hex color summary, into my notes.. do you mind if I use it? I won't change my post on colors, but would advise anyone who's copying this to add that into their notes.. ;)

    noah you're right about the ID and Class names, I think it has been mentioned already and it is in one of the summaries yet to follow..


    [edited by: SuzyUK at 10:12 am (utc) on Sep. 16, 2004]


    10:56 pm on Sep 15, 2004 (gmt 0)

    10+ Year Member

    To answer SuzyUK :)

    "Not sure I'm a fan of this idea, unless it's a personal site that you understand where you've put everything ... I would think that maybe globallayout.css, then everythingelse.css.. but separating colors and fonts hmm.

    Grouping selectors saves so much more time and space, and the cascade is easier to read if the whole elements CSS is in one place? "

    I prefer to separate layout, font and color in 3 different sheets. Here's an example but it might particularly only work for me. You can try and experiment if its workable? Hehe /wink

    For example I'd like to reduce the width of one of my blocks with the id/class="Box1". I know all width and /gasp height properties would all be in layout.css. I'll just go to layout.css and find the id. I'd just take a glimpse and I know exactly which one it is. Now if I had a globalall.css, I'll have to find the width property of id/class="Box1" married with all the color and border and list properties, etc. To me, it's like sorting laundry. The whites separated from the lights and the darks. This reminds me, I better finish my laundry. ;p

    With regards to CSS editors, I find StyleMaster supports well or works nicely with having 3 different css for a page (switching tabs for each css file is a breeze) but cumbersome in DWmx2004 and with Bbedit or Notepad.

    I hope I expounded better but in no way am I claiming that it is the absolute right way to do it. :)

    This 79 message thread spans 3 pages: 79

    Featured Threads

    Hot Threads This Week

    Hot Threads This Month