HTML CSS IMAGES LINKS
 
CSS → Terminology

CSS code declares rules. Each rule has a selector followed by a declaration. The declaration consists of a property followed by an assigned value.

Let's take a look at a simple embeded style sheet.

<head>
<style type="text/css">
p {
font-family: sans-serif;
color: #000;
font-size: 18px;
 }
 </style>
<title>HTML Web Construction</title>
</head>

In the above example we have declared a rule for the <p> tag. This rule will effect the contents of any such tag that appears in the HTML code. The selector for this tag is the letter P, reflecting its association with <p> tag.


{

Between the curly braces we place the various properties of the rule, each followed by a value. Notice that the equal sign, used in HTML, is replaced by colon - in CSS, placed between the property and its value.

font-family is a property : sans-serif is the value we assigned to it ;

color is a property : black or #000 is the value we assigned to it ;

font-size is a property : 18px (pixels) is the value we assigned to it ;

Note also how every property and the value or values attached to it are terminated by a semi-colon.

}

Any paragraph associated with the above style sheet will render like this. Large, black, sans-serif typeface.

<head>
<style type="text/css">
p {
font-family: sans-serif;
color: #000;
font-size: 11px;}
p.small {
font-family: sans-serif;
color: #000;
font-size: 9px;}
.shoes {
font-family: sans-serif;
color: #0f0;
font-size: 18px;
text-transform: uppercase;}
#mainHeader {
font-family: sans-serif;
color: #f00;
font-size: 36px;
 line-height: 150%;}
 </style>
<title>HTML Web Construction</title>
</head>

In the above example we have declared four rules. The first will automatically apply to all paragraph tags unless specified otherwise.

The next rule p.small { font-family: sans-serif; color: #000; font-size: 9px;} uses a class for its selector, in addition to its HTML selector. In other words, instead of nameing just the tag, we name a specific class of the tag simply by following the HTML selector with a dot followed by the name of the class. In the case the class attached to <p>tag is named small. You may assign any name to your classes. Keep those names concise, meaningful and make sure they contain no spaces.To have this class apply to a <p> tag, in the HTML we must add the class attribute and assign it a value:

<p class="small"> Now we can write a paragraph with the small class applied to it.</p>

The third rule .shoes { font-family: sans-serif; color: #0f0; font-size: 18px; text-transform: uppercase;} uses a class for its selector. I named this class shoes in order to reiterate that you may assign any name to your classes as long as it is short, and contains no spaces. Being that this rule uses a class for its selector, not directly associated with any HTML tags, we can apply this class to various HTML tags containing text.

<p class="shoes"> Now we can write a paragraph with the shoes class applied to it.</p>

<b class="shoes"> The bold tag. Note that I am typing in lower case, having the text-transform property with its assigned uppercase value, transform my text to uppercase </b>

<h1 class="shoes"> The header 1 tag. </h1>

The fourth rule #mainHeader { font-family: sans-serif; color: #f00; font-size: 36px; line-height: 150%;} uses an id for its selector. An id selector is literally unique. When using an id as a selector for a rule, that rule can be applied only once within an HTML document. In other words: use IDs when there is only one occurence per page, use classes when there are one or more occurences per page.

To have an id apply to a tag, in the HTML we must add the id attribute and assign it a value:

<p id="mainHeader"> Now we can write a paragraph with the Main Header id applied to it.</p>

Note: You can only use class and ID in embedded and linked sheets, not in inline styles.

Using CSS we may declare one or more rules. Each rule will have a selector. A selector can be an HTML selector, a class selector or an id selector. The selector will always be fo;;owed by a declaration of the properties assigned by thst rule and their assigned values.

  
  back ↑