SlideShare a Scribd company logo
CSS
DIV Tag in HTML
• The <div> tag defines a division or a section in an HTML document.
• The <div> tag is easily styled by using the class or id attribute.
• The HTML Content Division element (<div>) is the generic container for
flow content.
• It has no effect on the content or layout until styled in some way using
CSS)
Cascading style-sheets (CSS)
• Created by Hakon Lie of MIT in 1994
• Has become the W3C standard for controlling visual presentation of web
pages
• Cascading style-sheets are powerful mechanism to add style to web
document
• Enforce standards and uniformity
• Create dynamic effects
• Works by allowing you to specify rules
Advantages of CSS
• Saves time
• Easy to change
• Keep consistency
• Give you more control over layout
• Use styles with JavaScript
• Make it easy to create a common format for all the Web pages
Types of Style Sheets
• In-line styles
• Embedded/internal styles
• External style sheet
In-line Style Sheet
• Add styles to each tag within the HTML file
• Use it when you need to format just a single section in a web page
• Style attribute is used to add style
• Example
• <h1 style=“color:red; font-family: sans-sarif;” > This is my content </h1>
Internal Style Sheet
• A style is applied to the entire HTML file
• Use it when you need to modify all instances of particular element (e.g., h1) in a
web page
•This is define between head tag
Example
<style>
h1 {
color:red;
font-family:sans-serif;
}
</style>
OUTPUT
External Style Sheet
• An external style sheet is a text file containing the style definition
(declaration) having extension .css
• Use it when you need to control the style for an entire web site
• Steps to create external style sheet:-
• Open a new blank document in Notepad or Notepad++
• Type style declarations, For example: h1 {color:red; font-family:calibri;}
• Do not include <style> tags
• Save the document as filename.css
External Style Sheet
• 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 as .html
For example if .html and the .css file are in the same directory
<link href=file.css rel=“stylesheet” type=“text/css”>
Defining CSS Rule
A rule consists of
• A selector: element or elements the declaration applies to
• Declaration: how the elements referred to in the selector should be styled
• Property: which is the property of the selected element
• Value: which is a specification for this property
Using ID’s
° Use an id to distinguish something, like a paragraph, from the others in a
document
° The id selector is used to specify a style for a single, unique element
° For example:-
° CSS file:
° #id_name
{style attributes and values}
° HTML file
° <tag ID=id_name>
Using 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
° To create a class
• tag.class_name {style attributes} or .class_name {style attributes}
° To apply a style
• <tag CLASS=class_name>
• <h1 CLASS=FirstHeader>Content goes here….</h1>
Difference between ID’s and Classes
° You can’t have more than one tag with the same ID value
° You can apply the same Class value to multiple document tags
° Use ID's for any elements that are simply used once on a page
° OR
° Only use classes to style websites, but, when you have to use an element in
JavaScript, use an identifier
HTML File CSS File
file.css
Page.html
OUTPUT
HTML File CSS File
file.css
Page.html
We can use more than one classes in one tag by using “space”
OUTPUT
CSS Font properties
° font-family
° font-size
° font-weight
° font-style
° font-variant
CSS Font properties
font-family:
° Specifies the typeface or family of font that should be used
Common values:
° Arial, Courier/Courier New, Georgia, Times/Times New Roman and
Verdana
Example:
h1{
font-family:arial
}
CSS Font properties
font-size:
° Specifies the size of a font
Common values:
° In pixels (12px,20px etc.)
° Absolut size (small, medium, lage, x-large etc.)
Example:
h1{
font-size:20px
}
CSS Font properties
font-weight:
° Specifies whether the font should be bold or normal
Common values:
° Normal, bold, bolder, lighter
° 100, 200, 300, 400, 500, 600, 700, 800, 900
Example:
h1{
font-weight : bold
}
CSS Font properties
font-style:
° Specifies whether the font should be normal, italic or oblique
Common values:
° Normal, italic, oblique
Example:
h1{
font-style : italic
}
CSS Font properties
font-variant:
° Specifies whether the font should be normal or small-caps (smaller version
of upper case)
Common values:
° Normal, small-caps
Example:
h1{
font-variant : small-caps}
CSS Text properties
° color
° text-align
° vertical-align
° text-decoration
° text-transform
° word-spacing
° letter-spacing
CSS Text properties
° color:
• specifies the color of the text
• P{color : green}
° text-align:
• horizontal alignment of the text
• Left, right, center or justify
° vertical-align:
• Vertical alignment of the text
• Sub, super, top, middle, bottom
CSS Text properties
° text-decoration:
• specifies the whether the text should be underline, overline,
line-through or blinking
° text-transform:
• text should be lowercase, uppercase or capitalized
° letter-spacing:
• Specifies the space between letters
• H1{letter-spacing:3px}
CSS Text properties
° word-spacing:
• Specifies the space between words
• H1{word-spacing:4px}
CSS Background properties
° background-color:
• Specifies the background color
° background-image:
• Specifies the background image
° background-repeat:
• Specifies whether the image should repeat or not
° background-position:
• Where an image should be positioned
CSS Border properties
° border-style (solid, dashed, doted, double etc.)
° border-color
° border-bottom (solid, dashed, doted, double etc.)
°Padding-left
°Padding-right
°Padding-top
°padding-bottom
CSS Padding properties
Styling “HYPERLINKS”
° color :
• Changes the color of the links
° background-color :
• Highlights the link, as if it had been highlighted with a
highlighter pen
° text-decoration :
• Underline, strike through, over-line, blink
Styling “HYPERLINKS”
° Pseudo-classes of links:
° Link:
• Styles for links in general
° Visited:
• Styles the links which are already visited
° Hover:
• Styles when some on hovering over a link
° Active:
• Styles the links when a links is being clicked

More Related Content

Similar to CSS INTRODUCTION SLIDES WITH HTML CODE.pdf (20)

Css
CssCss
Css
Kamal Acharya
 
Css
CssCss
Css
Mukesh Tekwani
 
v5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptxv5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)
Webtech Learning
 
Basic css
Basic cssBasic css
Basic css
Gopinath Ambothi
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
vishal choudhary
 
CSS
CSSCSS
CSS
DivyaKS12
 
2_css.pptx
2_css.pptx2_css.pptx
2_css.pptx
VarunMM2
 
2_css.pptx
2_css.pptx2_css.pptx
2_css.pptx
VarunMM2
 
CSCADING style sheet. Internal external inline
CSCADING style sheet. Internal external inlineCSCADING style sheet. Internal external inline
CSCADING style sheet. Internal external inline
Ranjeet Reddy
 
css-ppt.pdf
css-ppt.pdfcss-ppt.pdf
css-ppt.pdf
EktaDesai14
 
CSS
CSSCSS
CSS
People Strategists
 
Cascading Style Sheets for web browser.pptx
Cascading Style Sheets for web browser.pptxCascading Style Sheets for web browser.pptx
Cascading Style Sheets for web browser.pptx
alvindalejoyosa1
 
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 SlidesIntro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
Heather Rock
 
Unit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology projectUnit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology project
abhiramhatwar
 
Web Typography
Web TypographyWeb Typography
Web Typography
Shawn Calvert
 
CSS Training in Bangalore
CSS Training in BangaloreCSS Training in Bangalore
CSS Training in Bangalore
rajkamal560066
 
3. CSS
3. CSS3. CSS
3. CSS
Pavle Đorđević
 
Cascading Styling Sheets(CSS) simple design language intended to transform th...
Cascading Styling Sheets(CSS) simple design language intended to transform th...Cascading Styling Sheets(CSS) simple design language intended to transform th...
Cascading Styling Sheets(CSS) simple design language intended to transform th...
JebaRaj26
 
Css introduction
Css  introductionCss  introduction
Css introduction
vishnu murthy
 
v5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptxv5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)
Webtech Learning
 
2_css.pptx
2_css.pptx2_css.pptx
2_css.pptx
VarunMM2
 
2_css.pptx
2_css.pptx2_css.pptx
2_css.pptx
VarunMM2
 
CSCADING style sheet. Internal external inline
CSCADING style sheet. Internal external inlineCSCADING style sheet. Internal external inline
CSCADING style sheet. Internal external inline
Ranjeet Reddy
 
Cascading Style Sheets for web browser.pptx
Cascading Style Sheets for web browser.pptxCascading Style Sheets for web browser.pptx
Cascading Style Sheets for web browser.pptx
alvindalejoyosa1
 
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 SlidesIntro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
Heather Rock
 
Unit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology projectUnit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology project
abhiramhatwar
 
CSS Training in Bangalore
CSS Training in BangaloreCSS Training in Bangalore
CSS Training in Bangalore
rajkamal560066
 
Cascading Styling Sheets(CSS) simple design language intended to transform th...
Cascading Styling Sheets(CSS) simple design language intended to transform th...Cascading Styling Sheets(CSS) simple design language intended to transform th...
Cascading Styling Sheets(CSS) simple design language intended to transform th...
JebaRaj26
 

Recently uploaded (20)

Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptxRai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Dr. Ravi Shankar Arya Mahila P. G. College, Banaras Hindu University, Varanasi, India.
 
Rose Cultivation Practices by Kushal Lamichhane.pdf
Rose Cultivation Practices by Kushal Lamichhane.pdfRose Cultivation Practices by Kushal Lamichhane.pdf
Rose Cultivation Practices by Kushal Lamichhane.pdf
kushallamichhame
 
Different pricelists for different shops in odoo Point of Sale in Odoo 17
Different pricelists for different shops in odoo Point of Sale in Odoo 17Different pricelists for different shops in odoo Point of Sale in Odoo 17
Different pricelists for different shops in odoo Point of Sale in Odoo 17
Celine George
 
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition IILDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDM & Mia eStudios
 
Strengthened Senior High School - Landas Tool Kit.pptx
Strengthened Senior High School - Landas Tool Kit.pptxStrengthened Senior High School - Landas Tool Kit.pptx
Strengthened Senior High School - Landas Tool Kit.pptx
SteffMusniQuiballo
 
Nice Dream.pdf /
Nice Dream.pdf                              /Nice Dream.pdf                              /
Nice Dream.pdf /
ErinUsher3
 
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdfForestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
ChalaKelbessa
 
Hemiptera & Neuroptera: Insect Diversity.pptx
Hemiptera & Neuroptera: Insect Diversity.pptxHemiptera & Neuroptera: Insect Diversity.pptx
Hemiptera & Neuroptera: Insect Diversity.pptx
Arshad Shaikh
 
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
parmarjuli1412
 
Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...
EduSkills OECD
 
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
SweetytamannaMohapat
 
MATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKANMATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKAN
aditya23173
 
POS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 SlidesPOS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 Slides
Celine George
 
Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptxAnalysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Shrutidhara2
 
MATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKANMATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKAN
aditya23173
 
Parenting Teens: Supporting Trust, resilience and independence
Parenting Teens: Supporting Trust, resilience and independenceParenting Teens: Supporting Trust, resilience and independence
Parenting Teens: Supporting Trust, resilience and independence
Pooky Knightsmith
 
TV Shows and web-series quiz | QUIZ CLUB OF PSGCAS | 13TH MARCH 2025
TV Shows and web-series quiz | QUIZ CLUB OF PSGCAS | 13TH MARCH 2025TV Shows and web-series quiz | QUIZ CLUB OF PSGCAS | 13TH MARCH 2025
TV Shows and web-series quiz | QUIZ CLUB OF PSGCAS | 13TH MARCH 2025
Quiz Club of PSG College of Arts & Science
 
june 10 2025 ppt for madden on art science is over.pptx
june 10 2025 ppt for madden on art science is over.pptxjune 10 2025 ppt for madden on art science is over.pptx
june 10 2025 ppt for madden on art science is over.pptx
roger malina
 
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
GeorgeDiamandis11
 
"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx
Arshad Shaikh
 
Rose Cultivation Practices by Kushal Lamichhane.pdf
Rose Cultivation Practices by Kushal Lamichhane.pdfRose Cultivation Practices by Kushal Lamichhane.pdf
Rose Cultivation Practices by Kushal Lamichhane.pdf
kushallamichhame
 
Different pricelists for different shops in odoo Point of Sale in Odoo 17
Different pricelists for different shops in odoo Point of Sale in Odoo 17Different pricelists for different shops in odoo Point of Sale in Odoo 17
Different pricelists for different shops in odoo Point of Sale in Odoo 17
Celine George
 
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition IILDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDM & Mia eStudios
 
Strengthened Senior High School - Landas Tool Kit.pptx
Strengthened Senior High School - Landas Tool Kit.pptxStrengthened Senior High School - Landas Tool Kit.pptx
Strengthened Senior High School - Landas Tool Kit.pptx
SteffMusniQuiballo
 
Nice Dream.pdf /
Nice Dream.pdf                              /Nice Dream.pdf                              /
Nice Dream.pdf /
ErinUsher3
 
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdfForestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
ChalaKelbessa
 
Hemiptera & Neuroptera: Insect Diversity.pptx
Hemiptera & Neuroptera: Insect Diversity.pptxHemiptera & Neuroptera: Insect Diversity.pptx
Hemiptera & Neuroptera: Insect Diversity.pptx
Arshad Shaikh
 
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
parmarjuli1412
 
Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...
EduSkills OECD
 
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
SweetytamannaMohapat
 
MATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKANMATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKAN
aditya23173
 
POS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 SlidesPOS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 Slides
Celine George
 
Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptxAnalysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Shrutidhara2
 
MATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKANMATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKAN
aditya23173
 
Parenting Teens: Supporting Trust, resilience and independence
Parenting Teens: Supporting Trust, resilience and independenceParenting Teens: Supporting Trust, resilience and independence
Parenting Teens: Supporting Trust, resilience and independence
Pooky Knightsmith
 
june 10 2025 ppt for madden on art science is over.pptx
june 10 2025 ppt for madden on art science is over.pptxjune 10 2025 ppt for madden on art science is over.pptx
june 10 2025 ppt for madden on art science is over.pptx
roger malina
 
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
GeorgeDiamandis11
 
"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx
Arshad Shaikh
 
Ad

CSS INTRODUCTION SLIDES WITH HTML CODE.pdf

  • 1. CSS
  • 2. DIV Tag in HTML • The <div> tag defines a division or a section in an HTML document. • The <div> tag is easily styled by using the class or id attribute. • The HTML Content Division element (<div>) is the generic container for flow content. • It has no effect on the content or layout until styled in some way using CSS)
  • 3. Cascading style-sheets (CSS) • Created by Hakon Lie of MIT in 1994 • Has become the W3C standard for controlling visual presentation of web pages • Cascading style-sheets are powerful mechanism to add style to web document • Enforce standards and uniformity • Create dynamic effects • Works by allowing you to specify rules
  • 4. Advantages of CSS • Saves time • Easy to change • Keep consistency • Give you more control over layout • Use styles with JavaScript • Make it easy to create a common format for all the Web pages
  • 5. Types of Style Sheets • In-line styles • Embedded/internal styles • External style sheet
  • 6. In-line Style Sheet • Add styles to each tag within the HTML file • Use it when you need to format just a single section in a web page • Style attribute is used to add style • Example • <h1 style=“color:red; font-family: sans-sarif;” > This is my content </h1>
  • 7. Internal Style Sheet • A style is applied to the entire HTML file • Use it when you need to modify all instances of particular element (e.g., h1) in a web page •This is define between head tag Example <style> h1 { color:red; font-family:sans-serif; } </style>
  • 9. External Style Sheet • An external style sheet is a text file containing the style definition (declaration) having extension .css • Use it when you need to control the style for an entire web site • Steps to create external style sheet:- • Open a new blank document in Notepad or Notepad++ • Type style declarations, For example: h1 {color:red; font-family:calibri;} • Do not include <style> tags • Save the document as filename.css
  • 10. External Style Sheet • 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 as .html For example if .html and the .css file are in the same directory <link href=file.css rel=“stylesheet” type=“text/css”>
  • 11. Defining CSS Rule A rule consists of • A selector: element or elements the declaration applies to • Declaration: how the elements referred to in the selector should be styled • Property: which is the property of the selected element • Value: which is a specification for this property
  • 12. Using ID’s ° Use an id to distinguish something, like a paragraph, from the others in a document ° The id selector is used to specify a style for a single, unique element ° For example:- ° CSS file: ° #id_name {style attributes and values} ° HTML file ° <tag ID=id_name>
  • 13. Using 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 ° To create a class • tag.class_name {style attributes} or .class_name {style attributes} ° To apply a style • <tag CLASS=class_name> • <h1 CLASS=FirstHeader>Content goes here….</h1>
  • 14. Difference between ID’s and Classes ° You can’t have more than one tag with the same ID value ° You can apply the same Class value to multiple document tags ° Use ID's for any elements that are simply used once on a page ° OR ° Only use classes to style websites, but, when you have to use an element in JavaScript, use an identifier
  • 15. HTML File CSS File file.css Page.html
  • 17. HTML File CSS File file.css Page.html We can use more than one classes in one tag by using “space”
  • 19. CSS Font properties ° font-family ° font-size ° font-weight ° font-style ° font-variant
  • 20. CSS Font properties font-family: ° Specifies the typeface or family of font that should be used Common values: ° Arial, Courier/Courier New, Georgia, Times/Times New Roman and Verdana Example: h1{ font-family:arial }
  • 21. CSS Font properties font-size: ° Specifies the size of a font Common values: ° In pixels (12px,20px etc.) ° Absolut size (small, medium, lage, x-large etc.) Example: h1{ font-size:20px }
  • 22. CSS Font properties font-weight: ° Specifies whether the font should be bold or normal Common values: ° Normal, bold, bolder, lighter ° 100, 200, 300, 400, 500, 600, 700, 800, 900 Example: h1{ font-weight : bold }
  • 23. CSS Font properties font-style: ° Specifies whether the font should be normal, italic or oblique Common values: ° Normal, italic, oblique Example: h1{ font-style : italic }
  • 24. CSS Font properties font-variant: ° Specifies whether the font should be normal or small-caps (smaller version of upper case) Common values: ° Normal, small-caps Example: h1{ font-variant : small-caps}
  • 25. CSS Text properties ° color ° text-align ° vertical-align ° text-decoration ° text-transform ° word-spacing ° letter-spacing
  • 26. CSS Text properties ° color: • specifies the color of the text • P{color : green} ° text-align: • horizontal alignment of the text • Left, right, center or justify ° vertical-align: • Vertical alignment of the text • Sub, super, top, middle, bottom
  • 27. CSS Text properties ° text-decoration: • specifies the whether the text should be underline, overline, line-through or blinking ° text-transform: • text should be lowercase, uppercase or capitalized ° letter-spacing: • Specifies the space between letters • H1{letter-spacing:3px}
  • 28. CSS Text properties ° word-spacing: • Specifies the space between words • H1{word-spacing:4px}
  • 29. CSS Background properties ° background-color: • Specifies the background color ° background-image: • Specifies the background image ° background-repeat: • Specifies whether the image should repeat or not ° background-position: • Where an image should be positioned
  • 30. CSS Border properties ° border-style (solid, dashed, doted, double etc.) ° border-color ° border-bottom (solid, dashed, doted, double etc.) °Padding-left °Padding-right °Padding-top °padding-bottom CSS Padding properties
  • 31. Styling “HYPERLINKS” ° color : • Changes the color of the links ° background-color : • Highlights the link, as if it had been highlighted with a highlighter pen ° text-decoration : • Underline, strike through, over-line, blink
  • 32. Styling “HYPERLINKS” ° Pseudo-classes of links: ° Link: • Styles for links in general ° Visited: • Styles the links which are already visited ° Hover: • Styles when some on hovering over a link ° Active: • Styles the links when a links is being clicked