The Brave Programmer - Blogging and coding
Not for the faint hearted
 

Blog Posts From The Brave Programmer

Minimize

Cascading Style Sheets (CSS) II - Selectors

Mar4

Written by:
2009/03/04 07:54 AM RssIcon

All CSS styles are made up of 3 parts: a selector, a property and a value. Selectors are the names that you give to your different styles, or the names of certain elements to style.

CSS selectors are a fundamental part of CSS. Selectors define which HTML elements you are going to be manipulating or styling with CSS code. In essence selectors are used to "select" the elements on an HTML page that are affected by rules.

What is  a rule or a "Rule Set"? A rule or "rule set" is a CSS statement that tells the browser how it should render or display particular elements on a HTML page. A rule set has a particular syntax consisting  of a selector followed by a declaration block. In my Basic CSS introduction, we got a glimpse of the rule set.

  • Selector:  This Defines which HTML tags are going to be affected or styled by the CSS rule. To change the style of all your H1 tags you can write h1 {property:value}.
  • Property:  This is the CSS style you wish to apply. To change the color of all your H1 tage you would write p {color:value}.
  • Value:  This is the value of the property. If you want all your H1 tags to be red you would write p {color:red}

The selector consists of everything up to (but not including) the first left curly bracket. For example:

H1 { font-size: x-large; color: red }
table { color: red; background-color: yellow; }
p {border:5px solid red}

The are ten types of selectors Grouped into three main groups:

  • Type selectors
  • Class selectors
  • ID selectors
  • Descendant selectors
  • Child selectors
  • Universal selectors
  • Adjacent sibling selectors
  • Attribute selectors
  • Pseudo-classes
  • Pseudo-elements

These Selectors could be grouped or classed into three main groups would be:

  • HTML/Type selectors: Defining styles associated to HTML tags. This would relate to all selected tags
  • Class selectors: Defining a group of styles including plain HTML tags. Any HTML element that has a class attribute
  • ID selectors: Define styles of objects that have a unique ID

Today we will look at these main groups or classes of selectors.

Type Selector

The most widely used and probably easiest to understand are type selectors. Type selectors will select any and all HTML element on a page that matches the selector. for example, if you want all your H1 tags to be a certain Font, with a certain colour, and a certain size. Using a type selector can achieve this without having too style every H1 tag. example:

h1 { 
font-family:verdana,arial,sans-serif; 
color: red;
font-size: 20px; 
}

There many elements that you can select using type selectors, the full html list can be found at: Index of HTML Elements. This means that you can change the appearance of any or every element on your page using only type selectors

Class Selectors

Class selectors are used to select any HTML element that has a class attribute. When referring to a Class selector you simply add the class to an HTML tag with the syntax of  (class="name"). You would then reference that attribute in your CSS, with a property and value or multiple properties and values. Example:

<h1 class="myH1Class">

You would then have that class in your CSS like this perhaps:

.myH1Class { 
font-size: 110%; 
font-weight: bold; 
}

You can also combine type and class selectors. You can use class and type selectors together to be more specific about what you want to style

.myH1Class { 
font-size: 110%; 
font-weight: bold; 
}
p.myH1Class { 
font-size: 110%; 
font-weight: bold; 
}

- Affects only the P tag.

One of the most powerful aspects of class selectors is that you can apply multiple and different classes to one HTML element. For example, you may wish to use two rules on one particular element. Look at this example:

< p class="myH1Class indent">
.myH1Class { 
font-size: 110%; 
font-weight: bold; 
}
.indent  { 
padding-left: 5em;
}

ID Selectors

ID selectors are very similar to class selectors. They can be used to select any HTML element that has a particular ID attribute. The big difference is that ID's can only be applied once per page, you will get an error if you have duplicate ID's on your page, while classes can be used and declared as many times on a page as you want. ID Selectors are prefixed with the has # symbol. Example. These are most widely used in div elements:

<div id="layer1">
#layer1 {
position:absolute; 
left:10;
top:10; 
z-Index:0
}
#layer2 {
position:absolute; 
left:50;
top:50; 
z-Index:1
}

Next we will look at the rest of the different type of selectors. Until then Enjoy and happy Styling.

Related Reading:

Cascading Style Sheets (CSS) I -The Basics

Cascading Style Sheets - Selectors III

Cascading Style Sheets (CSS) - III - More Selectors

Cascading Style Sheets – Selectors IV – Pseudo-Classes.

Cascading Style Sheets - Pseudo Elements

Tags:
Categories:
blog comments powered by Disqus

2 comment(s) so far...


Gravatar

Re: Cascading Style Sheets (CSS) II - Selectors

Cool, thanks Robert. I enjoyed reading that, and learned something :)

By John Creed on  2009/03/04 05:14 PM
Gravatar

Re: Cascading Style Sheets (CSS) II - Selectors

Thanks John, Always a pleasure

By Robert Bravery on  2009/03/04 05:15 PM
 
Blog Updates Via E-mail
 Blog Updates Via E-mail
Minimize

Do you want to receive blog updates via e-mail. Then just click on the link below. You will be redirected to Google's feed burner, where you can fill out a form. Supplying your e-mail address.

The subscription is managed entirely by Google's Feedburner. We cannot and do not collect your email address.

Subscribe to The Brave Programmer by Email

Print  
 

 

Latest Comments
 Latest Comments
Minimize
Powered by Disqus

Sign up with Disqus to enjoy a  surprise box of features

Print  
 
Blog Roll
 Blog Roll
Minimize
Print  
 
Categories
 Categories
Minimize
Print  
 
<h1>Search Blogs From The Brave Programmer</h1>
 

Search Blogs From The Brave Programmer

Minimize
Print  
 
Archive
 Archive
Minimize
Archive
<July 2017>
SunMonTueWedThuFriSat
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345
Monthly
Go
Print  
 
<h1>News Feeds (RSS)</h1>
 

News Feeds (RSS)

Minimize
Print  
 

Follow robertbravery on Twitter

Blog Engage Blog Forum and Blogging Community, Free Blog Submissions and Blog Traffic, Blog Directory, Article Submissions, Blog Traffic

View Robert Bravery's profile on LinkedIn

Mybyte

 

Robert - Find me on Bloggers.com

Tags
 Tags
Minimize
Print  
 
Contact Us Now
 Contact Us Now
Minimize
 

Email  us now or call us on 082-413-1420,  to host your website.

We design and develop websites. We develop websites that make a difference. We do Dotnetnuke Module development.

Web Masters Around The World
Power By Ringsurf
Print