CSS Mastery

Simon Collison, Andy Budd, Cameron Moll

Mentioned 9

Building on what made the first edition a bestseller, CSS Mastery: Advanced Web Standards Solutions, Second Edition unites the disparate information on CSS-based design spread throughout the internet into one definitive, modern guide. Revised to cover CSS3, the book can be read from front to back, with each chapter building on the previous one. However, it can also be used as a reference book, dipping into each chapter or technique to help solve specific problems. In short, this is the one book on CSS that you need to have. This second edition contains: New examples and updated browser support information New case studies from Simon Collison and Cameron Moll CSS3 examples, showing new CSS3 features, and CSS3 equivalents to tried and tested CSS2 techniques What you’ll learn The best practice concepts in CSS design. The most important (and tricky) parts of CSS Identify and fix the most common CSS problems How to deal with the most common bugs Completely up to date browser support information Covers CSS3 as well as CSS2 showing you the future of CSS Who this book is for This book will be aimed towards intermediate web designers/developers, although the examples should be simple enough for novice designers/developers with a basic understanding of CSS to grasp. Readers will probably have read beginner/intermediate instructional books such as Web Standards Solutions and will be looking for more practical and in-depth information. This book is likely to have a broad appeal, attracting intermediate developers wanting to improve their skills as well as advanced developers wanting a useful reference. The CSS 2/3 content of the book is delivered in a way that allows readers to learn CSS2 techniques that they can implement now in professional work, and then gem up on CSS3 techniques if they want to start looking towards the future. Table of Contents Setting the Foundations Getting Your Styles to Hit the Target Visual Formatting Model Overview Using Backgrounds for Effect Styling Links Styling Lists and Creating Nav Bars Styling Forms and Data Tables Layout Bugs and Bug Fixing Case Study: Roma Italia Case Study: Climb the Mountains

More on Amazon.com

Mentioned in questions and answers.

Researching specificity I stumbled upon this blog - http://www.htmldog.com/guides/cssadvanced/specificity/

It states that specificity is a point-scoring system for CSS. It tells us that elements are worth 1 point, classes are worth 10 points and IDs are worth 100 points. It also goes on top say that these points are totaled and the overall amount is that selector's specificity.

For example:

body = 1 point
body .wrapper = 11 points
body .wrapper #container = 111 points

So, using these points surely the following CSS and HTML will result in the text being blue:

CSS:

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  color: blue;
}

HTML:

<div class="a">
  <div class="b">
    <div class="c">
      <div class="d">
        <div class="e">
          <div class="f">
            <div class="g">
              <div class="h">
                <div class="i">
                  <div class="j">
                    <div class="k">
                      <div class="l">
                        <div class="m">
                          <div class="n">
                            <div class="o" id="a">
                              This should be blue.
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

RESULT:

http://jsfiddle.net/hkqCF/

Why is the text red when 15 classes would equal 150 points compared to 1 ID which equals 100 points?

EDIT:

So apparently the points aren’t just totalled, they’re concatenated. Read more about that here - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html BUT, does that mean that the classes in our selector = 0,0,15,0 OR0,1,5,0?

My instincts tell me it’s the former as we KNOW the ID selector’s specificity looks like this: 0,1,0,0

I am currently using the book CSS Mastery: Advanced Web Standards Solutions.

Chapter 1, page 16 says:

To calculate how specific a rule is, each type of selector is assigned a numeric value. The specificity of a rule is then calculated by adding up the value of each of its selectors. Unfortunately, specificity is not calculated in base 10 but a high, unspecified, base number. This is to ensure that a highly specific selector, such as an ID selector, is never overridden by lots of less specific selectors, such as type selectors.

(emphasis mine) and

The specificity of a selector is broken down into four constituent levels: a, b, c, and d.

  • if the style is an inline style, then a = 1
  • b = the total number of id selectors
  • c = the number of class, pseudo-class, and attribute selectors
  • d = the number of type selectors and pseudo-element selectors

It goes on to say that you can often do the calculation in base-10, but only if all columns have values less than 10.


In your examples, ids are not worth 100 points; each is worth [0, 1, 0, 0] points. Therefore, one id beats 15 classes because [0, 1, 0, 0] is greater than [0, 0, 15, 0] in a high-base number system.

Back in the 90's I used to develop websites using Cold Fusion. We also still used tables for most of our page layout, hehe.

I just started getting back into website development again seriously. I'm getting a pretty good handle on the basics with CSS and starting to add Javascript. I'm guessing that I will eventually add PHP as a modern replacement to my CF skills.

Right now I am using an old copy of Cold Fusion studio for my editor and of course Photoshop for my graphics. I have also discovered Firebug and found it to be very helpful.

I was wondering if the community here could give me some pointers as I start back out in this field. Do you have any software suggestions? A new editor I should use? Other debugging tools? Languages you would recommend?

Any comments or ideas that would help a website developer who is starting out would be greatly appreciated. Thanx!

For CSS I would recommend reading CSS Mastery for a nice overview including browser differences / bugs.

As far as the software is concerned, I still use Dreamweaver for my old, template based sites, but I´m moving to NetBeans for my new sites. Apart from all the expected features, NetBeans has nice ftp integration, one of the reasons I started using Dreamweaver years ago.

How should we make 6 column layouts with css without tables and one layer above and one layer in buttom? (with floats ? i try without success)

Thanks

Here is a simple three-column layout with a header and a footer:

<!DOCTYPE html>
<html>
<head>
<title>Column Layout</title>
<style type="text/css">
.column {
  width: 33%;
  border: 1px solid gray;
  float: left;
}

#footer {
  clear: both;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div class="column one">
Column 1
</div>
<div class="column two">
Column 2 I am the very model of a modern major general.
</div>
<div class="column three">
Column 3
</div>
<div id="footer">Footer</div>
</body>
</html>

By floating the columns they appear next to each other. By using clear: both for the footer it sits below the columns.

In recent browsers you can implement columns much more simply using CSS3 multi-column layout.

If you want to vary the number of columns from three to six depending on the available space, you could try using a media query. Like multi-column layout, media queries are a relatively new feature. If you want to achieve this in older browsers, you will need to use JavaScript (or use floats very creatively.)

For a more detailed discussion of cross-browser multi-column layouts, I highly recommend CSS Mastery: Advanced Web Standards Solutions. It is a great book.

Let me begin this topic by explaining my background experience with web design. I have always been more of a back end programmer, with PHP and SQL and things. However I do have a shallow background with HTML and CSS. The problem is, I don't know it all. What I do know is, when it comes to designing (not back end dirty work) I understand basic CSS properties and I also understand HTML and I can usually throw together a sloppy web page with the two and a couple bazillion DIV tags.

Anyways..

The problem I always have encountered is that when I design a website in a browser such as IE7 (and then it looks perfect on IE7), and then look at it on IE8 or IE6 or Mozilla (etc.) it gets all spacey and ugly and looks totally different than the way it should look on IE7.

Question one:

Basically, what I am asking everyone is what route should I take to learn how to properly build the website? Build as in put it togehter with CSS standards and HTML standards that will make my site look the same on every brwoser. (Not only learning standards but where can I learn to properly write my code?) Where is a strong free resource I can use to learn how to these things?

Question two:

How do I properly code my website? Do I use all external style sheets to make dynamic page design simplistic or do I hard code some things into the DIV tags on each page? What is proper?

Oh, and if anyone has any tutorials on how to properly design a complete layout feel free to throw it in a response somewhere.

Thank you for taking the time to read my questions, and hopefully you will understand what I am trying to get out to everyone. I need to get on the right route of the designing side of web programming so that I will know how to create successful websites in the future.

Thank you, Sam Pardee

There are TOO many site out there that have really great tutorials for HTML and CSS. They will give you all of the information you are asking for. I would start doing some reading of the great gurus of HTML/CSS:

Simon Collison
Andy Budd
Molly Holschzag
Dan Cederholm
Jason Santa Maria
Eric Meyer
Jeffrey Zeldman
Cameron Moll

Any book or article you can fond from these folks will steer you in the right direction; you can't go wrong!

As for sites that will give you the proper methods/concepts/training for web standards compliant sites:

http://www.w3schools.com/default.asp
http://www.webstandards.org/
http://www.smashingmagazine.com/
http://www.webdesignpractices.com/
http://www.designmeltdown.com/default.aspx
http://www.cameronmoll.com/
http://www.alistapart.com/
http://www.cssnewbie.com/
http://www.css3.com/
http://htmldog.com/
http://css-tricks.com/
http://simplebits.com/
http://www.colly.com/
http://glish.com/css/#tutorials
http://meyerweb.com/
http://jasonsantamaria.com/

The one of the best books I've bought so far to help with HTML and CSS coding PROPERLY is Beginning CSS Web Development by Simon Collison. Great, easy to understand, and not too slow. Great examples to follow along. After that, buy CSS Mastery - Advanced Web Standards Solutions, also by Simon Collison, and Andy Budd and Cameron Moll. This book gets you up to speed with some advanced techniques that you'll see on the many of the web sites right now, some of which were invented by the authors.

I am interested in learning about designing web pages. I have developed ASP.NET applications but so far the UI for the applications i.e. the various controls and their layout have already been designed by someone else and I have had to work on the server side part of the application only.

Now I am looking for good books to learn about designing the web pages themselves, to sink my teeth into html and css.

Looking for books which start with the basics but tackle the advance concepts too. Also any good advanced books will also be appreciated which i can start reading after I have finished with the basic ones.

Thanks

For someone not completely new to web design/dev:

CSS Mastery: Advanced Web Standards Solutions

This book helped me understand concepts more than code (CSS/HTML is rather easy to read and pickup)

Not javascript related,but only with pure css.

I really need a book to teach me how to beautify the web UI badly!

I own The Zen of CSS Design, a great book:

A design is a very important part of a web site. But making a layout cross browser compatible is very tough task.

What is the easiest way for this?

I actually think it´s not that big of a problem. A very good starting point: CSS Mastery

I'm reading the book: CSS Mastery: Advanced Web Standards Solutions, and finding the css code inside is almost writed in this format:

elementName#idName   
elementName.className

but, I'm used to write code ignoring element name with this format:

 #idName   
.className

so, I want to figure out what difference is between the two format.

Actually, I understand when should use type.class. And, I just want to find out the impact when I use type.class insead of only using .class when there is only one kind of tag here.

There must be some impact on performance.

The following example is identical in almost all browsers including IE6:

http://jsbin.com/adica3

#one  {border : 1px solid red;padding:20px}
#two  {border : 1px solid yellow}
p     {border: 1px solid blue;}
.marg {margin: 0;padding: 0}
.padd {margin:  20px}
</style>
</head>
<body>

<div id="one">
  <p class="marg">Padding to div</p>

</div>

<div id="two">
  <p class="padd">margin tp P</p>

</div>

But when I give width to div then second div becomes shorter then first div.

How we should decide which is appropriate?

What browser compatibility issues should I know about?

Margins are on the exterior, paddings on the interior relative to the border. So obviously if you have something like a background image and text, and you want the text to have space between the edge of the bg image you'd use padding. Same thing with borders.

If you wanted space on the outside in addition to space between the border/bg images then you'd use margins.

If you're not doing anything remotely design-complex then it shouldn't really matter, but one thing you should look out for is margin collapsing, if you have elements coming before/after with vertical margins and you specify margins the values will collapse, sometimes you'd use padding to navigate around that.

If you give #one and #two a width of 200px, #one will take up 240 pixels without counting the horizontal borders, since it has 20px of padding horizontally.

IE5's rendering engine and quirks mode IE6/IE7 incorrectly draw the correct amount of space if you specify horizontal padding and a width, width:100px; padding:20px; would force the box to actually take up 100 pixels of width, instead of actually being 140 pixels as it should correctly be.

Another bug to note is the double margin bug; if you have a floated element and a margin that's in the same exact direction as the float, eg float:left;margin-left:100px; it accidentally doubles up. This is fixed by adding display:inline; which forces it to just have 100px instead of 200px to the left.

I notice that you ask a lot of questions which would be answered by simply reading a decent front end book - have you considered reading:

Those would probably answer a lot of your questions...