Css Mastery - Part1

Today i started reading Css Mastery book By Andy Budd.

Currently i am having system problems which prevents me to continue reading ruby book.

I wanted to share few important qoutations from this book from the first 3 chapters.

1) When writing class and ID names, you need to pay attention to case sensitivity. CSS is generally a case-insensitive language.

2) Many people mistakenly believe that a div element has no semantic meaning. However, div actually stands for division and provides a way of dividing a document into meaningful areas.

3) Using too many divs is often described as divitus and is usually a sign that your code is poorly structured and overly complicated.

4) Common selectors

The most common kinds of selectors are type and descendant selectors. Type selectors are used to target a particular type of element, such as a paragraph, an anchor, or a heading element. You do this by simply specifying the name of the element you wish to style. Type selectors are sometimes also referred to as element or simple selectors.

p {color: black;}
a {text-decoration: underline;}
h1 {font-weight: bold;}

Descendant selectors allow you to target the descendants of a particular element or group of elements. A descendant selector is indicated by a space between two other selectors. In this example, only anchor elements that are descendants of a list item will be styled, so anchors within a paragraph will be unaffected.

li a {text-decoration: none;}

5) These two types of selector are great for applying generic styles that apply across the board. To be more specific and target selected elements, you can use ID and class selectors. As the names suggest, these selectors will target elements with the corresponding ID or class name. ID selectors are identified using a hash character; class selectors are identified with a period. The first rule in this example will make the text in the introductory
paragraph bold, and the second rule will make the date green:

#intro {font-weight: bold;}
.datePosted {color: green;}

Some Text

24/3/2006

6) Many CSS authors develop an overreliance on class and, to a lesser extent, ID selectors. If they want to style headlines one way in the main content area and another way in the secondary content area, there is the tendency to create two classes and apply a class to each headline. A much simpler approach is to use a combination of
type, descendant, ID, and/or class selectors:

#mainContent h1 {font-size: 1.8em;}
#secondaryContent h1 {font-size: 1.2em;}

Welcome to my site

...

Latest news

...

7) Pseudo-classes

There are instances where you may want to style an element based on something other than the structure of the document—for instance, the state of a form element or link. This can be done using a pseudo-class selector.

/* makes all unvisited links blue */
a:link {color:blue;}
CSS MASTERY: ADVANCED WEB STANDARDS SOLUTIONS
12
/* makes all visited links green */
a:visited {color:green;}
/* makes links red when hovered or activated */
a:hover, a:active {color:red;}
/* makes table rows red when hovered over */
tr:hover {background-color: red;}
/* makes input elements yellow when focus is applied */
input:focus {background-color:yellow;}

:link and :visited are known as link pseudo-classes and can only be applied to anchor elements. :hover, :active, and :focus are known as dynamic pseudo-classes and can theoretically be applied to any element. Unfortunately, only a few modern browsers such as Firefox support this functionality. IE 6 and below only pays attention to :active and
:hover selectors if applied to an anchor link, and ignores :focus completely.

8) The universal selector
The universal selector is possibly one of the most powerful and least used of all the selectors.The universal selector acts like a wildcard, matching all the available elements. Like wildcards in other languages, the universal selector is denoted by an asterisk. The universal selector is normally used to style every element on a page. For instance, you can remove the default browser padding and margin on every element using the following
rule:

* {
padding: 0;
margin: 0;
}

When combined with other selectors, the universal selector can be used to style all the descendants of a particular element, or skip a level of descendants.

9) Child and adjacent sibling selectors

The first of these advanced selectors is the child selector. Whereas a descendant selector will select all the descendants of an element, a child selector only targets the element’s immediate descendants, or “children.” In the following example, the list items in the outer list will be bold while list items in the nested list will remain unaffected:

#nav > li {font-weight: bold;}

• Home


• Services
  
  
  
  • Design
  
  
  • Development
  
  
  • Consultancy
  
  
  
  


• Contact Us

10) You may also want to style an element based on its proximity to another element. The adjacent sibling selector allows you to target an element that is preceded by another element that shares the same parent. Using the sibling selector, you could make the first paragraph following a top-level heading bold, while leaving other paragraphs unaffected:

h1 + p {font-weight: bold;}

Main Heading

First Paragraph

Second Paragraph

11) If we want to align completly to the right side of the frame i thought below code is cool.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
@import url(Styleguide/css/final.css);
-->
</style>
</head>

<body>
<ul id="navigation"><li><a href="#1.0">1.0 Coding Standards</a>
<ul>
<li><a href="#1.1">1.1 Validation</a></li>
<li><a href="#1.2">1.2 DOCTYPE Declaration</a></li>
<li><a href="#1.3">1.3 Accessibility</a></li>
</ul>
</li>
<li><a href="#">2.0 Styles
</a>
</ul>
</body>
</html>

final.css

#navigation {
  position: absolute;
  margin: 0 3%;
  width: 28%;
  top: 8em;
  right: 0;
}

12) The box model is one of the cornerstones of CSS and dictates how elements are displayed and, to a certain extent, how they interact with each other. Every element on the page is considered to be a rectangular box made up of the element’s content, padding, border,and margin.

Padding is applied around the content area. If you add a background to an element, it will be applied to the area formed by the content and padding. As such, padding is often used to create a gutter around content so that it does not appear flush to the side of the background. Adding a border applies a line to the outside of the padded area. These lines come in various styles such as solid, dashed, or dotted. Outside the border is a margin.
Margins are transparent and cannot be seen. They are generally used to control the spacing between elements.

13) Margin collapsing
Margin collapsing is a relatively simple concept. In practice, however, it can cause a lot of confusion when you’re laying out a web page. Put simply, when two or more vertical margins meet, they will collapse to form a single margin. The height of this margin will equal the height of the larger of the two collapsed margins.

14) Relative positioning

Relative positioning is a fairly easy concept to grasp. If you relatively position an element,it will stay exactly where it is. You can then shift the element “relative” to its starting point by setting a vertical or horizontal position. If you set the top position to be 20 pixels, the box will appear 20 pixels below the top of its original position. Setting the left position to 20 pixels will create a 20-pixel space on the left of the element, moving the element to the right.

#myBox {
position: relative;
left: 20px;
top: 20px;
}

15) Absolute positioning

Relative positioning is actually considered part of the normal flow positioning model, as the position of the element is relative to its position in the normal flow. By contrast,absolute positioning takes the element out of the flow of the document, thus taking up no space. Other elements in the normal flow of the document will act as though the absolutely positioned element was never there.

16) Positioning an absolutely positioned element in relation to its nearest positioned ancestor
allows you to do some very interesting things. For instance, say you wanted to align a paragraph
of text at the bottom right of a large box. You could simply give the container box a
relative position and then absolutely position the paragraph in relation to this box:

<html>
<head>
<style type="text/css">
#branding {
width: 700px;
height: 100px;
position: relative;
}
#branding .tel {
position: absolute;
right: 10px;
bottom: 10px;
text-align: right;
}
</style>
<body>
<div id="branding">
<p class="tel">Tel: 0845 838 6163</p>
</div>
</body>
</html>

17) Floating
The last positioning model is the float model. A floated box can either be shifted to the left or the right until its outer edge touches the edge of its containing box, or another floated box. Because floated boxes aren’t in the normal flow of the document, block boxes in the regular flow of the document behave as if the floated box wasn’t there.

<html>
<head>
<style>
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div class="news">
<img src="c:/prasanth/one.jpg" />
<p>Some text</p>
</div>
</body>
</html>

18) However, because the floated elements are taken out of the flow of the document, the wrapper div takes up no space. How do you visually get the wrapper to enclose the floated element? You need to apply a clear somewhere inside that element Unfortunately, no existing element is available that we can clear so you need to add an empty element and clear that.

<html>
<head>
<style>
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}

.clear {
clear: both;
}

</style>
</head>
<body>
<div class="news">
<img src="c:/prasanth/one.jpg" />
<p>Some text</p>
</div>
<div class="clear"></div>
great great great
great great great
</html>

Please play around with this example removing clear and observing what happens.

Instead of clearing the floated text and image, you could choose to float the container div as well:

.news {
background-color: gray;
border: solid 1px black;
float: left;
}

This site gives more details about this.

19) Flexible rounded-corner box

The previous examples will all expand vertically if you increase your font size. However,they do not expand horizontally as the width of the box has to be the same as the width of the top and bottom images. If you want to create a flexible box, you will need to take a slightly different approach. Instead of the top and bottom curves consisting of a single image, they need to be made up of two overlapping images

As the box increases in size, more of the larger image will be revealed, thus creating the illusion that the box is expanding. This concept is sometimes referred as the sliding doors technique because one image slides over the other, hiding it from view. More images are required for this method to work, so you will have to add a couple of extra, nonsemantic elements to your markup.

In this example we have set the width of the box in ems, so increasing the text size in your browser will cause the box to stretch.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Advanced Flexible Width Rounded Corner Box</title>
<style type="text/css">
<!--
/* pretty stuff
================================== */

body {
  font: 62.5%/1.6 "Gill Sans", Futura, "Lucida Grande", Geneva, sans-serif;
  color: #666;
  background: #fff;
}

h2 {
  font-size: 2.2em;
  font-weight: normal;
  line-height: 1;
  color: #94b767;
  margin: 0;
}

.box {
  font-size: 2em;
}

/* rounded corner box
================================== */

.box {
  width: 20em;
  background: url(images/bottom-left.gif) no-repeat left bottom;
}

.box-outer {
  background: url(images/bottom-right.gif) no-repeat right bottom;
  padding-bottom: 5%;
}

.box-inner {
  background: url(images/top-left.gif) no-repeat left top;
}

.box h2 {
  background: url(images/top-right.gif) no-repeat right top;
  padding-top: 5%;
}


.box h2, .box p {
  padding-left: 5%;
  padding-right: 5%;
}


-->
</style>
</head>

<body>
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.<p>
</div>
</div>
</div>
</body>
</html>

About the Authors

Andy Budd

Andy Budd is a user experience designer and web standards developer living and working in Brighton, England. As the creative director of web design consultancy Clearleft (www.clearleft.com), Andy enjoys building attractive, accessible, and standards-compliant websites. His online home can be found at www.andybudd.com, where he writes about modern web design practices.

Andy is a regular speaker at international design conferences, workshops,and training events, and organized the UK’s first web 2.0 conference (www.dconstruct.org). Passionate about the quality of education in the industry, Andy runs SkillSwap (www.skillswap.org), a free community training and networking project. Andy also helped set up the Web Standards Awards (www.webstandardsawards.com), a project that aims to recognize websites for their use of web standards. When he’s not building websites, Andy is a keen travel photographer. Never happier than when he’s diving some remote tropical atoll, Andy is also a qualified PADI dive instructor and retired shark wrangler.

Cameron Moll

Cameron Moll, recognized as one of the industry’s most balanced new media designers, is proficient in functional web design, elegant interfaces, and clean markup. Cameron has been involved in the design and redesign of scores of websites, and his influential techniques have found favor in circles across the Web. A marketing background and a keen eye for design lead him to merge form and function in the form of compelling visual experiences.

Cameron's work has been recognized by respected organizations and notable individuals such as National Public Radio (NPR), Communication Arts, and Veer. His personal site, CameronMoll.com, delivers design how-tos in the form of
engaging conversation, on-topic banter, and downloadable artwork source files.

Simon Collison

Simon Collison is Lead Web Developer at Agenzia (www.agenzia.co.uk), and has worked on numerous web projects for record labels,high-profile recording artists, and leading visual artists and illustrators,including The Libertines, Black Convoy, and Project Facade. Simon also oversees a production line of business, community, and voluntary sector websites, and passionately ensures everything he builds is accessible and usable, and complies with current web standards. Simon regularly reviews CSS-based websites for Stylegala, and does his best to keep his
highly popular blog (www.collylogic.com) updated with noise about web standards, music, film, travels, and more web standards.

On those rare occasions away from the computer, Simon can be found in the pub, or trying to con free gig tickets out of his clients. A little too obsessed with music, he is very likely to bore you with his latest musical Top 100, or give you a potted history of the UK indie scene from 1979 to the present day. Simon has lived in many cities, including London and Reykjavik, but now lives happily in Nottingham with Emma and a cat called Ziggy.