Learn how to work with StyleSheets

The mechanism that applies a style across one or more pages is termed as cascading style sheets or CSS. Style sheets are used to control all aspects of graphic presentation of a Web page like fonts, background-color, background-image, margins etc.

These designing elements are subjected to scripting which can modify the document after it is downloaded, thus making Style sheet an integral part of DHTML. DHTML stands for Dynamic Hyper Text Markup Language. It’s an extension to HTML.

How to write Style Sheets?

Generally the syntax for coding style sheets is

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">selector{declarations} 

Each declarations will be followed by

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">property:value 

Let’s now look at an example:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">h1{font:arial} or h4{color:red} 

Embedding a Style Sheet

The <STYLE> tag is used to embed style information within a document. It should be declared in <HEAD> section of an HTML document.

Ways to apply Style Sheets

There are two kinds of Selectors namely Class selector and ID selector. Following example shows how to declare a simple style rule and apply them inside the <Body> tag of HTML:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><p><span style="color: #0000ff">&lt;</span><span style="color: #800000">HTML</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">HEAD</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">TITLE</span><span style="color: #0000ff">&gt;</span>Style sheet<span style="color: #0000ff">&lt;/</span><span style="color: #800000">TITLE</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">STYLE</span><span style="color: #0000ff">&gt;</span>.S{color:olive}</p><p><span style="color: #0000ff">&lt;</span><span style="color: #800000">STYLE</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">HEAD</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">BODY</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">P</span> <span style="color: #ff0000">CLASS</span> = <span style="color: #0000ff">&quot;S&quot;</span><span style="color: #0000ff">&gt;</span>WELCOME TO STYLE SHEETS</p><p><span style="color: #0000ff">&lt;/</span><span style="color: #800000">P</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">BODY</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">HTML</span><span style="color: #0000ff">&gt;</span></p>

 

READ  Understanding WordPress Permalinks - Part 1

The ID selector is same as Class selector except the difference that here ‘#’ is used instead of ‘.’ symbol. Let’s now look at its syntax:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">#CAPS{background-color:red} 

Inside the <BODY> tag you should apply the above selector as

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">p</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;CAPS&quot;</span><span style="color: #0000ff">&gt;</span>This is the ID selector<span style="color: #0000ff">&lt;/</span><span style="color: #800000">p</span><span style="color: #0000ff">&gt;</span> 

That’s all about the Style rules. Now it’s time to learn all important properties and their corresponding values. You will find some of them here and more from the Web site of W3C.

List of important properties used in Style sheets

Font-Family: Verdana, Arial, courier etc (You can separate multiple fonts by commas)

Font-Size: 8pt, 12pt etc

Font-Weight: Bold or Normal

Text-Decoration: Underline, Overline, None

Text-Align: Left, Right, Center

Color: Red, Blue or #000000 (Font-Color)

Background-Color: Red, Blue or #000000

Leave a Reply

Your email address will not be published.