All Snippets
Top 100 Snippets

By Language

GBIC >> Source Code >> HTML >> Snippet

13 Cascading Style Sheets (CSS) I - Basics

CSS provides a more capable replacement to the use of attributes within tags to control how an HTML
is formatted.  Instead of using attributes for every tag on the HTML page, CSS allows the creation of a
single set of rules which can control the display of one, or all, tags in the entire documents.  Even better,
the CSS rules can be kept in external files - to be applied to every web page on a web site, controlling
the look of a web site from a single, common set of rules.

There are roughly 3 ways in the CSS rules, or styles, can be applied.

1. Placed within the HTML document between a < style ></ style > tag pair.
2. Placed within an individual HTML tag
3. Placed in a separate file which can be called by the HTML page.

Style rules are written to apply to the contents of one or more HTML tags.  In this example, a style
rule is written which applies to all < h2 > tags, causing the text to be displayed in green.  When placed
in the < head > section of the HTML page, every < h2 > in the entire document will be affected.

< style >
h2 { color : green }
</ style >

The rule takes the form of  tag {  attribute :  value }

More than one attribute can be placed in a rule like the following example, where the
attribute:value pairs are separated by semicolons.

< style >
h2 { color : green  ;  font-weight : bold}
</ style >

More than one rule can be included between the < style > tags.  In this next example, a second rule is
added to make the content of all < p > tags green also.

< style >
h2 {color:green}
p {color:green}
</ style >

This could be written as a single rule, like this, where multiple HTML tags are listed in front of the
one or more attribute:pairs

< style >
p h2 { color : green  ;  font-weight : bold }
</ style >

You can give an individual rule a name of its own, which would be called a class, like this:

< style >
.myclassname  {color:green}  //note the dot-name nomenclature at the start of the rule
</ style >

Then, in any HTML tag where you want the rule to apply, add the class attribute like the next example
to have the rule apply to this instance of the HTML tag:

< p class = "myclassname" >

You can narrow down the range of HTML tags to which a class applies by changing the classname
as shown in the next example:

< style >
p.myclassname  { color : green }
</ style >

Here, the class would only apply to < p > tags whose class attribute is 'myclassname'.  The rules would
not apply to any other type of HTML tag, regardless of what the value of the class attribute.

If desired, you can write a style which can be applied to one, and only one, element of a given type of
HTML tag - such as a specific instance of a < p > or an < h3 > tag.  This is done by setting the HTML
tag 'id' attribute to a unique value, as in the following example:

< style >
#uniqueID { color : green } //note the # sign which starts the rule
</ style >

This rule would apply to the tag whose id was set to 'uniqueID', as in this HTML tag example:

< p id = 'uniqueID' >

Used in this way, the rule can be applied to only one tag of a particular HTML tag type, but there
can be multiple (different) HTML tags types which have the id, as in these examples of HTML tags:

< p id = 'uniqueID' >
< h2 id = 'uniqueID' >
< div id = 'uniqueID' >

Finally, the ID definition can be restricted to apply to a single HTML tag type by placing the HTML tag
in front of the pound sign, like this:

< style >
p#uniqueID { color : green } 
</ style >

The p# which starts the rule means this applies to the single < p > tag which has a matching ID.

Another use for the ID of an element is found with the getElementByID() method of the document
object.  By assigning an HTML tag (element) with an ID attribute value, the getElementByID()
method can be use to get a reference to that element for use within your JavaScript programs.
Here's an example:

< p id = "unique" >
Content of the tag
</ p >

Finally, CSS recognizes comments, which is text surrounded by /* and */