|
|
|
|
|
To make this page I did a 'Save as' from the previous page. Before diving into css, I selected all the text I'd changed before and set it all back to 'none' or 'default' - this is mission-critical, the css won't work on top of other kinds of text formatting.
There's a way to remove all that stuff without plodding through every page, it's on this new Golive site by a very knowledgeable Adobe worker: http://www.afterhours.org.uk/qtips/find_elem.html (So why is that text at the top red ...? Read on). So first - internal or external style sheet? An internal one applies only to the page it's in, but an external one is much more useful, you can apply it to multiple pages. Internal is easier to explain though, so we'll start there.
|
||||||||
 and up popped this window. I want a new element - this is something that applies to the whole page. h1 (Header 1, that is) is part of html and browsers understand it. They will all make text in h1 tags (which is what Golive puts in for you when you choose Header 1) bigger and bolder and put some space underneath, but the exact effect depends on the browser, user preferences etc.... ... unless we make a rule about how h1 should appear on our page, using css.Let's do that: click the less-than-more-than icon shown by the arrow. |
|||||||||
 Here's how the inspector looks now. |
|||||||||
 I overtyped the word 'element' with h1 ...
... and then clicked the upper case F in the inspector to define my fonts for h1 - that's Header 1. |
|||||||||
 First the fontface - that's the icon by the arrow. |
|||||||||
 I've got a few to choose from, here's the result of my choice. To give yourself more choices, use Type - Font - Edit Font Sets from the top toolbar, with no pages open so your choices are available for the whole site. |
|||||||||
| Note there are 3 fonts listed - this means, if the person viewing the page doesn't have Verdana they will see Arial. If they don't have Arial, they are using an elderly Mac and will have Geneva, so that will show up. | |||||||||
 Now I choose pixels to set my font sizes - long story, lots of different opinions, but I find this most consistent across platforms and browsers. 14 seems reasonable for a heading, you might want to go bigger. |
|||||||||
| Finally, open the colour palette and drag a colour chip across to the box marked 'Color'. | |||||||||
 |
|||||||||
Here endeth the first lesson. We have set up an element, h1 or Header 1 - this means that you click your cursor in a paragraph, choose Header 1 from the dropdown at the top of the page and you get Verdana, 14 pixels, red. Header 1 covers a whole paragraph and everywhere you choose that on the page, here's what you get:
We set up our first internal style sheet!A word about fonts. Here I've used Century Gothic. I didn't set any back up fonts, so heaven only knows what you are seeing. It's probably still Times Roman or whatever you see elsewhere on the page ... unless you have Century Gothic installed. It's important to know that, even with cascading style sheets, no-one will see the font you choose unless they already have it installed on their own computer, that's why we set back-up choices of very common fonts. Don't want everyone who doesn't have your chosen font seeing Times Roman do we? At least I don't, ugly stuff. |
|||||||||
 |
|||||||||
First, I clicked the staircase-looking icon on the toolbar .......