__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

{code ()}
<HTML>
<HEAD>
<style type="text/css">
B.headline {color:red; font-size:22px; font-family:arial; text-decoration:underline}
</style>
</HEAD>

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

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

This means that if the <b><b/> tag is used alone (line 11 above) no CSS style information is employed.
Whereas if the <b><b/> 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 <HEAD> area in between style tags as below.

{code()}
<HEAD>
<STYLE type="text/css">
CSS selectors
</STYLE>
</HEAD>
{code}

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:

{code()}
<HTML>
<HEAD>
<style type="text/css">
B {font-family:arial; font-size:14px; color:red}
</style>
</HEAD>
<BODY>
<b>This is our customised bold HTML tag style</b>
</BODY>
<HTML>
{code}

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

---

===Class selectors===

Syntax:

.ClassSelector{Property:Value;}

Example:

{code()}
<HTML>
<HEAD>
<style type="text/css">
.headline {font-family:arial; font-size:14px; color:red}
</style>
</HEAD>
<BODY>
<b class="headline">This is a bold HTML tag style with the headline style</b>
<br>
<i class="headline">This is an italics HTML tag style with the headline style</i>
</BODY>
<HTML>
{code}

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 <SPAN> and <DIV>.
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:

First<SPAN>Second</SPAN>Third

results in:

FirstSecondThird


First<DIV>Second</DIV>Third

results in:

First
Second
Third

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

---

===ID selectors===

Syntax:

#IDSelector{Property:Value; Property:Value;}

Example:

{code()}
<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>
{code}

---

===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:

<i><b>example</b></i>

but not here:

<b>example</b>

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.

Page History
Date/CommentUserIPVersion
04 Apr 2006 (08:37 UTC)
changed code blocks to show up correct
Marko Weltzer84.189.231.1467
Current • Source
thegent198.54.202.2346
View • Compare • Difference • Source
xing194.152.164.455
View • Compare • Difference • Source
xing194.152.164.454
View • Compare • Difference • Source
xing194.152.164.453
View • Compare • Difference • Source
xing194.152.164.452
View • Compare • Difference • Source
thegent198.54.202.2261
View • Compare • Difference • Source