SlideShare a Scribd company logo
By: Swati Sharma
Introduction to CSS
Unit-5 Web Technology
What is CSS
By: Swati Sharma
 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
Advantages of Style Sheets
By: Swati Sharma
 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
Applying a single style sheet to multiple
documents
By: Swati Sharma
Basic Structure of a Style
By: Swati Sharma
 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}
Style Precedence
By: Swati Sharma
 External style sheet
 Embedded styles
 Inline styles
Three Style Types
By: Swati Sharma
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>
Three Style Types
By: Swati Sharma
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>
Creating an Embedded Style
By: Swati Sharma
<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)
An Example of an embedded style
By: Swati Sharma
<head>
<title>Getting Started</title>
<style type=“text/css”>
h1 {font-family: sans-serif; color: organge}
</style>
</head>
Three Style Types
By: Swati Sharma
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
Creating an External Style Sheet
By: Swati Sharma
 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
Linking to Style Sheets 1
By: Swati Sharma
 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
External style sheet example
By: Swati Sharma
<head>
<title>Getting
Started</title>
<link href=“style.css”
rel=“stylesheet”
type=“text/css” />
</head>
h1 {font-family: sans-serif;
color: orange}
b {color: blue}
html file
Text file of css named “stylesheet”
Style Sheet Strategies
By: Swati Sharma
 Wherever possible, place your styles in external style
sheets
 Take advantage of the power of CSS to have control over
an entire Web site
Style Sheet Strategies
By: Swati Sharma
 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
Using IDs and Classes
By: Swati Sharma
 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>
Working With Ids
By: Swati Sharma
 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}
Classes
By: Swati Sharma
 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>
Applying a style to a class
By: Swati Sharma
Working With Classes
By: Swati Sharma
 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}
Working With Classes and Ids
By: Swati Sharma
 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
Working With DIV
By: Swati Sharma
 <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}
Working With <DIV>
By: Swati Sharma
DIV.Slogan {font-weigh:bold}
<DIV CLASS=Slogan>Our new
Slogan is:<BR>”We teach CSS”</DIV>
style
HTML code
Our new…:
“We
teach…Resulting
text
Working With <span>
By: Swati Sharma
 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>
CSS for Page Layout
By: Swati Sharma
 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>
CSS for Page Layout
By: Swati Sharma
 Parts of the block-level elements:
 Margin
 Border
 Padding
CSS for Page Layout
By: Swati Sharma
I am teaching you CSS
border
margin
padding
Controlling the Margins
By: Swati Sharma
 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
Controlling the Margins
By: Swati Sharma
 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}
Setting the Padding Size
By: Swati Sharma
 To define padding, use:
 padding: value
 where value = a length value or a percentage (a padding
proportional to the element’s width)
Setting the Padding Size
By: Swati Sharma
 To set margins on a side, use:
 padding-top
 padding-right
 padding-bottom
 padding-left
Formatting the Border
By: Swati Sharma
 Border can be set in three ways:
 border-width
 border-style
 border-color
Formatting the Border
By: Swati Sharma
 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
Formatting Width & Height of Block-Level
Boxes
By: Swati Sharma
 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}
Using the Float Attribute
By: Swati Sharma
 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;
}
Turning off Float - Using Clear
By: Swati Sharma
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;
}
Using the Float Attribute
By: Swati Sharma
float:right
width:50px
float:right
width:50px
clear:right
Formatting Hypertext Links
By: Swati Sharma
 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}
Styling Background
By: Swati Sharma
CSS background properties are used to define the background
effects of an element.
background-color
background-image
background-repeat
background-attachment
background-position
Background Examples
By: Swati Sharma
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)
Styling Fonts
By: Swati Sharma
Font
Font-size
Font-family
Font-style
Normal
Italic
Font-weight
Font Style Example
By: Swati Sharma
p{
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-size:40px;
font-weight:Bold;
}
Styling List
By: Swati Sharma
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>
List Properties
By: Swati Sharma
List-style
List-style-image
List-position
List-style-type
 Circle
 Square
 Upper-roman
 Lower-roman
 Upper-alpha
 Lower-alpha
List Example
By: Swati Sharma
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');
}
Styling Table
By: Swati Sharma
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;
}
Queries…?
By: Swati Sharma

More Related Content

What's hot (20)

PDF
Introduction to HTML
Seble Nigussie
 
PPTX
Complete Lecture on Css presentation
Salman Memon
 
PDF
CSS3 Media Queries
Russ Weakley
 
PPTX
Css Text Formatting
Dr. Jasmine Beulah Gnanadurai
 
PPTX
(Fast) Introduction to HTML & CSS
Dave Kelly
 
PPT
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
PPT
CSS for Beginners
Amit Kumar Singh
 
PPSX
Introduction to css
Evolution Network
 
ODP
Introduction to css & its attributes with syntax
priyadharshini murugan
 
PDF
Introduction to CSS3
Seble Nigussie
 
PPTX
Html & CSS
JainilSampat
 
PPT
Css Ppt
Hema Prasanth
 
PPT
Html & Css presentation
joilrahat
 
PPTX
Cascading style sheets (CSS)
Harshita Yadav
 
Introduction to HTML
Seble Nigussie
 
Complete Lecture on Css presentation
Salman Memon
 
CSS3 Media Queries
Russ Weakley
 
Css Text Formatting
Dr. Jasmine Beulah Gnanadurai
 
(Fast) Introduction to HTML & CSS
Dave Kelly
 
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
CSS for Beginners
Amit Kumar Singh
 
Introduction to css
Evolution Network
 
Introduction to css & its attributes with syntax
priyadharshini murugan
 
Introduction to CSS3
Seble Nigussie
 
Html & CSS
JainilSampat
 
Css Ppt
Hema Prasanth
 
Html & Css presentation
joilrahat
 
Cascading style sheets (CSS)
Harshita Yadav
 

Similar to CSS Introduction (20)

PPT
Css
myrajendra
 
DOCX
Css Introduction
SathyaseelanK1
 
PDF
CSS INTRODUCTION SLIDES WITH HTML CODE.pdf
Aasma13
 
PPTX
Howcssworks 100207024009-phpapp01
Likitha47
 
PDF
Introduction to css
Joseph Gabriel
 
PDF
Introduction to css
nikhilsh66131
 
PPTX
Understanding CSS for web development by software outsourcing company india
Jignesh Aakoliya
 
PPTX
Casecading Style Sheets for Hyper Text Transfer Protocol.pptx
usmanahmadawan
 
PPT
CSS Training in Bangalore
rajkamal560066
 
PPTX
HTML Lesson HTML FormsHTML Formsvv4.pptx
gacayte0906
 
DOC
Css introduction
Sridhar P
 
PPTX
WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS)
brianbyamukama302
 
DOC
Css introduction
vishnu murthy
 
PPTX
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
PPTX
css3.pptx
ThiyaguPappu
 
PPT
6_CasCadingStylesSheetsCSS.ppt
VARNITBHASKAR1
 
PPTX
Beginners css tutorial for web designers
Singsys Pte Ltd
 
PPTX
uptu web technology unit 2 Css
Abhishek Kesharwani
 
PDF
Cascading Style Sheets
Mukesh Tekwani
 
Css Introduction
SathyaseelanK1
 
CSS INTRODUCTION SLIDES WITH HTML CODE.pdf
Aasma13
 
Howcssworks 100207024009-phpapp01
Likitha47
 
Introduction to css
Joseph Gabriel
 
Introduction to css
nikhilsh66131
 
Understanding CSS for web development by software outsourcing company india
Jignesh Aakoliya
 
Casecading Style Sheets for Hyper Text Transfer Protocol.pptx
usmanahmadawan
 
CSS Training in Bangalore
rajkamal560066
 
HTML Lesson HTML FormsHTML Formsvv4.pptx
gacayte0906
 
Css introduction
Sridhar P
 
WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS)
brianbyamukama302
 
Css introduction
vishnu murthy
 
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
css3.pptx
ThiyaguPappu
 
6_CasCadingStylesSheetsCSS.ppt
VARNITBHASKAR1
 
Beginners css tutorial for web designers
Singsys Pte Ltd
 
uptu web technology unit 2 Css
Abhishek Kesharwani
 
Cascading Style Sheets
Mukesh Tekwani
 
Ad

Recently uploaded (20)

PDF
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
PDF
''Taming Explosive Growth: Building Resilience in a Hyper-Scaled Financial Pl...
Fwdays
 
PDF
Unlocking FME Flow’s Potential: Architecture Design for Modern Enterprises
Safe Software
 
PDF
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
PDF
Why aren't you using FME Flow's CPU Time?
Safe Software
 
DOCX
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 
PDF
Understanding The True Cost of DynamoDB Webinar
ScyllaDB
 
PDF
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
PDF
Understanding AI Optimization AIO, LLMO, and GEO
CoDigital
 
PDF
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
PPTX
Mastering Authorization: Integrating Authentication and Authorization Data in...
Hitachi, Ltd. OSS Solution Center.
 
PDF
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
PDF
Java 25 and Beyond - A Roadmap of Innovations
Ana-Maria Mihalceanu
 
PPSX
Usergroup - OutSystems Architecture.ppsx
Kurt Vandevelde
 
PDF
Hello I'm "AI" Your New _________________
Dr. Tathagat Varma
 
PDF
Kubernetes - Architecture & Components.pdf
geethak285
 
PDF
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 
PDF
99 Bottles of Trust on the Wall — Operational Principles for Trust in Cyber C...
treyka
 
PPTX
Enabling the Digital Artisan – keynote at ICOCI 2025
Alan Dix
 
PPTX
Smarter Governance with AI: What Every Board Needs to Know
OnBoard
 
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
''Taming Explosive Growth: Building Resilience in a Hyper-Scaled Financial Pl...
Fwdays
 
Unlocking FME Flow’s Potential: Architecture Design for Modern Enterprises
Safe Software
 
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
Why aren't you using FME Flow's CPU Time?
Safe Software
 
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 
Understanding The True Cost of DynamoDB Webinar
ScyllaDB
 
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
Understanding AI Optimization AIO, LLMO, and GEO
CoDigital
 
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
Mastering Authorization: Integrating Authentication and Authorization Data in...
Hitachi, Ltd. OSS Solution Center.
 
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
Java 25 and Beyond - A Roadmap of Innovations
Ana-Maria Mihalceanu
 
Usergroup - OutSystems Architecture.ppsx
Kurt Vandevelde
 
Hello I'm "AI" Your New _________________
Dr. Tathagat Varma
 
Kubernetes - Architecture & Components.pdf
geethak285
 
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 
99 Bottles of Trust on the Wall — Operational Principles for Trust in Cyber C...
treyka
 
Enabling the Digital Artisan – keynote at ICOCI 2025
Alan Dix
 
Smarter Governance with AI: What Every Board Needs to Know
OnBoard
 
Ad

CSS Introduction

  • 1. By: Swati Sharma Introduction to CSS Unit-5 Web Technology
  • 2. What is CSS By: Swati Sharma  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
  • 3. Advantages of Style Sheets By: Swati Sharma  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
  • 4. Applying a single style sheet to multiple documents By: Swati Sharma
  • 5. Basic Structure of a Style By: Swati Sharma  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}
  • 6. Style Precedence By: Swati Sharma  External style sheet  Embedded styles  Inline styles
  • 7. Three Style Types By: Swati Sharma 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>
  • 8. Three Style Types By: Swati Sharma 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>
  • 9. Creating an Embedded Style By: Swati Sharma <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)
  • 10. An Example of an embedded style By: Swati Sharma <head> <title>Getting Started</title> <style type=“text/css”> h1 {font-family: sans-serif; color: organge} </style> </head>
  • 11. Three Style Types By: Swati Sharma 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
  • 12. Creating an External Style Sheet By: Swati Sharma  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
  • 13. Linking to Style Sheets 1 By: Swati Sharma  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
  • 14. External style sheet example By: Swati Sharma <head> <title>Getting Started</title> <link href=“style.css” rel=“stylesheet” type=“text/css” /> </head> h1 {font-family: sans-serif; color: orange} b {color: blue} html file Text file of css named “stylesheet”
  • 15. Style Sheet Strategies By: Swati Sharma  Wherever possible, place your styles in external style sheets  Take advantage of the power of CSS to have control over an entire Web site
  • 16. Style Sheet Strategies By: Swati Sharma  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
  • 17. Using IDs and Classes By: Swati Sharma  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>
  • 18. Working With Ids By: Swati Sharma  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}
  • 19. Classes By: Swati Sharma  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>
  • 20. Applying a style to a class By: Swati Sharma
  • 21. Working With Classes By: Swati Sharma  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}
  • 22. Working With Classes and Ids By: Swati Sharma  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
  • 23. Working With DIV By: Swati Sharma  <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}
  • 24. Working With <DIV> By: Swati Sharma DIV.Slogan {font-weigh:bold} <DIV CLASS=Slogan>Our new Slogan is:<BR>”We teach CSS”</DIV> style HTML code Our new…: “We teach…Resulting text
  • 25. Working With <span> By: Swati Sharma  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>
  • 26. CSS for Page Layout By: Swati Sharma  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>
  • 27. CSS for Page Layout By: Swati Sharma  Parts of the block-level elements:  Margin  Border  Padding
  • 28. CSS for Page Layout By: Swati Sharma I am teaching you CSS border margin padding
  • 29. Controlling the Margins By: Swati Sharma  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
  • 30. Controlling the Margins By: Swati Sharma  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}
  • 31. Setting the Padding Size By: Swati Sharma  To define padding, use:  padding: value  where value = a length value or a percentage (a padding proportional to the element’s width)
  • 32. Setting the Padding Size By: Swati Sharma  To set margins on a side, use:  padding-top  padding-right  padding-bottom  padding-left
  • 33. Formatting the Border By: Swati Sharma  Border can be set in three ways:  border-width  border-style  border-color
  • 34. Formatting the Border By: Swati Sharma  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
  • 35. Formatting Width & Height of Block-Level Boxes By: Swati Sharma  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}
  • 36. Using the Float Attribute By: Swati Sharma  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; }
  • 37. Turning off Float - Using Clear By: Swati Sharma 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; }
  • 38. Using the Float Attribute By: Swati Sharma float:right width:50px float:right width:50px clear:right
  • 39. Formatting Hypertext Links By: Swati Sharma  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}
  • 40. Styling Background By: Swati Sharma CSS background properties are used to define the background effects of an element. background-color background-image background-repeat background-attachment background-position
  • 41. Background Examples By: Swati Sharma 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)
  • 42. Styling Fonts By: Swati Sharma Font Font-size Font-family Font-style Normal Italic Font-weight
  • 43. Font Style Example By: Swati Sharma p{ font-family:"Times New Roman", Times, serif; font-style:italic; font-size:40px; font-weight:Bold; }
  • 44. Styling List By: Swati Sharma 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>
  • 45. List Properties By: Swati Sharma List-style List-style-image List-position List-style-type  Circle  Square  Upper-roman  Lower-roman  Upper-alpha  Lower-alpha
  • 46. List Example By: Swati Sharma 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'); }
  • 47. Styling Table By: Swati Sharma 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; }
  • 48. 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; }

Editor's Notes

  • #2: By: Swati Sharma Web Technology
  • #7: Web Technology By: Swati Sharma