History of A beginners guide to CSS selectors
Version 2 | Current version | |
---|---|---|
This is our customised bold HTML tag style | 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
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.
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:
We have essentially altered the BOLD HTML tag for this whole page. Class selectors Syntax: .ClassSelector{Property:Value;} Example:
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 . </span>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 Thirdresults in: First Second Third That is, does not automatically include tags before and after, whereas does. </span>They both accept the CLASS selector though. tags can be used inside areas to pick out certain words or phrases. </span>ID selectors Syntax:
Example:
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. |