Styles Sheet is a collection of formatting styles, which can be applied to a web page.

  • They are a way to control the look and feel of your HTML
  • Are powerful mechanism for adding styles like fonts, colors, spacing etc.
  • Use the "style" you create on any webpage you wish!.
  • Even multiple external style sheets can be referenced inside a single HTML document.
  • Priority: (a)Inline style (b)Internal style sheets (c)External file (d) Browser default.
  • Order of occurrence : If external file is mentioned before the internal style in head tag, external style will take preference.

Basic Syntax : Style can be given in numerous ways but basic syntax is : -

Selector {attribute1:value1; attribute2:value2……}

  • Selector is any possible HTML tag/class name. 
  • Attributes are placed in curly braces and form variable and value pairs.
  • variable and values are seperated by a colon(:)
  • Pairs of attributes seperated by semicolon(;).

 

Ex. p {font-family:"sans serif"}
Note: If the value has multiple words, put quotes around the value.


Inline Styles
Inline styles are given inside the tags of H1, P etc. with a style attribute, which can contain any CSS property.


Ex. <p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Inline styles losses advantages of style sheets by mixing content with presentation. Use for styling a single occurrence of an element.


Internal Style Sheets
You define internal styles in the head section(inside HEAD tag) by using the <style> tag, 
<Style> tag has the attribute of type, which carries value “text/css”.

 

EX: Internal style sheets
<html>
<head><title>Internal style sheet effects</title>
<style type="text/css">
hr {color:sienna}
p {font-family:GEORGIA; font-size:34pt; letter-spacing:15; line-height:3pt;}
body {background-color:rgb(100%,100%,0%);}
</style>
</head>
<body>
<h1>Look out for the CSS Styles inside Html file.</h1>
<hr size=4 noshade>
<P>
CASCADING STYLE SHEETS<br/>
CASCADING STYLE SHEETS<br/>
CASCADING STYLE SHEETS<br/>
CASCADING STYLE SHEETS<br/>
CASCADING STYLE SHEETS<br/>
CASCADING STYLE SHEETS<br/>
</p>
</body>
</html>


Using multiple values for variables.
Multiple values can also be assigned to one variable, in such cases the first takes precedence over the last value.

 

Ex. Using multiple values
<HEAD><title>multiple values for attributes</title>
<STYLE type="text/css">
p { font-family:"monotype corsiva", impact; font-size=34; background-color:#ffff00}
p {border-style:groove; text-align:center}
body {background-color:sienna;}
</STYLE></HEAD>
<BODY>
<P>This font is Monotype Corsiva</p>
<P>Delete "Monotype" from font-family name and see this text appear in impact.<br/>
proving the order of preference.</p>
</BODY>
</html>


Grouped Tags.
One attribute list for more tags.

Ex. h1,h2,h3,h4,h5,h6 {color:green}


Class Selector
One class for reference.

 

Ex.       p.right {text-align:right}
p.center {text-align:center}

 

Usage : 
<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>

 

Ex. Using classes for style

<HEAD>
<STYLE type="text/css">
H1.myclass {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> This H1 is affected by our style </H1>
<H1> This one is not affected by our style </H1>
</BODY>


Multiple Cascading classes
In the example below first the class “center” properties will be applied and then class “bold”.


Usage: <p class="center bold">This is a paragraph.</p>

NOTE: Do not start class with a number.


Universal usage of Class
Can be used by any tag just by giving the class name inside the tag.

Ex  .center {text-align:center}


Usage <p class="center">This is a paragraph.</p>
<h1 class=”center”>This is a praragraph.</p>


Attaching style class with attributes of tags.
Below style applies to all input elements that have a type attribute with a value of "text"

 

Ex.  input[type="text"] {background-color:blue}


Usage: <input type=text maxlength=23>Enter your name</input>


Attaching style class with id names of elements
Below style applies to all elements containing the id name greenitem.

 

Ex.  #greenitem {color:green}


Usage: <input type=text id=greenitem maxlength=23>Enter your name</input>

 

Ex. Using Styles with ID nos.

<html>
<HEAD>
<title>using styles with id nos</title>
<STYLE type="text/css">
 #myid {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> This H1 is not affected </H1>
<H1 id="myid"> This H1 is affected by style </H1>
<H1> This H1 is not affected </H1>

</BODY>
</html>


CSS Comments
A CSS comment begins with "/*", and ends with "*/", like this:


Ex. 
P {text-align:center;
/*This is comment comment*/
color:black; font-family:arial}


External Style Sheet
External style sheets are files with .css extention.  Tags inside the file are similar. It is connected to the main html with <link> tag which carries two attributes giving details of the files.  “rel” attribute specifies that it is a stylesheet.  “type” attribute mentions that the content are of type “text/css”. Href attribute gives the url pointing to the css file.

 

Ex:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>


Ex.  Contents of main.html
<html>
<head><title> Using external style sheets</title>
<link rel=”stylesheet” type=”text/css” href=”ex1.css” />
</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<hr noshade>
<p> This paragraph has a left margin of 50 pixels</p>
</body>
</html>


Contents of ex1.css file
Body {background-color:yellow}
H1 {font-size: 36pt;}
H2 {color:blue;}
Hr {color:navy;}
P {margin-left:50px;}
a: link {color:green;}
a:visited {color:yellow;}
a:hover {color:black;}
a:active {color:blue;}


Compatability
Old browsers simply ignores unknown tags so comment out the style tag for making it compatible with old browsers, so that the contents of style tag are not displayed.


Ex.
<head>
<style type="text/css">
<!--
hr {color:sienna}
p {margin-left:20px}
-->
</style>
</head>


Default language
Default language should be mentioned with the style tag using the “type” attribute.


Ex. <META http-equiv="Content-Style-Type" content="text/css">


Basic attributes/values of style tag  The attributes that can be specified to the <style> tag are : font arrtibutes, color & background attributes, text attributes, border attributes, margin attributes & list attributes.

 

Font Attributes

 


Property

Description

Values

Example

font-family

specifies name

arial, helvetica…etc

p{font-family:futura, helvetica, arial, sans-serif}

font-style

specifies style

normal, italic, oblique

h2 {font-family: futura, helvetica, arial: font-style; italic)

font –weight

thickness/weight

lighter, normal, bold, bolder, 100, 200, ….900.

p{font-weight:bold)

font-size

size of font

xx units, %, larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large.

 

 

Text Properties

 


Property

Description

Values

Example

text –transform

the case of the text is set.

capitalize, uppercase, lowercase, none

p{text-transform:capiltalize}
h1 {text-transform: uppercase}

text-align

aligns content horizontally across the page.

left, right, center, justify

h4 {text-align:center}

text-indent

indents the text in the para by the specified number of characters

xx units

p {text-align:7em}

line-height

specified the height of the text along with the line space above the line and below the line

xx units

p{line-height: 12pt}

word-spacing

specified the space between the characters

xx units

p{word-spacing:1 pt}

letter-spacing

specified the space between the characters

xx units

p {letter-spacing:5}

text-decoration

specifies the formatting for the text.

underline, overline, line-through, blink, none

h1 {text-decoration: underline}

 

Color & Background attributes

 


Property

Description

Values

Example

Color

specifies the color

color name, hex value, rgb(r%, g%, b%) rgb(r,g,b)

p{color: red}
p{color:#ff0000}
p{color:10%,20%,20%}
p{color:255,200,0}

background-color

specifies the background color.

color name, hex value, rgb(r%, g%, b%), rgb(r,g,b).

h1 {background-color: green}

background-image

specifies the background image.

url(url name)

body {background-image: url(..images/sand.gif)}

Background

specifies how background image will be placed.

repeat, repeat-x, repeat-y, no-repeat.

body {background-image:url(../images/sand.gif)}
background-attachment:fixed}

background-attachment

specifies if the image is fixed or will it also move.

scroll, fixed

body{background-image: url(..image/sand.gif); background-attachment : fixed}

background-position

specifies the position of the background image.

vertical %, horizontal %, top, center, bottom, left, center, right.

body {background-image: url(..images/sand.gif); background position: center}

 

Border properties

 

Property

Description

Values

Example

border-style
none

sets the style of the elements border.

dotted, dashed, solid, double, groove, ridge, inset, outset.

table {bordr-style:dashed}

border-color

sets the color of the elements’ border

color name, hex value, rgb(r%,g%, b%), rgb(r,g,b).

table {border-color: red}

Border
border-top
border-bottom border-left border-right

sets the width, color, and style of the border simultaneously,

width value, style value, color value.

table {border:thick double red}
table {border-top: thin dashed red}

 

 

Margin Attributes

 

Property

Description

Values

Example

margin-top

specifies the position of the text in the page

xx units, %, auto

div {margin-top:2em}

margin-bottom

specifies the bottom margin of the text.

xx units, %, auto

div {margin-bottom: 10%}

margin-left

specifies the left margin of the text

xx units, %, auto

div {margin-left: 6em}

margin-right

specifies the right margin of the text

xx units, %, auto

div {margin-right: 1em}

 

List Attributes

 


Property

Description

Values

Example

list-style-type

specifies the symbol that appears in front of a list item.

disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper, alpha

ul {list-style-type:square}

list-style-image

specifies the image to serve as a bullet for list items.

url(url name)

ul{list-style-image:url(../iages/smiley.gif)}

list-style-position

specifies the position of the bullet that appears in the list item.

inside, outside

ul {list-style-position: outside}
ul {list-style-position: inside}


Ex. List and background demo
<html>
<head><title>This is demo of list and background</title>
<style type="text/css">
body {background-color:#ffff00;}
h1 {background-color:black; color:yellow; text-align:center; text-transform:uppercase;}
ul {list-style-image:url("icon.jpg");list-style-position:inside}
ul {font-family:impact; font-size:32}

</style>
</head>
<body>
<h1 style="myclass">This is the list of subjects in module 01</h1>
<ul>
<li>&nbsp HTML
<li>&nbsp Front Page
<li>&nbsp Dreamweaver CS4
<li>&#160 MY SQL
<li>&#160 MS Access
<li>&#160 PHP
</ul>   
</body>

</html>

SIGN UP FOR NEWSLETTER

Sign up to received our free newsletter!
Name:
E-mail ID:

MOST READ

Views: 5085 Times
Title Bar Effect Typewriter (JavaScript) READ MORE
Views: 2873 Times
Huawei says Ascend P6 is world's 'slimmest' smartphone READ MORE
Views: 2760 Times
Argentina arrests teen hacker who netted $50,000 a month READ MORE
Views: 5371 Times
How to customize your windows by rocketDock application use your windows like mac READ MORE
Views: 7550 Times
Dreamweaver CS4 Tutorial for Beginners READ MORE

Home|IT News|Computer Tips|Video Tutorials|Download Softwares|Subjects|Contact Us
Copyright © 2018. Jumbo Education (Information Technology). All rights reserved.
Free counter and web stats

Large Visitor Globe