Example code using the STYLE element/tag

This method applies to embedded style sheets.
<br /><STYLE type=“text/css”><br /> …<br /> selector{property:value;selector:value; ..}<br /> ….<br /></STYLE><br />Other types are: e.g. XSL, etc.<br />Example:<br /><br /> <STYLE type=“text/css”><br /> body{color:red; background-color:blue;}<br /> h1{font-size:36px;color:brown;background-color:yellow;}<br /> h2{font-size:26px;color:green;background-color:orange;}<br /> </STYLE><br /><br />Take a look at this HTML sample:<br />

Example code using the ‘STYLE=’ attribute

<br />More examples:<br /><P style="padding-top:100px; padding-left:100px"><br /> THIS TEXT HAS PADDING AT TOP & LEFT<br /></P><br /><br />[<P style=" display:none;">THIS TEXT HAS display=none</P>]<br /><P style=" display: block;">THIS TEXT HAS display=block</P><br /><br />

Example code using the ‘STYLE=’ attribute

<br />More examples:<br /><P style="padding-top:100px; padding-left:100px"><br /> THIS TEXT HAS PADDING AT TOP & LEFT<br /></P><br /><br />[<P style=" display:none;">THIS TEXT HAS display=none</P>]<br /><P style=" display: block;">THIS TEXT HAS display=block</P><br /><br />

Example code using the ‘STYLE=’ attribute

Using style= attribute in many html elements is a common practice.
This method applies to all elements except the following:
HTML, HEAD, TITLE, META, SCRIPT, STYLE.
<br />Examples:<br /> <P style=“font-weight:bold”><br /> Hey diddle diddle, the cat and the fiddle<br /> </P><br /> <P style="text-align:right; color:brown;"><br /> THIS PARAGRAPH IS RIGHT ALIGNED<br /> </P><br /> <P style="text-align:center; color:gray;"><br /> THIS PARAGRAPH IS CENTER ALIGNED<br /> </P><br /> <P style="text-align:left; color:blue;"><br /> THIS PARAGRAPH IS LEFT ALIGNED<br /> </P> <br />

Example code using the ‘STYLE=’ attribute

Using style= attribute in many html elements is a common practice.
This method applies to all elements except the following:
HTML, HEAD, TITLE, META, SCRIPT, STYLE.
<br />Examples:<br /> <P style=“font-weight:bold”><br /> Hey diddle diddle, the cat and the fiddle<br /> </P><br /> <P style="text-align:right; color:brown;"><br /> THIS PARAGRAPH IS RIGHT ALIGNED<br /> </P><br /> <P style="text-align:center; color:gray;"><br /> THIS PARAGRAPH IS CENTER ALIGNED<br /> </P><br /> <P style="text-align:left; color:blue;"><br /> THIS PARAGRAPH IS LEFT ALIGNED<br /> </P> <br />

Example code using the ‘STYLE=’ attribute

Using style= attribute in many html elements is a common practice.
This method applies to all elements except the following:
HTML, HEAD, TITLE, META, SCRIPT, STYLE.
<br />Examples:<br /> <P style=“font-weight:bold”><br /> Hey diddle diddle, the cat and the fiddle<br /> </P><br /> <P style="text-align:right; color:brown;"><br /> THIS PARAGRAPH IS RIGHT ALIGNED<br /> </P><br /> <P style="text-align:center; color:gray;"><br /> THIS PARAGRAPH IS CENTER ALIGNED<br /> </P><br /> <P style="text-align:left; color:blue;"><br /> THIS PARAGRAPH IS LEFT ALIGNED<br /> </P> <br />

Using style= attribute in many html elements is a common practice.
This method applies to all elements except the following:
HTML, HEAD, TITLE, META, SCRIPT, STYLE.
<br />Examples:<br /> <P style=“font-weight:bold”><br /> Hey diddle diddle, the cat and the fiddle<br /> </P><br /> <P style="text-align:right; color:brown;"><br /> THIS PARAGRAPH IS RIGHT ALIGNED<br /> </P><br /> <P style="text-align:center; color:gray;"><br /> THIS PARAGRAPH IS CENTER ALIGNED<br /> </P><br /> <P style="text-align:left; color:blue;"><br /> THIS PARAGRAPH IS LEFT ALIGNED<br /> </P> <br />

STYLE SHEETS – Methods

How to contain styles/style sheets in HTML documents.
There are THREE popular methods:
Using STYLE= attribute in certain HTML elements/tags. (a.k.a. inline styles).
Using STYLE element/tag in a HTML document. (a.k.a. embedded styles).
External styles: Which provides three ways.
Using LINK element/tag to link to an external cascading style sheets.
Using @import to import an external style sheet.
Using CLASS attribute in certain HTML elements.

Style sheets – Benefits

Speed.
Initial page may load slowly, but later pages will load fast;
because the style sheets are being transferred along with the initial page, but later pages re-use those style sheets.
Maintainability.
Maintenance time is reduced and errors are also reduced.
Change in one style sheet is reflected all around the pages.
Accessibility.
Pages that use style sheets are easier to tweak in different web browsers (IE, Netscape, FireFox, etc.)
Customization.
Web authors may offer multiple style sheets for the same web content.
Consistency.
Web authors remain consistent (unbothered) by styling or layout issues and stick themselves to tasks of content design.
Portability.
A document can easily be re-purposed or re-used for an entirely different presentation by just applying a new style sheet already available for the new environment but consistent to the web page.

The content vs. presentation separation

Style sheets act as a separation between web page content and its presentation.
A web author has to write web page semantic content as well as the visual layout of the web page.

Every web page has a different content, however the visual layout of all web pages may be same or similar.

Style sheets provide us the means of preventing the need of re-work on the authoring of visual layout.

STYLE SHEETS – An Introduction

Styles need additional HTML coding.
This becomes tedious when developers decide to follow same or similar styles in each of their subsequent web page development efforts.
So instead of re-writing style specific HTML each time a new web page is being authored, there must be a way to re-use prior style authored efforts.
Style sheets provide such support.
“A style sheet is a web page layout setting method added to HTML via a W3C enhancement.”
“It gives web developers more control over their design and content management.”

We shall now venture as to the study of style sheets.

Some MISC..

Style Name Example/Options
Display {display:block | none;}
Whitespace {whitespace:pre|normal;}

Scrollbar Modifications

Style Name Example/Options
scrollbar-3dlight-color { scrollbar-3dlight-color : vColor }
scrollbar-shadow-color { scrollbar-shadow-color : vColor }
scrollbar-arrow-color { scrollbar-arrow-color : vColor }
scrollbar-base-color { scrollbar-base-color : vColor }
scrollbar-darkshadow-color { scrollbar-darkshadow-color : vColor }
scrollbar-face-color { scrollbar-face-color : vColor }
scrollbar-highlight-color { scrollbar-highlight-color : vColor }

Styles apply to HTML BODY element.

Let us take a look at another sample HTML.

Borders

Style Name Example/Options
Top Border Width {top-border-width:thin inset;}
Right Border Width {right-border-width:thick outset;}
Bottom Border Width {bottom-border-width:thin inset;}
Left Border Width {left-border-width:thick inset;}
Border Width {border-width:2px;}
Border Color {border-color:#FF0000;}
Border Style {border-style:dashed;}
Top Border {top-border:2 thin red;}
Right Border {right-border:2 thin red;}
Bottom Border {bottom-border:2 thin red;}
Left Border {left-border:2 thin red;}
Border {border:2 thin red;}

General style: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]
Styles apply to all HTML elements.

Paddings

Style Name Example/Options
Top Padding {top-padding:10px;}
Right Padding {right-padding:10px;}
Bottom Padding {bottom-padding:10px;}
Left Padding {left-padding:10px;}
Padding {padding:10px;}

General style: |

Styles apply to all HTML elements.

Margins

Style Name Example/Options
Top Margin {top-margin:10px}
Right Margin {right-margin:10px}
Bottom Margin {bottom-margin:10px}
Left Margin {left-margin:10px}
Margin { margin: 2em 4em }
General style: | | auto

Styles apply to all HTML elements.

Color & Background Styles

Style Name Example/Options
Color {color: black;}
Background Color {background-color:red;}
Background Image { background-image: url(http://www.htmlhelp.com/bg.png) }
Background Repeat {background-repeat:repeat|repeat-x|repeat-y|no-repeat;}
Background Attachment {background-attachment:scroll|fixed}
Background Position {background-position:op|center|bottom]||[left|center|right;}
Background { background: white url(candybar.gif);}

Styles apply to all HTML elements.

Font Styles

Style Name Example/Options
Font Family {font-family: sans-serif;}
Font Style {font-style: normal | italic | oblique;}
Font Varient {font-variant:normal | SMALL-CAPS;}
Font Weight {font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;}
Font Size {font-size:||;}

OR just
Font {font:[ ||||]? [/ ]? ;}
e.g. {font: italic bold 12pt/14pt Times, serif ;}
Styles apply to all HTML elements.

Color & Background Styles

Style Name Example/Options
Color {color: black;}
Background Color {background-color:red;}
Background Image { background-image: url(http://www.htmlhelp.com/bg.png) }
Background Repeat {background-repeat:repeat|repeat-x|repeat-y|no-repeat;}
Background Attachment {background-attachment:scroll|fixed}
Background Position {background-position:op|center|bottom]||[left|center|right;}
Background { background: white url(candybar.gif);}

Styles apply to all HTML elements.

Color & Background Styles

Style Name Example/Options
Color {color: black;}
Background Color {background-color:red;}
Background Image { background-image: url(http://www.htmlhelp.com/bg.png) }
Background Repeat {background-repeat:repeat|repeat-x|repeat-y|no-repeat;}
Background Attachment {background-attachment:scroll|fixed}
Background Position {background-position:op|center|bottom]||[left|center|right;}
Background { background: white url(candybar.gif);}

Styles apply to all HTML elements.

Font Styles

Style Name Example/Options
Font Family {font-family: sans-serif;}
Font Style {font-style: normal | italic | oblique;}
Font Varient {font-variant:normal | SMALL-CAPS;}
Font Weight {font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;}
Font Size {font-size:||;}

OR just
Font {font:[ ||||]? [/ ]? ;}
e.g. {font: italic bold 12pt/14pt Times, serif ;}
Styles apply to all HTML elements.

STYLES – An Introduction

WHAT IS A STYLE?
A way to make layout of a web page and its contents more presentable.
Just like people adopt fashion or develop styles in their habits.
e.g.
Batting style, bowling style, driving style, etc.
In web pages:
You select to render heading text in red color.
You select to render background of a heading in blue color.
You select to render heading text in sans serif font.
etc.
Load this HTML to view how we set heading styles.


Styles are not just limited to headings; there are other HTML elements where styles may be applied.
Let us take a look at the styles and elements where they apply 