CSS STYLING with classes

**NB. To change any styling, you need to do this in 3 steps:

1) create a CSS class in the “appearance–>Edit CSS  Stylesheet editor.

eg I have added a new class called “accent” to the stylesheet:

.accent {
color: red;
font-weight: bold;
}

2) Then I went to the curriculum page, opened a text box with “Foundation Classes” title, and edited it under the ‘text” NOT “visual” tab so it looks like this:

original: <h3>Foundation Classes</h3>

after adding class: <h3 class=”accent”>Foundation Classes</h3>

3) then iI added the class “accent” –without quotes to the CSS box in the text editor at the bottom (this step may be optional).

Voila–now I have a standard way to add the same color to ANY title on the website–and if I suddenly wan tot change that to green, I can just change the stylesheet once and ALL instances of “accent” will change from red to green.  This is the power and coherence of CSS.

 

Leave a Reply