CSS Tutorials - Basic CSS Style Exercises

The aim of this tutorial is to demonstrate basic style rules for

Relative bookmarks links have also been applied to the webpage to demonstrate a simple means of HTML Navigation. Simply use the Navigation Menu below to be taken to the style rules for the HTML Property type. Click on the property within the body to return to this simple HTML Navigation Menu.

Header 1 | Header 2 | Header 3 | Paragraph | Division | Link

STYLES FOR H1

CSS works in a way which separates style rules from the HTML mark-up. Each HTML tag can have individual style rules determined with CSS.

 

STYLES FOR H2

The styles rules for the H2 tag in HTML here has a new basic set of style rules applied. These rules are declared in an external CSS stylesheet.

 

STYLES FOR H3

There are several methods to link a CSS style rule to an HTML tag. All HTML tags have ID and Class attributes. These can be referenced in CSS to uniqely identify CSS style rules for individual our group elements.

 

STYLES FOR PARAGRAPH

Group Elements in HTML can be referenced from a CSS Stylesheet by using the HTML tag in any statement. For example, if you wanted to target all the paragraph <p> elements in an HTML page, the CSS rule would look like this:

  1. p {
  2. color:#006699;
  3. }

 

STYLES FOR LINKS

Links are also HTML tags. Links also have the added complexity of various states. For example, when a mouse hovers over a link, CSS can trigger an event that modifies the look and feel of the link text or image.

visit this link to return to the homepage.
 CLICK HERE TO RETURN TO TOP

 

STYLES FOR DIV

CSS Style Rules can be applied to any HTML tag. Some quirks to consider with CSS style rules are how each browser may render the CSS rules differently based on browser defaults. In many cases, this can be fixed with the Golden CSS Reset (which resets all HTML elements to 0 so all browsers can start with a clean slate).