 |
|||||||||
Cascading style sheets part 4 - more elements, and classes |
|||||||||
|
So far we have only added element styles to our internal style sheet - definitions that apply to the whole page. I've added p (for paragraph) and td (for text in cells) to cover all bases, and made them the same as body. So any text on the page should be Verdana, dark grey, 12 pixels and pretty much the same in any browser that supports css. Also, if we click in any paragraph and choose Header 1 from the dropdown, our h1 definition is waiting in the wings to display that paragraph red and 14 pixels. The style sheet has been written into the source code for us. If you look at the source code for this page, you'll see it in the head section - I've kept that section pretty empty so far so it's easy to see. |
|||||||||
|
 If you're following along with a page of your own, you can see if your css editor matches mine, and make it the same if it's not by adding those extra 2 elements:
The last three all have the same definition. A useful tip: if you are using body, p and td you can combine them into one. Rename one of them: body, p, td and ditch the two you now don't need. Now you can change one, change all. You can add div as well - if you centre a paragraph or some other way put content into div tags, your style will apply. If that's gobbledygook, don't worry, just add div anyway, can't hurt. Warning - I find when I combine elements, some may not show up properly in layout view. Don't panic, just preview in a browser to check they are all still there, and closing and re-opening the page seems to fix it (thanks, Nate). To delete element styles, just highlight the one you don't need and hit the trashcan icon in the css editor. |
||||||||
 Now to add a class to our style sheet. Click the icon like a dot: |
|||||||||
 ... and Golive names your new class for you. Very important - the name must start with a dot. If you used (or are using) Golive 4, you can use any name and not bother about the dot - GL4 tactfully put it in the code for us later without us needing to bother our pretty little heads.
GL5 and GL6 put it in, but you must be careful not to over-type it, it's more important than its size suggests. Apart from that, you can call your class whatever you like, but letters and numerals only, start with a letter not a numeral, and no spaces. That's NO slashes, brackets, or any other characters. |
|||||||||
 Here's the name of your new class in the inspector, here's where you rename it if you want to (very much recommended). Mind the dot! |
|||||||||
 I normally use a name that means something to me, later I might have several to choose from, and .wombat, .elvis or .ihatemicrosoft may not help me format my text in 6 months time when I come back to work on the site.
.. so here's a name I might choose. I'll keep .ihatemicrosoft for the next railway bridge I tag. |
|||||||||
 I've defined that class now - if you look carefully, you'll see the colour, size, fontface etc. I've decided on. |
|||||||||
 Now I'll stop panicking about why my inspector doesn't work, clicking the screenshot really doesn't help.... I'll select some text and look in the css palette (not the css editor we were using before, this is a tab like 'Objects' or 'Actions') - and there is my new class, offered as a choice.
|
|||||||||
| Here I've clicked Span to apply the class to just the text I've selected.
Span works the same as 'inline' in Golive 4 and 5. My Golive 6 manual tells me 'inline' is still there - it's not. Don't believe everything you read. |
|||||||||
| Now you can add more classes if you like, and try them out. Next ... external stylesheets. Then your feet will be well and truly wet and I'll provide some links to places to learn more. Onward ..... | |||||||||
|
|||||||||