News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

CSS Tutorial – 10 – Colors

August 26th, 2009

In CSS, there are five different ways to specify a color.

Named and hexadecimal notations

The first two are the same as in HTML: named and hexadecimal colors.

h1 { color: red; }
h1 { color: #FF0000; }

Short hexadecimal notation

There is also a short hexadecimal notation. This notation can be converted to hexadecimal by duplicating each digit.

h1 { color: #F00; }

Functional notation

Then there is a functional notation where each red-green-blue intensity value can be specified as either a value between 0 and 255 or as a percentage.

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

CSS Tutorial – 09 – Specificity

August 26th, 2009

When several rules apply to the same element, and they have conflicting properties, there is a priority scheme to determine which rule is the dominant one. If the selectors are the same the property declared last will be the one that counts. Otherwise, the more specific one will win out.

p { color: orange; } /* overridden */
p { color: silver; } /* dominant */

To calculate the specificity there are some basic rules. The universal selector has the lowest specificity with the weight 0.

* { color: red; } /* 0 */

The element selectors have the weight 1.

p { color: blue; } /* 1 */

So a selector containing two element selectors will have a specificity of 2.

body p { color: gold; } /* 2 */

A class selector has the weight 10 and so does pseudo classes and attribute selectors. Because they also include an element selector they will have a total weight of 11. The pseudo elements do not count for any specificity, according to the CSS specification.

.a { color: lime; } /* 10 */
p:first-child { color: navy; } /* 11 */
p[class=a] { color: teal; } /* 11 */

ID selectors have a weight of 100.

#i { color: aqua; } /* 100 */

Inline styles have a weight of 1000.

<p style="color: black; /* 1000 */">Text</p>

To override all other conflicting rules a rule can be declared as !important.

p { color: red !important; }

Note that the actual weight of attribute selectors, pseudo element, and classes varies slightly between different browsers.

CSS Tutorial – 08 – Other Selectors

August 26th, 2009

Inheritance

Inheritance makes certain styles apply not only to the specified element, but also to all elements inside of it. For example, the color property will be inherited, while the border property will not. This is usually the intended behavior, making inheritance very intuitive. A property can also be given the value “inherit” to use the same value as the parent element has for that property.

p { border: inherit; }

Hierarchy

An HTML document can be thought of as a tree with the <html> element as the root. Each element fits somewhere on this tree and every element is either a parent or a child of another element. Any element above another one is called an ancestor and the element directly above is the parent. Similarly, an element below another one is called a descendant and the one directly below is a child.

Adjacent selector

The adjacent selector selects an element if it comes directly after another element.

/* Selects paragraphs that come after other paragraphs */
p+p { color: red; }

Descendent selector

The descendent selector matches an element if it is the child or grandchild of another element.

/* Selects paragraphs descending from body */
body p { background: gray; }

Direct child selector

The direct child selector selects only elements that are the immediate children of another element.

/* Selects paragraphs that have div as their parent */
div > p { text-align: center; }

Universal selector

The universal selector (*) matches all elements in the document.

/* Selects all elements */
* { text-transform: uppercase; }

CSS Tutorial – 07 – Pseudo Selectors

August 26th, 2009

The pseudo classes and elements can be appended onto other selectors in order to make them more specific. They are all preceded by a colon.

Pseudo classes

The first two – :link and :visited – can only be applied to the anchor element. :link will match links that haven’t been viewed and :visited will match links that have been viewed.

a:link
a:visited

A selector with the :hover pseudo class is applied when the mouse pointer hovers over the selected element. Similarly, :active matches elements as they are being activated, for example by a mouse click. For :hover to work it must come after :link and :visited, and for :active to work it must come after :hover.

a:hover
a:active

:focus can be used on elements that can receive focus, such as the input element. However, this pseudo-class won’t work in Internet Explorer 7 and earlier versions. The difference between :active and :focus is that :active will only last for the duration of the click while :focus lasts until the element loses focus.

input:focus

:first-child matches an element if it is the first child of the parent element.

a:first-child

In the example below the selector above would apply to the first anchor element.

<p>
  <a> name="first"</a>
  <a> name="second"</a>
</p>

The last pseudo class is :lang followed by a language parameter.

p:lang(en)

This pseudo class will apply only to elements that are set to the specified language using the generic lang attribute.

<p lang="en"></p>

Pseudo elements

The first two pseudo elements – :first-letter and :first-line – can apply styles to the first letter and the first line of an element. They only work on block-level elements such as paragraphs.

p:first-letter
p:first-line

The last two pseudo elements – :before and :after – can insert content before and after an element using the content property.

p:before { content:"Before"; }
p:after  { content:"After"; }

CSS Tutorial – 06 – Attribute Selectors

August 26th, 2009

With the attribute selectors style can be added to elements based on their attributes. Elements can be matched either by their attribute alone, by attribute and value, by attribute with a value in a space separated list, or by attribute with a value in the beginning of a hyphen separated list.

Attribute value selector

This first selector will match only the input elements that use the type attribute.

input[type] {}

Attribute and value selector

The second selector will match by both attribute and value. The example below will select input elements that have their type attribute set to submit.

input[type="submit"] {}

Attribute value substring selector

The third selector will apply to elements whose attribute’s value contains a specific string separated by spaces.

input[value~="Example"] {}

For example, the rule above will apply to the following element.

<input type="text" value="Example text" />

Attribute language value selector

The last attribute selector is mainly used to match the language attribute.

[lang|="en"] {}

The example above selects the elements whose lang attribute’s value has a hyphen-separated list of values beginning with “en”, as with “en-US”.

<p lang="en-US">In America</p>

CSS Tutorial – 05 – Class & Id Selectors

August 26th, 2009

Class and id selectors can define different styles for the same type of HTML element.

Class selectors

The class selector is recognized by the period sign (.) followed by a class name. The class can either be a general class that can be applied to any element or a specific class that can only be applied to one type of element. The specific class is defined by declaring the element’s name before the period sign.

/* Selects all elements with class="myclass" */
.myclass
 
/* Selects all <p> elements with class="myclass" */
p.myclass

To use a class rule the elements in the document that it will apply to must be specified. This is done using the class attribute with its value set to the class name.

<p class="myclass">

Class example

Say for example that the text inside of some elements should be colored, but not for all instances of the elements. The first step then is to add a general class rule with a color property specified.

.info { color: green; }

This rule says that any element whose class attribute has the value of “info” will have this style.

<p class="info">Paragraph</p>

If a class rule will only be used by a single element type it should instead be defined as a specific class, also called subclass. This makes it easier to understand where the style is used for anyone reading the style sheet.

p.warn { color: orange; }

A subclass rule is applied to the document in the same way as the class rule, but it can only be applied to elements of the specified type.

<p class="warn">Paragraph</p>

Note that more than one class rule can be applied to a single element by separating each class name with a space.

<p class="style1 style2">Paragraph</p>

Id selector

The id selector works much like the class selector, but uses a pound sign instead of a period and the id attribute instead of the class attribute. Both id and class are generic attributes that can be applied to almost all HTML elements.

/* Selects the element that has id="myid" */
#myid
 
/* Selects the <p> element that has id="myid" */
p#myid

The id rule is applied to an element using the id attribute. Since the id attribute needs to be unique, each id selector can only be used on one element per document. Therefore, the id selector implicitly specifies that the style is only used once on every page.

<p id="myid">Paragraph</p>

Id example

The id selector below will match the one and only element in the document whose id attribute is set to that id. This selector should therefore be used instead of the class selector if a style is intended only to be applied to a single element instance, since this makes it clearer where the rule is used.

#err { color: red; }

The id rule is applied using the id attribute.

<p id="err">Paragraph</p>

Span and div elements

The <span> and <div> elements are especially well suited to work with the class and id selectors. These elements are generic ways of adding structure to a document and they have no styles associated with them. The difference between the two is that <span> is an inline element and <div> is a block element.

<span class="a">Inline</span>
<div class="b">Block</div>
  1. 1
  2. ...
  3. 28
  4. 29
  5. 30
  6. 31
  7. 32
  8. ...
  9. 37
Ads