homepage Welcome to WebmasterWorld Guest from 54.196.196.62
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

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




msg:1204378
 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 */

 

createErrorMsg




msg:1204438
 12:21 pm on Sep 16, 2004 (gmt 0)

find an existing website design created using a table based layout. Your goal is to re-create that website, pixel perfect

I agree that the best way to learn CSS is by picking apart other sites, but I believe it's better to find a GOOD CSS SITE and try to figure out why it's so good, rather than try to mimic a tables-based design in CSS (fun and iconoclastic as that may seem ;)).

Converting a tables-based design in a "pixel-perfect" way ignores and stifles one of CSS's greatest advantages, namely that you don't have to think in tables! CSS is far more fluid, far more flexible than the old tables-based row/cell/cell. Attempting to directly convert a table into CSS tends to result in CSS sites that are designed like tables.

Looking at a good CSS site, however, makes you think in terms of CSS, makes you see that web sites don't have to be divied up into neat little squares in horizontal rows.

Just a thought.

SuzyUK




msg:1204439
 4:43 pm on Sep 16, 2004 (gmt 0)

Tips 'n' Tricks - part 7

4. Units of Value

Always specify units for non-zero values. CSS requires that you always specify a unit on all quantities.
e.g. 2em, 20px, 15pt; 90%

line-height has an exception to this. It's value can be calculated relative to the font-size of an element.
e.g.
p {
font-size: 12px;
line-height: 3.5;
}

the line-height of the <p> is 12px x 3.5 = 42px.

line-height can also be set in percentage values so 3.5 would be = to 350%. It can also just be set as a fixed value. e.g.
p {
font-size: 12px;
line-height: 20px;
}

Zero Units
Zero is always zero regardless of whether it's 0px, 0em, 0cm etc.. so no units are required when specifying 0.

~ exception: using color notation in rgb format: e.g.
rgb(0%, 0%, 0%)

Note: do not leave any whitespace between the value and the unit. It will cause some browsers problems.

e.g.
{margin-top: 20 px;}
should be
{margin-top: 20px;}

.... more to follow...

SuzyUK




msg:1204440
 9:55 pm on Sep 16, 2004 (gmt 0)

Tips 'n' Tricks - part 8

5. Avoiding some pitfalls

- some of these are mentioned previously in this series of articles, but they're here for reference -

  • avoid using underscores in class and ID names
  • avoid starting class and ID names with numbers
  • name classes and ID's by function (e.g. nav) as opposed to their appearance (e.g. redborder), appearances may change!
  • put non hyphenated, multi word fonts in quotes (e.g. "times new roman")
  • avoid putting the path to to background image in quotes, especially single ones
    (e.g. background-image: url(path/to/myimage.gif); )
  • if using an embedded stylesheet for testing, the path to images may need to be altered once in an external stylesheet.
  • if testing using an external stylesheet, tweaks may not show up as expected if the original stylesheet has been cached.
  • always use units with your values (e.g. width: 150px; )
  • hex color values should always be preceded with a # (hash symbol)
  • be aware when using shorthand properties that they are not implicitly overwriting previous explicit settings.

Case Sensitivity

Type selectors: div, h1, input etc.. are case-insensitive

Class and ID selectors: are case-sensitive.

e.g. BODY#myHomePage {}

will match <body id="myHomePage">

but it will not match <body id="myhomepage">

To avoid tracking case-sensitive issues perhaps it would advisable to always use lowercase for all selectors. This also fits with the XHTML coding practice which states that all attributes must be lowercase and quoted. So just adding to the good habit/coding practices if nothing else..


[end of Tips 'n' Tricks] - let me know if I missed any!

.... more Crib Sheet to follow...

claus




msg:1204441
 10:33 pm on Sep 16, 2004 (gmt 0)

On colo(u)r keywords:

Here's the full list of 147 color keywords [w3.org] (W3C)

- which amounts to 138 different colo(u)rs because some have more than one name ("aqua" + "cyan") and some have more than one way of spelling (lightslategray / lightslategrey).

For those with dual spelling, not all browsers recognize both.

noah




msg:1204442
 1:23 am on Sep 17, 2004 (gmt 0)

find an existing website design created using a table based layout. Your goal is to re-create that website, pixel perfect.

When I said this, I meant it as a learning excercise, not as a means to end up with a layout that I would use. I did this, and afterwards I gained an enormous amount of insight into the way the box model is rendered, the way floats and clears work, and display types. All these things are necessary if you are recreating an even moderately complex design.

Sure, you don't end up with a particularly usable design, but it is a great feeling of accomplishment, and an excellent learning experience. In my first design after one of these excercises, my code was a lot cleaner and I had learned better ways to do make the final design look like the layout I wanted.

Wrapdida




msg:1204443
 4:38 am on Sep 17, 2004 (gmt 0)

Another important thing related to CSS would be knowing DOCTYPE and MODES: STD, p-STD and Quirks. Its going to take awhile to explain all these.

Last time I remember, I cant post links?

SuzyUK




msg:1204444
 9:23 am on Sep 17, 2004 (gmt 0)

Cribsheet - part 4 (following on from msg #31)

11. Inheritance
(related to: 7. Specificity)

We're back to the family tree again ;) a child element will inherit from it's nearest ancestor in the HTML flow (document tree), but only those particular properties that will inherit by default.
e.g.
direction
color
font-family
font-size
etc...

height is a an example of a non inherited property, and one which causes a bit of misunderstanding e.g. when trying to get 100% height across lots of columns.

Inheritance works with the document flow/tree and specificity.
Example:
div {
color: blue;
font-size: 100%;
border: 1px solid #000;
}
p {font-size: 90%;}
span {font-size: 90%; color: red;}

<div>
<p>paragraph text in here <span>span text</span> end.</p>
</div>


In the above example <div> sets the color, font-size and border. Border is not an inheritable property so the <p> and <span> will not have a border on them. Color and font-size are inheritable so the <p> and <span> being descendants of the <div> and in the absence of further rules, will both be 100% and colored blue.

Then the <p> rule tells the font-size of the paragraph to be 90% by way of it's specificity, i.e. the cascade order wouldn't matter here. So the <p> paragraph becomes 90% by way of specificity and blue by inheritance.

The <span> would also be 90% and blue by way of inheritance too, in the absence of further rules, but we have specifically set it to be red so again it becomes red by way of specificity.
Note: order in the cascade would not matter here..

...and the font-size is being affected by both specificity and inheritance. Firstly the span is already 90% by way of inheriting the font-size from the paragraph, and then by explicitly setting the span to 90% we're telling it to be 90% of the paragraph's 90% not the div's 100%.

Inheritance can be used to simplify lots of rules
For example setting the font-family on the <body> element avoids the need to respecify it on other elements.
(a exception may be the <table>, elements in IE/quirks?)
e.g.
body {font-family: arial, verdana, sans-serif;}

There should be no need to specify those same font-families on other elements within the document, but then should you want to change your e.g. <h1>, <h2>'s to a different family their inheritance of the body's font-family will be overridden by order of specificity. e.g.
body {font-family: arial, verdana, sans-serif;}
h1, h2, h3 {font-family: georgia, serif;}

The "inherit" value

The inherit value [w3.org] can be used on all elements either to strengthen inherited values, or it can also be used on properties that are not normally inherited.

e.g. {height: inherit;}

The W3C recs say:
Each property may also have a specified value of 'inherit', which means that, for a given element, the property takes the same computed value as the property for the element's parent.

However IE doesn't seem to support this.

.... more to follow...

SuzyUK




msg:1204445
 6:39 pm on Sep 20, 2004 (gmt 0)

Cribsheet - part 5

12. Block and Inline Elements (or <div>'s 'n' <span>'s)

All of the visual formatting within a document relies on the visual formatting model [w3.org]. The basis of how all elements display by default or are formatted depends primarily on whether they are block or inline

there are ways using CSS to change an element's default display property [w3.org], but for the purpose of this sheet I'm going to use the two most common elements that are used and asked about generically because the names of the elements themselves help explain.

block level element : e.g. <div>
is used to create a division in a document. That means the page is divided as in new areas are formed (or line breaks occur before and after!) to contain the element. these then become the containing blocks [w3.org].
So block level elements, by default, create a 100% wide (of their containing block) area which can then contain further inline elements and sometimes further block elements depending on their element definition [w3.org]
Examples:
<div>, <p>, <h1>, <form>, <ul>...

inline level element : e.g.<span>
is used to span, modify the appearance of an area of text within an existing block level element. That means the page is not divided, as in no new area or containing block is formed. It creates an inline box instead and inline boxes should not contain (nested) block level elements.
Examples:
<span>, <a>, <em>, <strong>..

All pages have an initial containing block, this is usually the <html> element, although IE5.x and IE6quirks still think it's the <body> element.. but no matter the chain has to start somehwere the viewport has to be defined as a block in order for it to contain you document, and either the <html> or <body> elements do this.

<div>'s are often used as containers for existing block level elements in order to break a web page into a logical structure. This is perhaps because they make good containers, there's no default margin, padding or borders to deal with ;) ~ however something to be aware of is that sometimes overuse of <div>'s ~ "divitis" can occur if you're not careful.. e.g.

<div id="header">
<div id="mytitle"><h1>Company slogan</h1></div>
<div id="headerlogo"><img src... /></div>
</div>

when the same can be accomplished just with this

<div id="header">
<h1>Company Slogan</h1>
<img src.... />
</div>

That's a simple example and in this case you may want the extra div's as containing blocks for extra visual formatting reasons, but sometimes using the 2 (or more) nested block elements could be unneccessary. In this example the <h1> would create a formattable containing block on it's own.

inline elements cannot accept as many visual formatting rules as block level elements e.g. width or height is not recognised in inline elements, they can only be as high/wide as the content they contain they cannot affect their containing block's dimensions.
inline elements will also inherit inheritable properties from their parent element (containing block) and will default the rest.
Example:
p {background: #ff0; color: #00f;}

<p>paragraph text in here <span>span text</span> end.</p>

the span in the above example is inheriting the blue color of the text because color is an inheritable property ~ but it's background-color is being set to transparent by default (allowing the yellow to show through). It is not inheriting the background-color from the <p> because background-color is not an inheritable property.

They, inline elements, can accept left/right padding or margin as this just spaces the content from it's preceding or following text (anonymous inline boxes [w3.org]) and it still won't affect the containing blocks dimensions.

It will accept top/bottom padding (not margin though) but will possibly not give the effect you think:
Example:

p {background: #ffc;}
span {background: #fcf; padding: 50px; }

<p>paragraph text in here non-span text end.</p>
<p>paragraph text in here <span>span text</span> end.</p>
<p>paragraph text in here non-span text end.</p>

The span's background-color shows that the spanned text is padded, but the top and bottom padding does not affect the size of the block element, <p> which contains it. The second paragraph has a higher relative position (because of natural document flow) than the first paragraph so the text in the first paragraph is hidden behind the span's background whereas the third paragraph has a higher relative position so it's text appears on top of the span.

changing the span's CSS to:

span {background: #fcf; margin: 200px;}

shows that the left/right margin is honoured but the top/bottom ones have no effect at all.

[End of Cribsheet]

[edited by: SuzyUK at 8:51 am (utc) on Sep. 21, 2004]

SuzyUK




msg:1204446
 6:48 pm on Sep 20, 2004 (gmt 0)

I think that's it ;)

I did have "more to follow", and what I had in mind was a "cheatsheet" round up of the more common (IE) bugs/quirks and their workarounds.. with an overview/explanation of some of the hacks in use today

If you want I'll add them here later.. or is that enough?

thanks for kicking my butt to write this all up and I hope you find some of it useful

Suzy

createErrorMsg




msg:1204447
 8:27 pm on Sep 20, 2004 (gmt 0)

a "cheatsheet" round up of the more common (IE) bugs/quirks and their workarounds.. with an overview/explanation of some of the hacks in use today

I would marry you if you wrote this up and posted it. (Or, optionally, I would not marry you if you wrote this up and posted it. Which ever one is more likely to get you to write this up and post it.)

On another note, Suzy pointed out in the above post that <h1> is an example of a block level element. I've always assumed this was true. They certainly act like block level elements. However, take a look at this [w3.org] from the W3 html4.01 specs...

<!ENTITY % heading "H1H2H3H4H5H6">
<!--
There are six levels of headings from H1 (the most important)
to H6 (the least important).
-->

<!ELEMENT (%heading;) - - (%inline;)* -- heading -->

The bold is mine, and points out that, according to this, header tags are inline elements! (I didn't go hunting this down, but happened to have spotted it in passing...)

Am I interpretting this wrong? I don't frequently delve into the html specs, so maybe I'm missing something, but if not, can anyone explain this? Why would they define headers as inline elements but then have every one of them create a new block?

Suzy, if this seems too off topic, please feel free to move it into it's own thread. :)

SuzyUK




msg:1204448
 9:25 am on Sep 21, 2004 (gmt 0)

cEM
>>Am I interpretting this wrong? I don't frequently delve into the html specs,

I think so.. but reading those definitions is sometimes scary ~ tho' always worth it

That is saying, that <h1> thru <h6> are <heading> elements and they can only contain (inline) elements. e.g. you cannot nest another block element inside this particular block element.. it's like a <p> element who's description is the same but the explanation given [w3.org] is clearer..

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

the W3's defintion of block and inline elements [w3.org] doesn't really make this any clearer :o it's very general

(my emphasis)

Content model
Generally, block-level elements may contain inline elements and other block-level elements.
Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

Formatting
By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not. For information about white space, line breaks, and block formatting, please consult the section on text.

I've added a link to the defintions in the block level section in no.12 above, but short of a list, it's mostly common sense as to whether a block level element can actually contain other block level elements.. e.g. <div> and <form> can

Not OT, well spotted and it needed "clarifying" tho I don't know if that's made it any clearer than mud!

Suzy

Hester




msg:1204449
 10:01 am on Sep 21, 2004 (gmt 0)

Wrapdida:
heres an example of once vs many

<div id="contains all spec for this block">
<h1></h1>
<p></P>
<ul><li></li></ul>
</div>

vs

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

What you could do with the second example is use styles based on the ID, like this:

#id h1 {color:green;}
#id p {color:red;}
#id p+p {color:blue;}
#id li {color:purple;}

So you can style each tag within the section based on the order of the tags. I cannot stress the usefulness of this enough - it saves using classes and spans.

Of course if you have two identical sections, by all means use a class. Eg:

<div class="example">
<h1></h1>
<p></P>
<ul><li></li></ul>
</div>

.example h1 {color:green;}
.example p {color:red;}
.example p+p {color:blue;}
.example li {color:purple;}

Hester




msg:1204450
 10:05 am on Sep 21, 2004 (gmt 0)

jetboy_70:
Note: Neither the class or id declarations should contain spaces

You can't use spaces for individual names, but spaces can be used to separate multiple classes. Eg:

<div class="menu full opera">

createErrorMsg




msg:1204451
 12:20 pm on Sep 21, 2004 (gmt 0)

Suzy, I figured I was just misunderstanding the format of the W3 data. Thanks for clarifying. Your explanation makes sense.

Generally, inline elements may contain only data and other inline elements

The validator throws up errors if you nest block elements inside of inline elements, but does it actually break the layout? Here's a quote about inline and block boxes from the W3 CSS2.1 specs...

When an inline box contains a block box, the inline box (and its inline ancestors within the same line box) are broken around the block. The line boxes before the break and after the break are enclosed in anonymous boxes, and the block box becomes a sibling of those anonymous boxes.

It's all clear now! ;)

Although I'm still trying to parse out the full meaning of these two sentences, at the very least it pretty clearly states that CSS allows block boxes inside of inline boxes.

This is a tad confusing, since in order to do so with CSS would require nesting in the html, which would throw up a validation error!

Unless it's meant only for boxes defined as block and inline using the display property? Like nesting a block level div in a div styled as inline?

robho




msg:1204452
 7:01 pm on Sep 22, 2004 (gmt 0)

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

Be aware that if you use this, ALL borders will be 0, even those on forms.

Unless you add styles on input and textarea, and a class for the submit button, your users might not know where to enter anything in a form, or what button to press (as there isn't one visible). Like:

input,textarea{border:thin inset #9999cc;}
.button{border:thin outset #9999cc;}

on a totally different subject, validate your stylesheet of course, but as a quick first check make sure you haven't put any semicolons outside the brackets, like:

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

Automatically adding the outside semicolon is VERY easy to do if you code in php or perl the rest of the time! But the usual result is the next line at least of the stylesheet is ignored...

MatthewHSE




msg:1204453
 12:42 pm on Sep 29, 2004 (gmt 0)

One thing that revolutionized the way I see (and use) CSS was when I tried to create a stylesheet for CSSZengarden. It totally changed how I design a typical page now. If anyone else wants to give it a try, I suggest the following procedure:

  • Load www.csszengarden.com in FireFox (make sure you have the Web Developer extension [update.mozilla.org] installed)
  • View the source and make a list of all the ID's and class names.
  • Spend a few minutes getting a basic idea of how the page is put together in the source
  • On your Web Developer toolbar, choose "Edit CSS" under the "CSS" menu
  • Start playing around with it!

If you've never done anything like this before, it adds a whole new dimension to source-ordered content, how unstyled pages can work for older browsers, semantic markup, and a whole host of other CSS-related topics.

Marcia




msg:3578522
 4:53 am on Feb 19, 2008 (gmt 0)

This thread was a lifesaver with a persistent specificity problem happening on multiple sites. Thanks!

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

Yes, please!

Marcia




msg:3578562
 6:19 am on Feb 19, 2008 (gmt 0)

I've got this thread printed out and put into a section of a 3 ring binder as part of my "book" collection, and it's been so much help. So here's my humble contribution to give back a little to the "Shortcut Session." I posted in the PHP forum, since it's partial so far and more about PHP than CSS (and I was afraid to post about doing tables sites here... LOL). It's about using PHP & CSS together (in Dreamweaver 2, actually) to do some modular semi-automation for sites using tables layouts:

PHP Includes and CSS for an HTML Tables Layout [webmasterworld.com]

SuzyUK




msg:3578870
 4:11 pm on Feb 19, 2008 (gmt 0)

Hi Marcia.. have replied over in your PHP thread, thanks for the tips.

I think I wrote a thread yonks ago about dropping the "versus" between Tables and CSS hehe.. using a simple table framework along with CSS is a robust way to get used to classes/ID's and specificity. The principle works the same on <table> <tr> and <td> and in fact is often easier for some to understand as most everyone "gets" the grandparent, parent, child relationship of required table elements

<table> (grandparent)
--<tr> (parent)
----<td> (child)

all three of those elements are wrappers for actual content and without any classes or ID's can be used to make specific rules

I know you've asked about specificity a couple of times, and there's a few threads on it already but I think it might help if I explain it without classes/ID's and I'll use table elements too LOL ;)

See: 6.4.3 Calculating a selector's specificity [w3.org] for more, in this sample I'm using only the last of the four conditions (d)

e.g.
tr p {color: red;} /* specificity 0,0,0,2 */
table p {color: white;} /* specificity 0,0,0,2 */

regular way of targetting, one parent element or class, in this case the second rule would apply because both rules have the same specificity (both use 2 elements in the sector), so the regular Cascade, the later in the stylesheet rule, wins.

whereas
table tr p {color: red;} /* specificity 0,0,0,3 */
table p {color: white;} /* specificity 0,0,0,2 */

The first rule is more specific a rule than the second it has two parent element names as well as the <p> in its selector, <table> and <tr>, - in this case the first rule, red, would apply to <p>'s in a table because of it's specificity, no matter where it is in the stylesheet the more specific rule overrides the Cascade!

lastly the effects of a class on a table row in the mix:
table tr.header p {color: red;} /* specificity 0,0,1,3 */
table td p {color: white;} /* specificity 0,0,0,3 */

class is an attribute so that adds to part( c), so while these 2 rules both have 3 elements (and different ones at that) the rows header class makes that rule more specific so the <p>'s in any <td> of that table-row will be overruled again no matter where the rule is in the cascade!

anyway HTH a bit more, and re this cribsheet, I actually have it in PDF ebook format somewhere, and have a new site in development which has it in "book" chapter/printable format too.

nice to know it helps, thanks for feedback

-Suzy

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