{tab CSS comments}

{tab Linking CSS to HTML}

{tab CSS Selectors Notes}

{tab Margin Notes}

{tab Borders}

{tab Padding}

{/tabs}

 

Introduction to CSS Selectors - The complete CSS3 tutorial

 

Naming your selectors:

You make up the name and then you prefix it with a dot (.)

Basically, a selector name must begin with an underscore (_), a hyphen (-), or a letter (az) and then be followed by any number of hyphens, underscores, letters, or numbers.

Element selector:

The most basic type of selector is probably the one that simply targets an existing HTML element. For instance, you can target all paragraph elements (<p>) simply by writing the name of it in your stylesheet:.

Class selector:

A class selector looks just like an element selector, but instead of using names that are tied to the names of HTML elements, you make up the name and then you prefix it with a dot (.)

ID selector:

An ID selector looks just like a class selector, but instead of having a dot as the prefix, it uses the hash sign (#)

CSS ID selector should also be used only when you need to target one, specific and unique element on a page.

This is often used for main page elements, e.g. the tags that creates the structure of the page (menu, side box, main content and so on).

Grouping selectors:

Target more than one element at the same time, allowing you to specify the same properties and rules for more than one element at the same time - just separate the selector names with a comma.

 

Introduction to Advance Selectors - The complete CSS3 tutorial

Descendant Selector:

Descendant selector, which allows you to limit the targeted elements to the ones who are descendants of another element. The syntax is very simple - you simply write the parent(s), separate with a space, and then the actual element you want to target.

<style type="text/css">
p b
{
        color
: Blue;
}
</style>

<p>Hello, <b>world</b> - what a <b>beautiful</b> day!</p>

Hello,
<b>world</b> - what a <b>beautiful</b> day!

Child Selector

It allows you to target ALL children and grandchildren (and so on) of one or several elements. However, sometimes this can be TOO powerful - sometimes you only want to target the direct children of an element. Fortunately for us, CSS has a selector for this as well!

The syntax for using the direct child selector looks like this:

parent > child

<style type="text/css">
div
.highlighted > b {
        color
: Blue;
}
</style>

<div class="highlighted">
       
<b>Level 0...</b>
       
<div>
               
<b>Level 1...</b>
               
<div>
                       
<b>Level 2...</b>
               
</div>
       
</div>
       
<b>Level 0 again...</b>
</div>

You can add more requirements to the selector, both of the descendant and the child type.

 

<style type="text/css">
div
.highlighted > ul > li > a {
        color
: DarkOrange;
}
</style>

<div class="highlighted">
       
<ul>
               
<li><a href="#">List Link 1</a></li>
               
<li><a href="#">List Link 2</a></li>
               
<ul>
                       
<li><a href="#">List Link 2.1</a></li>
               
</ul>
               
<li><a href="#">List Link 3</a></li>
       
</ul>
</div>

 

Sibling Selector

With the general sibling CSS selector, which takes a selector, followed by a tilde character (~) and then the selector you wish to target, you can target elements by requiring the presence of another element within the same parent element. Another requirement is that the first part of the selector needs to be present in the markup BEFORE the targeted element, even though they are all children of the same parent.

<style type="text/css">
h2
~ p {
        font
-style: italic;
}
</style>

<div id="content">
       
<h1>Hello, world!</h1>
       
<p>Some text here</p>
       
<h2>Hello, world!</h2>
       
<p>Some text here</p>
       
<div>
               
<p>More text here</p>
       
</div>
</div>

Adjacent Sibling Selector

With the adjacent sibling selector, we have just specified that the first paragraph element after
all H2 elements should use italic text. If we had used the general sibling selector,
like we did in the previous chapter for an example much like this one,
all paragraph elements after the first H2 element would be targeted.
The syntax for the adjacent sibling selector is just as easy though,
as you can see - the two selector parts are simply joined by a plus character (+).

<style type="text/css">
div
#content h2.main + p {
        font
-style: italic;
        color
: Blue;
}
</style>

<div id="content">
       
<h1>Hello, world!</h1>
       
<p>Some text here</p>
       
<h2 class="main">Hello, world!</h2>
       
<p>Some text here</p>
       
<p>More text here</p>
       
<h2>Hello, world!</h2>
       
<p>Text here as well...</p>
</div>