|
|
 |
CSS Styles: Hands-On
Redefine an HTML
tag with CSS and create your common style sheet:
- Click the new style icon and set the options to redefine an
HTML tag.
- Select the heading one HTML tag
<h1> from
the pulldown menu.
- Indicate the style should be saved to a new style sheet file.
Click OK.
- In the operating system file menu, navigate to your web site's
home folder and save your style sheet file with a .css file extension.
Click Save.
- Now back to your style definition box, select the formatting
for you
<h1> headings. Click OK.
- Return to your document and preview to see your new style. Edit
your style as necessary.
- Create new redefined HTML styles for your other headings (
<h2>,
<h3>, and <h4> as well as
your paragraph tag <p>).
- Open another document on your site and attach your common style
sheet to that document.
Creating custom
styles and using CSS Selectors:
- Create a new custom style to apply to the course codes on your
course listings pages.
- Name your style and save the style definition in the common
style sheet you already created.
- Play around with the font properties in the style definition
dialogue box.
- Save your custom style and apply it on your page. Open another
page, attach your style sheet if necessary, and apply your custom
style there as well.
- Edit your custom style and save the new style changes. Note
your styles are updated on both pages where you have applied the
style.
- Now create a new style using the CSS Selector for a:link. Again,
save this style into your common style sheet you've already created.
- Specify your font attributes in the style definition dialogue
box and save.
- View your page in a web browser to see how your link text looks.
- If time permits, add a CSS Select for a:hover, repeat steps
7 and 8, and preview your page in a web browser. The style definition
you specified for a:hover is how your text links will look only
when the mouse is hovering over the link text.
|
