Cascading Style Sheets

style_sheetsStyles sheets are a standard approved and recommended by the world wide consortium . W3C has actively promoted the use of style sheets on the Web since the Consortium was founded in 1994.

They were essentially introduced to give the developer more control in page layout and styling of the document. Nearly all browsers support CSS and many other applications do, too.

In the following pages we will cover some basic features about style sheets. There are many ways of adding style to a web page. Style can be either declared in the head section of the page or directly within the html tag.

DEFINING STYLE WITHIN HTML TAGS

Style within an HTML tag is assigned using the style tag followed by an attribute.

In the above the style tag is written within the HTML tag . The style sheet tag used three properties color font-style-weight and font-family. Their respective values are blue color code, italic, bold and the Helvetica font. Notice there is a colon in between color and blue color code and a semicolon after each property. Isn’t it simple all you have to do is refer to a list of style sheet property and their values and use them according to you web page design.

Defining style in the head section

Defining styles within an html tag is simple but can be quite tedious, especially when you intend using it on multiple html tags. A simpler way out be to declare the style within the head section of the page. By doing so all you intend to format. A style declaration in the head section must begin with the tag and end with the tag.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
    <LINK href="special.css" rel="stylesheet" type="text/css">
  </HEAD>
  <BODY>
    <P>This paragraph should have special green text.
  </BODY>
</HTML>

Style sheet as you know by now are groups of styles that define how an html element may appear in a web browser. Apart from the one discussed so far and this is by creating an external style file .style sheet declaration in an external file is particular very useful in useful in cases where you want to use the style in many pages at the same time. This method is also more convenient in terms of making any last minute change as there is one central place that controls the entire site design  in your html file all you need to do is include the style file name using the link tag.

The link tag attributes ask the browser to refer to the external style sheet for all formatting and other styling elements. You can use any name for the style sheet file, just be sure you have the .css extension at the end .in this it assumes that your style sheet a name to be referred with.

<head>
<link rel=”stylesheet” type=”text/css” href=”theme.css”>
</head>

The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets.

What we have covered is BARLEY the basics, I just wanted to give you a basi c understanding of what CSS actually is. There are volumes upon volumes of information that are available to get you started in using the powerful tool set.

Some books that I would recommend:
The CSS: The Ultimate Reference by Tommy Olsson and Paul O’Brien (Mar 4, 2008)
CSS Pocket Reference by Eric A. Meyer (Jul 30, 2011)
HTML & CSS: The Complete Reference, Fifth Edition (Complete Reference Series) by Thomas Powell (Jan 15, 2010)

 

2018-09-11T23:01:24+00:00