Above is the starting point page as seen in a browser.
- There are three ways to add style to a web page.
- Internal Style Sheet - Style rules can be added to the Head of a web page, within the Style Element.
- External Style Sheets - One, or more, external Style Sheets can be used by a web page by linking to them with the Link element within the Head of the document.
- Inline Style - Style rules may be added within the text of a web page. This method of adding style lacks centralized control, therefore its use is discouraged.
- Add an Internal Style element to the Head of the document. Create a new line after the character set meta tag on line 5. Open the XHTML Cliptext page, scroll to the Internal Style Block section and copy the red source code. Return to Geany and paste the code on the empty line.
Style rules will be placed on lines between the Style start and end tags (starting at line 7). - We can apply style rules directly to Elements. Our first rule will apply to the body element, which means that the rule will apply to the entire page. The font family will be set with a preferential list of font options. If the first font is not available to the browser, then the second option will be considered, etc.. The last option should be a generic font. On the blank line, line 7, type the name of the selector, in this case "body" followed by left and right curly braces { }. The curly braces may be on the same line or on separate lines.
- The style properties and values go between the curly braces. Open the Style CSS Cliptext page, scroll to font-family and copy the red source code.Paste the code between the curly braces and add a comma separated list of fonts.
In this example the fonts are: arial, helvetica, sans-serif
If a font name contains white space (a space), then the name must be quoted, eg. "comic sans MS".
Here is the browser view of the page showing the font change (See the starting point at the top of the page for comparison. Use the browser Back button to return to this spot.)
- To center the heading we will use a "class" selector. Class selector rules start with a dot followed by the class name, so in this case we assign a class name of "c" and the class selector is ".c", see line 8. Note that in this example the curly braces are on separate lines.
The property name is text-align and the value is "center." Note that the class name "c" (The dot is not included.) is added to the class attribute of the H1 element (Line 14).
Here is how it looks in a browser.
- Next let's make "Ajo Unified School District" in the opening of the paragraph bold and red. The class will have two properties, color and font-weight, which must be separated by a semi-colon.
Read more about color notation.
Note that we used the Span element to enclose "Ajo Unified School District", and that the class attribute was given the value of "ausd", which is the class name we created in the Style Sheet.
Here is how it looks in a browser.
- Here is the complete source code.
