Introduction to CSS
Unit-5 Web Technology
By: Swati Sharma
What is CSS
Cascading Style Sheets (CSS) is a simple mechanism for
adding style (e.g., fonts, colors, spacing) to Web
documents.
CSS was first developed in 1997
By: Swati Sharma
Advantages of Style Sheets
Saves time
Easy to change
Keep consistency
Give you more control over layout
Use styles with JavaScript => DHTML
Make it easy to create a common format for all the
Web pages
By: Swati Sharma
Applying a single style sheet to multiple
documents
By: Swati Sharma
Basic Structure of a Style
Each definition contains:
A property
A colon
A value
A semicolon to separate two or more values
Can include one or more values
h1 {font-size:12pt; color:red}
By: Swati Sharma
Style Precedence
External style sheet
Embedded styles
Inline styles
By: Swati Sharma
Three Style Types
Inline styles
Add styles to each tag within the HTML file Use it when
you need to format just a single section in a web page
Example
<h1 style=“color:red; font-family: sans-sarif”>Swati</h1>
By: Swati Sharma
Three Style Types
Embedded or internal styles
A style is applied to the entire HTML file
Use it when you need to modify all instances of particular
element in a web page
Example
<style type=“text/css”>
h1 {color:red; font-family:sans-serif}
</style>
By: Swati Sharma
Creating an Embedded Style
<head>
<title>Embedded Example</title>
<style> (default is “text/css”)
Style declarations
</style>
</head>
A style declaration:
Selector {attribute1:value1; attribute2:value2; …}
Selector = an element in a document (e.g., a header or
paragraph)
By: Swati Sharma
An Example of an embedded style
<head>
<title>Getting Started</title>
<style type=“text/css”>
h1 {font-family: sans-serif; color: organge}
</style>
</head>
By: Swati Sharma
Three Style Types
External style sheets
An external style sheet is a text file containing the style
definition (declaration)
Use it when you need to control the style for an entire web
site
Example
h1, h2, h3, h4, h5, h6 {color:red; font-family:sans-serif}
Save this in a new document using a .css extension
By: Swati Sharma
Creating an External Style Sheet
Open a new blank document in Notepad
Type style declarations
h1 {color:red; font-family:sans-serif;}
Do not include <style> tags
Save the document as filename.css
By: Swati Sharma
Linking to Style Sheets 1
Open an HTML file
Between <head> and </head> add
<link href=URL rel=“relation_type” type=“link_type”>
URL is the file.css
Relation_type=“stylesheet”
Link_type=“text/css”
Save this file and the .css file in the same web server
directory
By: Swati Sharma
External style sheet example
<head> h1 {font-family: sans-serif;
<title>Getting color: orange}
Started</title> b {color: blue}
<link href=“style.css”
rel=“stylesheet”
type=“text/css” />
</head>
Text file of css named “stylesheet”
html file
By: Swati Sharma
Style Sheet Strategies
Wherever possible, place your styles in external style
sheets
Take advantage of the power of CSS to have control over
an entire Web site
By: Swati Sharma
Style Sheet Strategies
At the top level of your web site: define a default
global.css style sheet
Refine styles at sublevels with a section.css style sheet
Try to avoid using styles in tags
By: Swati Sharma
Using IDs and Classes
Use an id to distinguish something, like a
paragraph, from the others in a document.
For example, to identify a paragraph as
“head”, use the code:
<p id=“head”>… </p>
By: Swati Sharma
Working With Ids
To create an ID for a specific tag, use the property:
<tag ID=id_name>
To apply a style to a specific ID, use:
#id_name {style attributes and values}
By: Swati Sharma
Classes
HTML and XHTML require each id be unique–
therefore an id value can only be used once in a
document.
You can mark a group of elements with a common
identifier using the class attribute.
<element class=“class”> …
</element>
By: Swati Sharma
Applying a style to a class
By: Swati Sharma
Working With Classes
To create a class, enter the following in the HTML
tag:
<tag CLASS=class_name>
<h1 CLASS=FirstHeader>IU</h1>
class_name is a name to identify this class of tags
To apply a style to a class of tags, use:
tag.class_name {style attributes} or
.class_name {style attributes}
By: Swati Sharma
Working With Classes and Ids
The difference between the Class property and the ID
property is that the value of the ID property must be
unique:
you can’t have more than one tag with the same ID value
You can apply the same Class value to multiple document
tags
By: Swati Sharma
Working With DIV
<DIV> tag is used for blocks of text, e.g., paragraphs,
block quotes, headers, or lists
To create a container for block-level elements, use:
<DIV CLASS=class_name>
Block-level elements
</DIV>
Class_name is the name of the class
You can substitute the ID proper for the Class property (with ID, the
syntax for CSS style, #id_name {style attributes and values}
By: Swati Sharma
Working With <DIV>
DIV.Slogan {font-weigh:bold}
style
Our new…:
“We
teach…
Resulting
<DIV CLASS=Slogan>Our new text
Slogan is:<BR>”We teach CSS”</DIV>
HTML code
By: Swati Sharma
Working With <span>
With the <span> tag, you can use inline elements, e.g.,
<B>, <I>
To create a container for inline elements, use:
<span CLASS=class_name>
inline elements
</span>
By: Swati Sharma
CSS for Page Layout
CSS manipulates the size and location of block-level
elements
Block-level elements in HTML:
Heading tags, e.g., <H1>, <H2>
<p>
<blockquote> and <address> tags
List tags, e.g., <ul>, <ol>, <dl>
<div>
<body>
<hr>
<img>
By: Swati Sharma
CSS for Page Layout
Parts of the block-level elements:
Margin
Border
Padding
By: Swati Sharma
CSS for Page Layout
I am teaching you CSS
padding border
margin
By: Swati Sharma
Controlling the Margins
To define the margins of an element, use:
margin:value
where value = a length value (“px” is often used), a
percentage (a margin proportional to the element’s width,
or auto
By: Swati Sharma
Controlling the Margins
To set margins on a side, use:
margin-top
margin-right
margin-bottom
margin-left
E.g., LI {margin-left:10px; margin-right:10px;
margin-top:10px; margin-bottom:10px}
By: Swati Sharma
Setting the Padding Size
To define padding, use:
padding: value
where value = a length value or a percentage (a padding
proportional to the element’s width)
By: Swati Sharma
Setting the Padding Size
To set margins on a side, use:
padding-top
padding-right
padding-bottom
padding-left
By: Swati Sharma
Formatting the Border
Border can be set in three ways:
border-width
border-style
border-color
By: Swati Sharma
Formatting the Border
To set the border, use:
border:width_value style color
To set borders on a side, use:
border-top
border-bottom
border-left
border-right
By: Swati Sharma
Formatting Width & Height of Block-Level
Boxes
To set the width of a block-level element, use:
width:value
height:value
where value can be a length value, a percentage, or auto
E.g., textarea {width:225px; height:100px}
By: Swati Sharma
Using the Float Attribute
With CSS float, an element can be pushed to the left or
right, allowing other elements to wrap around it.
float:margin
Where margin = right, left, none
To prevent an element from wrapping, use:
Clear:margin
Where margin=right, left, both, none
img
{
float:right;
}
By: Swati Sharma
Turning off Float - Using Clear
Elements after the floating element will flow around it. To
avoid this, use the clear property.
The clear property specifies which sides of an element other
floating elements are not allowed.
.text_line
{
clear:both;
}
By: Swati Sharma
Using the Float Attribute
float:right
float:right width:50px
width:50px clear:right
By: Swati Sharma
Formatting Hypertext Links
To remove the style of underlining hypertext, use:
A {text-decoration:none}
4 types of hyperlinks can be modified:
A:visited {styles for previously visited links}
A:link {styles for links that have never visited}
A:active {styles for links that are currently being clicked}
A:hover {styles when the mouse cursor is hovering over the
link}
By: Swati Sharma
Styling Background
CSS background properties are used to define the background
effects of an element.
background-color
background-image
background-repeat
background-attachment
background-position
By: Swati Sharma
Background Examples
p {background-color:#e0ffff;}
body {background-image:url('paper.gif');}
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
body {background:#ffffff url('img_tree.png') no-repeat
right top;}(Shorthand Property)
By: Swati Sharma
Styling Fonts
Font
Font-size
Font-family
Font-style
Normal
Italic
Font-weight
By: Swati Sharma
Font Style Example
p{
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-size:40px;
font-weight:Bold;
}
By: Swati Sharma
Styling List
In HTML, there are two types of lists:
unordered lists - the list items are marked with bullets
<UL>
ordered lists - the list items are marked with numbers or
letters <OL>
By: Swati Sharma
List Properties
List-style
List-style-image
List-position
List-style-type
Circle
Square
Upper-roman
Lower-roman
Upper-alpha
Lower-alpha
By: Swati Sharma
List Example
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
ul
{
list-style-image: url('sqpurple.gif');
}
By: Swati Sharma
Styling Table
Table Borders
table, th, td
{
border: 1px solid black;
}
Collapse Borders
The border-collapse property sets whether the table borders are
collapsed into a single border or separated:
table
{
border-collapse:collapse;
}
By: Swati Sharma
Table Width and Height
table
{
width:100%;
}
th
{
height:50px;
}
Table Text Alignment
td
{
text-align:right;
vertical-align:bottom;
}
Table Padding
td
{
padding:15px;
By: }
Swati Sharma
Queries…?
By: Swati Sharma
