homepage Welcome to WebmasterWorld Guest from 54.197.183.230
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 79 message thread spans 3 pages: 79 ( [1] 2 3 > >     
CSS Crib Sheet, cheatsheets, shortcut lists, syntax lists, & others
Please share with a CSS neophyte any type of help lists you employ
Webwork

WebmasterWorld Administrator webwork us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4514 posted 4:33 pm on Sep 8, 2004 (gmt 0)

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.
Example:
h1,h2,h3,h4,h5,h6
{
color: green
}

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

If Value = multiple words enclose "value in quotes"
Example:
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.
Example:
p
{
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
Example:
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.
Example:
.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
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
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>:
<head>
<link rel="stylesheet" type="text/css" href="path/to/mystyle.css" />
</head>

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

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.)

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

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 */

 

drbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 5:12 pm on Sep 8, 2004 (gmt 0)

For properties:

[w3.org...]

For selectors:

[w3.org...]

Support for these is being implemented in modern browsers, much fun:

[w3.org...]

mincklerstraat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 5:22 pm on Sep 8, 2004 (gmt 0)

Very nice summary, webwork.

possible additions:
- need special css sheet done in php? link it like usual, w/parameters & whatnot <link rel stylesheet href="stylesheet.php?this=that&whatever=somemore" type="text/css"> - but to make it work in firefox, you gotta give it the right content-type headers or it won't work, so at the top:
header('Content-type: text/css');
then - since php doesn't give any cache-control headers, and you want this to be cached like other stylesheets -
header('Expires: '.date('D, d M Y H:i', (time() + 24*60*60)).' GMT'); (multiplied number is one day - fill in however long you want your stylesheet to be cacheable for)
and then your stylesheet declarations with all your supercool & groovy php specialized stuff.

- just wanna see how all your divs are laid out & sized? -> webdev extension for firefox, various 'outline' functions & miscellaneous > 'show block id's'. Irreplacable for me.

Nit-picking: want '#' in your <h1> examples in color declaration.

Webwork

WebmasterWorld Administrator webwork us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4514 posted 6:05 pm on Sep 8, 2004 (gmt 0)

Nice reminder DrBrain. That's exactly the sort of 'handy tool' I hoping to elicit by this post, but while third-party tools are great references I'm betting there's some organized souls who have created their own 'short list of handy rules or tricks to remember' that could make life a little easier for all of us on the road to conversion to CSS.

I'm guessing somewhere in the CSS forum is a thread about the best tutorials. Anyone care to create a short list of the current best CSS tutorials? I know W3Schools is quite good. How about others - like the best 3 float tutorials?

I'm going for the big one here. An attempt to make this an instant accelerator thread for CSS wannabees.

I may add my current list of CSS favorites (linked to my browser) shortly. Whilst such lists of helpful resources are a great contribution what I'm more looking for is the knowledge or insight anyone has distilled from a read of third party sites.

How about a shorthand explanation of 'how float works and what syntax to use'? Anyone create a crib sheet as a reminder to themselves?

How about a 'list of known bugs and their work arounds'? That's probably 'out there'.

If this gets rolling then I'll do my best to summarize the whole thread, perhaps making it something to print out to stick to the wall next to my desk.

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4514 posted 6:39 pm on Sep 8, 2004 (gmt 0)

CSS FAQ [webmasterworld.com]
CSS Crash Course [webmasterworld.com]

Other related threads:
[webmasterworld.com...]
[webmasterworld.com...]

And, of course, there's quite a bit to digest in our beloved forum library [webmasterworld.com].

createErrorMsg

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 8:06 pm on Sep 8, 2004 (gmt 0)

I'm betting there's some organized souls who have created their own 'short list of handy rules or tricks to remember' that could make life a little easier for all of us on the road to conversion to CSS

Yes, they're called the World Wide Web Consortium [w3.org]. ;)

bedlam

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 8:22 pm on Sep 8, 2004 (gmt 0)

Interesting post.

I have to nitpick slightly too -

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

I'm pretty sure (based on every reference I can come up with at the moment) that 'sans serif' in your example should be "sans-serif" - with a "-".

-B

claus

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 8:28 pm on Sep 8, 2004 (gmt 0)

for all "block-level elements" (eg. div's and such), remember to specify:

1) height or width, or both
2) margin (zero or value)
3) padding (preferably zero, unless you can't do it w. margin)
4) border (including zero or none)

...and you don't need to worry much about all the problems that everyone else talk so much about.

Oh, and if you want something to be positioned exactly somewhere, then do it using absolute positioning, that's what it's there for - if there's something that you want (or don't want), then specify it. Use the tools as intended, you'll save yourself from wasting a lot of time looking for hacks.

(OTOH, "i never have serious problems" don't sound as smart as "i always use the xyz-hack").

Added:
While i'm at it, i should add something useful (i tend to see the above as routine, not a trick):

a) use the background/background-color property, eg. in pink, green or other strong, contrasting colo(u)rs, while you're developing or when in doubt.

b) "overflow:hidden" is a nice tool

c) the "display:" property... yet another nice thingy

[edited by: claus at 8:52 pm (utc) on Sep. 8, 2004]

createErrorMsg

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 8:28 pm on Sep 8, 2004 (gmt 0)

Bedlam is right, "sans serif" is telling the browser to use the "sans" font, and if not available, to use a "serif" font.

bedlam

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 8:51 pm on Sep 8, 2004 (gmt 0)

Bedlam is right, "sans serif" is telling the browser to use the "sans" font, and if not available, to use a "serif" font.

Err...I could be wrong about this too, but I think that a useragent would interpret that css as instructing it to use the (single) font with the name 'sans serif' (in the same way that "font-family: "Times New Roman", serif;") tells it to use the Times New Roman font.

-B

Webwork

WebmasterWorld Administrator webwork us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4514 posted 9:30 pm on Sep 8, 2004 (gmt 0)

Alright already! The fee for nitpicking is you have to put up a gem, a helpful little note that you keep near or on your computer when doing CSS design work. Picking off nits is helpful, but come onnnnn purists and intellectuals, give it up: Show us the lists and cribsheets you use, even if there's just one in your head that you have to write down - but it works like a charm when 'thinking CSS'. Guys and gals who can pick off nits often have some of the best minds and I neverrrrr nitpick and seldom meet nitpickers so I dont' really know what I'm asserting here ;;; - if you can only get them to share the good stuff ;-).

createErrorMsg

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 10:10 pm on Sep 8, 2004 (gmt 0)

I think that a useragent would interpret that css as instructing it to use the (single) font with the name 'sans serif'

Yes! I didn't see the "" in the actual CSS declaration. "Sans serif" in quotes would be interpreted as a named font-family that has a space in it. In fact, I think even "sans-serif" wouldn't yeild any result, as sans-serif is a generic font-family, not a specific face. (Although I'm not sure, it might work just fine.)

Here's my "fee" for picking at nits (and shouldn't it be knits?):
Bookmark the hell out of the W3 specs, set Firefox to automatically open the index page of the specs in a tab, and train yourself to read their tech-speak. Make it the firstplace you turn for answers, not the last. When you read about a new technique on a forum or tutorial site, go to the specs and read about the properties being used so that you understand whythings are happening. There is NO BETTER SOURCE than that particular horses mouth.

bedlam

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 11:41 pm on Sep 8, 2004 (gmt 0)

Heh ;-)

Alright already! The fee for nitpicking is you have to put up a gem, a helpful little note that you keep near or on your computer when doing CSS design work.

I assume you're talking at least partly to me...

Well, Claus already beat me to my one indispensable 'trick' which is to give background colours to all block-level elements at the beginning of the process. This is better than using borders, of course, since borders will change the size of the elements (well, in the better browsers and with strict doctypes it will change their sizes...) and may distort the layout.

Besides that, I have no special 'tricks', but here're the two steps most relevant to css in my development process:

  • Start with valid html pages.
    This might not seem to be esecially helpful for CSS, but I rarely create problems for myself with invalid CSS. On the other hand, because I can easily type more than 60 errors per minute, I do sometimes have apparent css problems that turn out to be html-typos (e.g. the other day I found
    "<dib id="...">" in one of my pages...)
  • Impose some order on that stylesheet.
    I don't mean to just put the various style declarations , classes and id's in some particular order - although that may be a good idea too - but rather group the individual properties in individual declarations in consistent ways. I find that this enables me to scroll to a style declaration and immediately find the property I'm looking for. It's also useful for comparing different declarations side-by-side. My declarations usually look like this:

    #some-id {
    element-specific-properties:element-specific-properties;
    /*By element-specific-properties, I mean things like
    * 'list-style-type' for lists etc...
    */


    size:size;
    positioning:positioning;
    float:float;
    display:display;
    visibility:visibility;


    background:background;


    font-properties:font-properties;


    borders:borders;
    padding:padding;
    margin:margin;
    }

    There's no real reason for the order; the idea is just to make it predictable.

Eh. I guess I'm not very 'tricky' ;-)

-B

<pedant-mode>
For isItReal:
... picking at nits (and shouldn't it be knits?)
From dictionary.com: nit n. The egg or young of a parasitic insect, such as a louse.
</pedant-mode>

Krapulator

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 11:57 pm on Sep 8, 2004 (gmt 0)

Descendant selectors [w3.org] should also get a quick mention:

p span em{
font-weight: bold;
}

Will only apply the rule to an <em> when it is inside a <span> which is inside a <p>. All other occurences of the <em> tag will be displayed in the default manner.

createErrorMsg

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 1:05 am on Sep 9, 2004 (gmt 0)

group the individual properties in individual declarations in consistent ways

This is a particularly good tip, and not only for obsessive-compulsive control-freaks. ;)

For isItReal:
... picking at nits (and shouldn't it be knits?)
From dictionary.com: nit n. The egg or young of a parasitic insect, such as a louse.

Actually, that one was me, not isItReal. I thought the cliche referred to picking knits off of, say, a sweater. That it has a far more disgusting origin is interesting to know.

Here's another 'trick' for the book...
I add the following lines to all my css pages at the outset...
.center {text-align: center;}
.justify {text-align: justify;}
.right {text-align: right;}
.left {text-align: left;}
.inline {display: inline;}
.block {display: block;}
.italic {font-variant: italics;}
.allcaps {font-variant: small-caps;}
.bold {font-weight: bold;}

This allows me to drop these classes into the html code when necessary (usually for individual elements within, say, a content <div>) and not have to worry about bulking up the rule declarations for elements that have no other specific styling needs. (In other words, one paragraph on a page that needs a justified alignment gets a class="justify", rather than styling it to have a unique id and giving that id the class="justify".)

photon

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 2:28 am on Sep 9, 2004 (gmt 0)

I don't think anyone has mentioned multiple classes yet. For example, if you have this for your CSS:

.red {color:#F00;}
.bold {font-weight:bold;}

then in your HTML you can have

<span class="red bold">blah blah</span>

which will result in red bold text.

Bonus tip: don't name your classes and ids with names like "red" and "bold", because what happens when you want to change the text to green italics?

isitreal

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 3:46 am on Sep 9, 2004 (gmt 0)

Here's a basic one from above:

h1,h2,h3,h4,h5,h6
{
color: green
}

NEVER leave off the ; semicolon, it's a very bad habit. If you always have it at the end, you will never forget to add it when say you add another thing under it, which causes full css failure in some browsers:

h1,h2,h3,h4,h5,h6
{
color: green
width:200px;
}

This mistake is very easy to make if you don't add ; to the end of each line, and almost impossible to make if you do.

mincklerstraat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 9:23 am on Sep 9, 2004 (gmt 0)

A newbie tip: do not rely on learning css from the output of a wysiwyg editor like Dreamweaver or Frontpage; these will tend to add a whole lot more div's and style stuff inside the HTML than a person with a human brain would do. I've read that some new to css go adding style information to every line of HTML, since that's what their editors do. Instead, go to some well-designed pages by people who are known for good css design, and see how they do stuff.

dcrombie

10+ Year Member



 
Msg#: 4514 posted 2:30 pm on Sep 9, 2004 (gmt 0)

Instead of:

h1#homepage {  
color: 0000FF;
}

<h1 id="homepage">top heading</h1>

use:

#homepage H1 {  
color: #00f;
}

<BODY id="homepage">

<H1>top heading</H1>

;)

Webwork

WebmasterWorld Administrator webwork us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4514 posted 3:39 pm on Sep 9, 2004 (gmt 0)

Dcrombie - that looks helpful, but I don't understand. Would you - or anyone - please explain that tip? Thanks.

mincklerstraat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 3:54 pm on Sep 9, 2004 (gmt 0)


#homepage H1 {
color: #00f;
}

<BODY id="homepage">

<H1>top heading</H1>


assigns the whole body the id of homepage. So every H1 will work with this selector - every H1 is preceded by body (which is id homepage). The other way around, with H1.homepage { } requires <h1 class="homepage"> each time you use it, a lot more HTML.

This technique is really good when you have a page that uses the same selectors, but here and there stuff needs to be done differently. Just give the pages that need modified css a different body id. You don't need to declare #homepage by itself, either.

Also applies when you have to change things in just part of your page. Put it inside a div with an id or class name, and just add the modifications you need:

p {
color: green;
[more rules]
}
#specialstuff p {
color: red;
}
<p>this is green</p>
<div id="specialstuff">
<p>this is red, but formatted according to all the other 'p' rules</p>
</div>
<p>green again</p>

photon

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 5:37 pm on Sep 9, 2004 (gmt 0)

You can use the same concept to style a "current page" link in menus. Set the body id to "homepage" and separate ids on each menu item, e.g., set the home link id to "home".

Your CSS could then look like this:

#homepage #home {font-weight:bold; text-decoration:none;}

You can repeat that for each page/nav link combination. No additional programming required to "highlight" the current page's link.

This relates to the concept of CSS signatures (search with your SE of choice). Use your site name as the id for the HTML element on every page, which allows users to apply their own stylesheets to just your site without affecting any other sites they may visit.

SuzyUK

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



 
Msg#: 4514 posted 8:59 pm on Sep 9, 2004 (gmt 0)

OK.. here's part 1 (I'm at four pages and counting.. ), you encouraged me (great thread topic) to drag some of this stuff out of my head, cos that's the only place it resides (in it's entirety that is) at the minute, and write it down. There's even stuff in some of the questions that you've asked that is not written anywhere yet.. and even if it is it's changing almost daily lol...

I apologise if there's stuff in here that's been mentioned already but I started writing before most of the replies were in ... feel free to point out errors..

Part 1

1. Validate Validate Validate
Make sure the HTML document you are working on is valid. [validator.w3.org]. It needn't necessarily be 100% valid as per W3C specs, but at the very least it will tell you about any unclosed, improperly nested elements, which in turn could cause CSS problems.

In order to Validate you will of course need a valid <!Doctype> [w3.org] and you should be aware of the <!Doctype> switch [msdn.microsoft.com] that switches on "standards compliant" mode in IE6.

periodically validate your CSS [jigsaw.w3.org] this will help find things like those missing semi-colons.

2. Get It Right First!
Design in a CSS Compliant browser first, e.g. Moz, Opera, Safari. Then go back and test in IE. It's easier to "dumb down" your CSS using hacks/filters/workarounds for IE. Much more difficult the other way around, and it lets you see how stuff should work before IE shatters your CSS illusions ;)

3. CSS Syntax

/* CSS Comments look like this */

Comments should be used. They are useful for seperating/sectioning group areas of code. They are especially useful if using filters/hacks/workarounds as they will remind you (or others following you) what the workaround was for and why.

selector {property: value;}

semi-colons should always be used at the end of a rule, it's good habit and it avoids errors when adding more rules after the last one.

CSS2 property index [w3.org]
CSS2.1 property index [w3.org]

Selectors [w3.org]
some common examples:
h1 {} h1 is a Type selector it will match any element of that type within the document.

.classname {} is a Class selector any elements with the class attribute = to that classname will be matched

#idname {} is an ID selector any elements with the ID attribute = to that id name will be matched.

Note: That an ID should only be assigned to a unique element within a page i.e. once. It should IDentify an area of a page as opposed to classes which can apply to multiple occurences of an style within a page. ID should also be used as a "bookmark" anchor because "name" is deprecated. (see more in the section on Styling Links/ Link States in later section)

Selectors can and should be grouped for elements that have similar properties.. rather than declaring the style multiple times in seperate rules.. e.g. you want all your headings to be the same font-family but different from the one you already specified in your main body text. Grouped selectors should be seperated by commas.
Example:

body {font-family: verdana, arial, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: georgia, serif;}

4. Terminology
One thing, pet peeve if you like,
<div></div>

This refers to a <div> element it is made up of an opening <div> tag and a closing </div> tag, so referring to whether a "tag" is closed or not is not correct, it should be is the element closed. This become especially more focused when talking about e.g. an <img> element ~ it doesn't have a closing tag, but in XHTML the <img /> element needs to be closed. Just good practice and all that..

inline styles
This refers to when the styles are actually in the HTML itself.
example: <p style="color: red;">some text</p>

embedded stylesheet
This refers to a style sheet that is embedded within the <head> element of the HTML page.

<head>
<title>....etc..
<style type="text/css" media="screen">
p {color: red;}
</style>
</head>

Using embedded stylesheets is an advisable way to work when building/tweaking a CSS design, it allows for quick changes and tweaks and avoids caching problems that may occur because a previous external stylesheet is being held in your cache thus you may not be seeing what you hope to see. The Stylesheet can then be put into an external document (.css extension) and imported once it is finalised.

external stylesheet
This usually has a dot css extension (though dynamic ones can be built) it's a plain text file incorporating nothing more than than the syntax explained above (i.e. NO HTML)

e.g.
/* this is my general paragraph text color */
p {color: red;}

external stylesheets can then be imported into your document via a statement within the <head> element of your document.... more to follow...

[edited by: SuzyUK at 10:08 pm (utc) on Sep. 9, 2004]

SuzyUK

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



 
Msg#: 4514 posted 9:08 pm on Sep 9, 2004 (gmt 0)

part 2

5. Call your external stylesheet

There are a few ways to do this @import is generally preferred these days because older browsers do not understand it so they get an unstyled page, they get all the information, just not styled.. a nice way of asking them to upgrade? and in the future when @media types are fully supported it will be THE way to go..

but there is today's fashion of providing alternate stylesheets, the alternate ones need to be in a <link rel..> statement. e.g.

alternate external stylesheet named myotherstyle.css ..

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

link rel to main stylesheet
using <link rel...>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/mystyle.css" />
</head>

importing stylesheets
<head>
<title>
<style type="text/css" media="screen">
@import url (path/to/mystyle.css);
</style>

or (which I use, I can't remember why but there was some problem with brackets/quotes?):
[added]: IE4 will not read the following, that's why I use it it's a form of hiding from both NN4 and IE4[/added]

<head>
<title>
<style type="text/css" media="screen">
@import "path/to/mystyle.css";
</style>

Media Types to follow later.. but if all you use is screen it will mean someone attempting to print the page is getting plain text. at this point this may be preferable to a multi colored 3 col layout ;) If I were printing I would just want the info not the colors!

6. Cascade ~ they're not called "Cascading" Style Sheets for nothing

The Cascade is important, if there is a conflict in styles i.e. the same property has been redeclared, the rule that comes later in the cascade (nearer to the actual element) wins. The later in the cascade the more likely it is to affect an element..this applies not only to an external stylesheet but to all of the varying methods of applying styles, even the use of multiple classes.

Using an external stylesheet only, this is effected like so:

p {color: red;}
p {color: blue;}

The second rule overwrites the first by order of the cascade so your <p> will be blue.

Now if you have p {color: red;} in your external stylesheet then you have p (color: blue;} in an embedded stylesheet your <p> text will again be blue, the embedded style rule is nearer your element, later in the cascade, so overwrites the first (external) rule.

similarly if you then write <p style="color: green;"> as an inline style that will "trump"/overwrite the embedded rule so that <p> will be in green text.

This also applies to using multiple classes.
Example:

.red {color: red; font-weight: bold;}
.blue {color: blue;}

<p class="red blue">this text will be blue and bold</p>

The first class "red" tells the text to be red and bold, the later class "blue" tells the text to be blue, so it "wins" in the color stakes, but the text is still bold because the "blue" rule doesn't tell the font-weight to be any different (overwrite the red rule).

disclaimer ~ yes class names should not be named for their appearance these are just examples

7. Specificity (or descendant selectors)
I really like that word had to get it in somewhere ;)

It's all related (pun intended) you will hear words like parent child ancestor sibling.. etc that is how specificity works.

a "descendant selector" is a way of targetting an element because it's in a specific relationship with other elements. It avoids the need to create/assign over many class names.
Example
div#nav li a

this targets an <a> element that has an <li> element somewhere in it's ancestry and that <li> element has a div with an id of "nav" somewhere in it's ancestry.

i.e. you may have already had a div id on your nav section but then felt the need to set up a classname for the links within it, you then would need to add your classname to each link in the HTML, but if you use specificity you don't have to add that extraneous HTML markup. If you do want different styles in your navigation lists just give the <ul> an id then target them all that way. start at the top of the family tree and work down

The best way (maybe the ultimate way) to allow for sites that may require different styles on different pages, e.g. to show a different background header image for each page, is to use a body ID..


<body id="homepage">
<h1>My Title</h1>

This allows you specify general rules for your h1 element, and then if you want the one on your home page to be styled differently you just target it more specifically.. e.g. to place a different header background on each section of your site..

h1 {color: red; background: white;}
#homepage h1 {background: #fff url(mybgimage.gif) no repeat;}

that second rule will only target an h1 that has an element with the id of "homepage" somewhere in it's ancestry. but the first rule applies to all h1's so your home page text color will still be red it's only the background you've changed.

There are more ways that specificity can be used to target elements and the W3C have instructions on calculating specificty [w3.org] which enables you to use it for more advanced targetting reasons.

.. to be continued....

[added]I found the reason why I use the non-bracketed method of importing stylesheets[/added]

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

4css

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 10:35 pm on Sep 9, 2004 (gmt 0)

SuzyUK,
this is excellent!

Thank you for the time you have put into this!

Webwork

WebmasterWorld Administrator webwork us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4514 posted 10:57 pm on Sep 9, 2004 (gmt 0)

Oh, oooohh, oooooohhhh, yes, yesss, oh yessss!

"I'll have what that woman's having."

"When Harry Met Sallie". Deli scene, the all time great set up for a one liner.

Suzy, that's just amazing. The longer this thread goes on the more I'm loving it. I am in deep need of CSS anxiety and confusion abatement and this thread is getting the job done, thank-you all very much ;-)!

Yesssssssss.

Please, keep them coming.

Errr, ummm, you know what I mean....

createErrorMsg

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 1:32 am on Sep 10, 2004 (gmt 0)

I love it when Suzy waxes poetic about the cascade and specificity...

How about a shorthand explanation of 'how float works...?

Float Basics:
A floated item is placed in the flow according to it's spot in the source code, then is removed from the flow and moved in the direction of the float property value until it either (a) meets the edge of it's containing block or (b) hits the edge of another float. Property values include 'left,' 'right,' or 'none.'

Floating occurs at the source location of the element, meaning that floated elements in a container must, in the source code, come before non-floated elements in the same container. Floated elements that come after non-floated elements will be placed beneath such elements (as the flow dictates) and will then 'lift out' and float along that line box, rather than beside the non-floated element.

Any floated item must have an explicit width.

Multiple FLoats:
If multiple items are floated within the same container and in the same direction, they will line up, border to border, until there is no longer enough room to place the next float. The next float will then move down until there is enough room for it (i.e., when the previous float is cleared) and will then 'lift out' of the flow and move in the float direction as above. This allows for the creation of horizontal 'rows' of like-heighted elements, or MC Escher-like peices of modern art when dissimilarly-heighted elements are used.

Multiple items can be floated within the same container but in opposite directions, and will appear 'side by side' as long as you can be certain the container is wide enough to allow for both floats. Otherwise, the float that comes second in the source will be forced to move down until there is enough horizontal space in the container for it, at which point it 'lifts out' and floats in its appropriate direction. For this reason, two floated elements with opposite dire3ction property values should never be placed in a relatively (em or %) sized container.

Containing Floats:
Standards-compliant floating is intended to allow elements to 'leave' their container boxes in a downwardly-vertical direction, and overlap 'into' subsequent container boxes. If you wish to have a container that stretches down and 'wraps around' it's floated child elements, you must apply a float value to the container itself.

(Note: IE (and reportedly Opera) automatically does this. This is one reason why designing for Firefox then tweaking for IE is a good idea. A float layout that looks good in IE may well burst its seams in Firefox.)

Clearing Floats
Floats will continue to float over stuff, shuffling content out of the way, until either (a) the float runs out of content, or (b) it is cleared.

Clearing is done with the 'clear' property, and is applied to the element following a floated element that you do not wish to have the float float over.

Give the clear property a value of 'left', 'right' or 'both'. Use both only when there is, in fact, both a left and rigth float that needs to be cleared. Otherwise, use the direction of whatever the float that you are trying to escape has. Although 'both' will work in any case, it's a sign that you're not paying attention to the details of your layout and could, potentially, cause you to clear a float you didn't need or want cleared when used to clear only one float in one direction.

[edited by: createErrorMsg at 2:15 am (utc) on Sep. 10, 2004]

vkaryl

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 2:01 am on Sep 10, 2004 (gmt 0)

Omigosh you guys! *faints with palpitations*

Could I have TWO flags for this one? I have not previously found such readable, usable, understandable information on CSS ANYWHERE!

Bless you all! I'm with Webwork: keep it coming!

mincklerstraat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4514 posted 8:43 am on Sep 10, 2004 (gmt 0)

If margins aren't specifically set, browsers will set margins for you - and not in a cross-browser consistent manner. So you can begin your css sheet with:
* {
margin: 0;
}
to correct for this. You may even want to add padding: 0; as well, depending on how you style. Then you just add margins per selector as you see fit, which will help you get your proportions a bit more consistent across browsers. The * selector means 'everything'. (think I got this from one of SuzyUK's postings before - if I stole this from someone else, please let me know - I used to just do this in every last style declaration).

You can use shorthand style declarations, but remember that everything that isn't explicitly stated in this declaration for the declaration category will be reset to defaults, even if you've already declared it long-hand.

SuzyUK

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



 
Msg#: 4514 posted 9:29 am on Sep 10, 2004 (gmt 0)

Thanks all.. glad you're finding it useful, I can't keep up with the good ideas already being posted. If I ever get to the end of this, I'll go back over the rest and see what I've missed, meanwhile the next installment is now ready ;)
I think this is the last installment of the cribsheet.. the next will be Tips 'n' Tricks

Thanks for the float explanation cEM.. and I'll get to shorthand properties too, meanwhile keep posting your gems, my brain needs all the help it can get! lol

As always please point out any errors you may see!

Suzy

<added>this is not the last instalment of the cribsheeet there might be another 3 sections yet...</added>

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

This 79 message thread spans 3 pages: 79 ( [1] 2 3 > >
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