A beginners guide to CSS selectors

How CSS selectors work with HTML

Created by: thegent, Last modification: 04 Apr 2006 (08:37 UTC) by Marko Weltzer
Selectors

This is intended as a grounding in how CSS (Cascading Style Sheets) actually work and how to use them.
The clever use of CSS in Bitweaver is far more complicated.
But dont be disheartened, I hope the following provides some idea of how it works.

Selectors are the names you give to your different styles.

Each selector has associated styles (font, color etc.)

The selectors are then refered to in your HTML to activate your CSS-defined styles.

For example


<?php
<HTML>
  <
HEAD>
    <
style type="text/css">
      
B.headline {color:redfont-size:22pxfont-family:arialtext-decoration:underline}
    </
style>
  </
HEAD>

  <
BODY>
    <
b>this is normal bold</b><br>
    <
class="headline">This is headline style bold</b>
  </
BODY>
</
HTML>
?>


In the example above, the selector is B.headline
B as in the HTML tag
.headline is the class associated with the B HTML tag

This means that if the tag is used alone (line 11 above) no CSS style information is employed.
Whereas if the has the class="headline" associated with it (line 12 above) then the associated B.headline CSS style is employed.

copy and paste the above example onto a blank page in notepad and save as an html, then view it in your browser.



For CSS to work in one single page it must be placed in the correct place.
It must be placed in the area in between style tags as below.


<?php
<HEAD>
   <
STYLE type="text/css">
      
CSS selectors
   
</STYLE>
</
HEAD>
?>


There are three types of selectors:

HTML tag selectors
defines styling for existing HTML tags.

Class selectors
defines styling without affecting existing HTML tags.

ID selectors
defines styling to objects with a user given unique ID



HTML tag selectors

Syntax:

HTMLtagselector{Property:Value; Property:Value;}

Example:


<?php
<HTML>
   <
HEAD>
      <
style type="text/css">
         
{font-family:arialfont-size:14pxcolor:red}
      </
style>
   </
HEAD>
   <
BODY>
      <
b>This is our customised bold HTML tag style</b>
   </
BODY>
<
HTML>
?>


We have essentially altered the BOLD HTML tag for this whole page.



Class selectors

Syntax:

.ClassSelector{Property:Value;}

Example:


<?php
<HTML>
   <
HEAD>
      <
style type="text/css">
         .
headline {font-family:arialfont-size:14pxcolor:red}
      </
style>
   </
HEAD>
   <
BODY>
      <
class="headline">This is a bold HTML tag style with the headline style</b>
      <
br>
      <
class="headline">This is an italics HTML tag style with the headline style</i>
   </
BODY>
<
HTML>
?>


This time we have created a "headline" class that can apply a certain style to any existing HTML tag.

Two very useful HTML tags to use with CSS are and
.
They in themselves provide absolutely no styling at all which makes them excellent carriers for CLASS selectors.

There is a subtle difference between them though, as follows:

FirstSecondThird

results in:

FirstSecondThird

First
Second
Third

results in:

First
Second
Third

That is, does not automatically include
tags before and after, whereas
does.
They both accept the CLASS selector though.
tags can be used inside
areas to pick out certain words or phrases.



ID selectors

Syntax:

  1. IDSelector{Property:Value; Property:Value;}

Example:


<?php
<HTML>
   <
HEAD>
      <
style type="text/css">
         
#Layer1 {position:absolute; left:100;top:100; z-Index:0}
         #Layer2 {position:absolute; left:140;top:140; z-Index:1}
      
</style>
   </
HEAD>
   <
BODY>
      <
DIV ID="layer1">
         <
table border="1" bgcolor="#FFCC00">
            <
tr>
               <
td>This is layer1<br>positioned at 100,100</td>
            </
tr>
         </
table>
      </
DIV>
      <
DIV ID="layer2">
         <
table border="1" bgcolor="#00CCFF">
            <
tr>
               <
td>This is layer2<br>positioned at 140,140</td>
            </
tr>
         </
table>
      </
DIV>
   </
BODY>
<
HTML>
?>




Grouped Selectors

Often selectors will contain a common set of property:values, these can be combined/grouped to make for much easier coding.

Example, without grouping:

.headlines{
font-family:arial; color:black; background:yellow; font-size:14pt;
}

.sublines{
font-family:arial; color:black; background:yellow; font-size:12pt;
}

.infotext{
font-family:arial; color:black; background:yellow; font-size:10pt;
}

The only property that varies in font-size.
These three CLASS styles can be written as follows:

.headlines, .sublines, .infotext {font-family:arial; color:black; background:yellow;}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size:10pt;}

Note there are two instances of each CLASS. They both contain different property:value settings. Therefore when the style is read it takes the first set of properties and adds the second on the end, reconstructing properties as they are in the un-grouped examples.



Context Dependant Selectors

You can create "IF YES THEN DO THIS" selectors

i.e. you could specify a style to be active here:

example

but not here:

example

Syntax:

A normal style to the BOLD tag
B {font-size:16px;}

Adding the context switch
I B {font-size:16px;}

Note the space between the context switch I and the selector B

In the second case the new BOLD tag style will only be used if the Bold tag is enclosed inside ITALIC tags.

</span>
</span>
</span>

Comments

by dspt, 05 Apr 2006 (09:03 UTC)
bw is using xhtml 1.0 strict, so the tags should be all in lowercase. mind this if you need a compilant code. the selectors are case-sensitive, as far as I know.
the explanation about the difference between the span and div is somewhat oversimplified. I recommend reading some text about "normal flow" of content for deeper understanding of positioning

css font

by sezer, 27 Jun 2008 (16:49 UTC)
css Font examples , Properties , Attribute - - //
http://www.css-lessons.ucoz.com/font-css-examples.htm
  Page 1 of 1  1