home | overview | schedule | assignments | regulations | exercises | links | archive | contact me

multimedia
355
authoring

English 355 - Advanced CSS.

You may have noticed by now that it's not always convenient to alter standard tags with CSS. For example, if you give the <p> tag some attributes in CSS, then every time you use the <p> tag it will look the same:

 

here's the CSS

here's the html

here's what it will look like
p {
font-weight: bold;
color: red;
}

<p>I like hubcaps</p>

<p>And beans</p>

I like hubcaps

And beans

 

But what if you want different paragraphs to be different colors? In this case, you have several options.
The first is to use an inline style declaration. In this case, you define the style inside the HTML tag. This method doesn't even require a style sheet!

 

here's the CSS

here's the html

here's what it will look like

 

<p style="font-weight: bold; color: red;">I like hubcaps</p>

<p style="font-weight: bold; color: blue;">And beans</p>

I like hubcaps

And beans

 

But what if you had two different types of text in several different places? Then you'd have to define that style in every single <p> tag.

The answer is to use what is called a class delaration. You can define all the properties of a class and then apply it to the <p> tag as you need it. You still have to specify every single <p> tag, but if you change the look, you only have to change it once, in the style sheet.

You define classes in the style sheet by giving them a name with a period in front. This could be any name you like, as long as it's consistent. Then, any time you want to use that class, you put it in the HTML document as a tag attribute, for example if you have a class named .boris in your style sheet, you would apply it in the HTML document by saying <p class="boris">.

 

here's the CSS

here's the html

here's what it will look like

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

.blue {
font-weight: bold;
color: blue;
}

<p class="red">I like hubcaps</p>

<p class="blue">And beans</p>

<p class="red">I like fire</p>

<p class="blue">And water</p>

I like hubcaps

And beans

I like fire

And water

 

Got it? Then let's go onto part two...
  wsu vancouver : digital technology + culture : burgess : 355 : exercises : css layout