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
Ad

More Related Content

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

Css present
Css presentCss present
Css present
MissaGiles
 
Learning CSS for beginners.ppt all that are but
Learning CSS for beginners.ppt all that are butLearning CSS for beginners.ppt all that are but
Learning CSS for beginners.ppt all that are but
DangyiGodSees
 
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
 
BITM3730Week4.pptx
BITM3730Week4.pptxBITM3730Week4.pptx
BITM3730Week4.pptx
MattMarino13
 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sass
Sean Wolfe
 
6_CasCadingStylesSheetsCSS.ppt
6_CasCadingStylesSheetsCSS.ppt6_CasCadingStylesSheetsCSS.ppt
6_CasCadingStylesSheetsCSS.ppt
VARNITBHASKAR1
 
CSS tutorial chapter 1
CSS tutorial chapter 1CSS tutorial chapter 1
CSS tutorial chapter 1
jeweltutin
 
CSS Basics part One
CSS Basics part OneCSS Basics part One
CSS Basics part One
M Ashraful Islam Jewel
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
AakankshaR
 
CSS
CSSCSS
CSS
DivyaKS12
 
css.ppt
css.pptcss.ppt
css.ppt
SchoolEducationDepar
 
Ifi7174 lesson2
Ifi7174 lesson2Ifi7174 lesson2
Ifi7174 lesson2
Sónia
 
Css
CssCss
Css
Nasla C.K
 
Cascading Style Sheets By Mukesh
Cascading Style Sheets By MukeshCascading Style Sheets By Mukesh
Cascading Style Sheets By Mukesh
Mukesh Kumar
 
Css
CssCss
Css
Kamal Acharya
 
it-150608145445-lva1-app6891Unit_3 .pptx
it-150608145445-lva1-app6891Unit_3 .pptxit-150608145445-lva1-app6891Unit_3 .pptx
it-150608145445-lva1-app6891Unit_3 .pptx
Shwetamaurya36
 
4. Web Technology CSS Basics-1
4. Web Technology CSS Basics-14. Web Technology CSS Basics-1
4. Web Technology CSS Basics-1
Jyoti Yadav
 
CSS-ppt.pptx f df dff dfvdfv fdvfdfddf dfv df
CSS-ppt.pptx f df dff dfvdfv fdvfdfddf dfv dfCSS-ppt.pptx f df dff dfvdfv fdvfdfddf dfv df
CSS-ppt.pptx f df dff dfvdfv fdvfdfddf dfv df
drpreetiwctm
 
CSS-part-1.ppt
CSS-part-1.pptCSS-part-1.ppt
CSS-part-1.ppt
AshwaniKumarYadav19
 
Html and css
Html and cssHtml and css
Html and css
Sukrit Gupta
 
Learning CSS for beginners.ppt all that are but
Learning CSS for beginners.ppt all that are butLearning CSS for beginners.ppt all that are but
Learning CSS for beginners.ppt all that are but
DangyiGodSees
 
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
 
BITM3730Week4.pptx
BITM3730Week4.pptxBITM3730Week4.pptx
BITM3730Week4.pptx
MattMarino13
 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sass
Sean Wolfe
 
6_CasCadingStylesSheetsCSS.ppt
6_CasCadingStylesSheetsCSS.ppt6_CasCadingStylesSheetsCSS.ppt
6_CasCadingStylesSheetsCSS.ppt
VARNITBHASKAR1
 
CSS tutorial chapter 1
CSS tutorial chapter 1CSS tutorial chapter 1
CSS tutorial chapter 1
jeweltutin
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
AakankshaR
 
Ifi7174 lesson2
Ifi7174 lesson2Ifi7174 lesson2
Ifi7174 lesson2
Sónia
 
Cascading Style Sheets By Mukesh
Cascading Style Sheets By MukeshCascading Style Sheets By Mukesh
Cascading Style Sheets By Mukesh
Mukesh Kumar
 
it-150608145445-lva1-app6891Unit_3 .pptx
it-150608145445-lva1-app6891Unit_3 .pptxit-150608145445-lva1-app6891Unit_3 .pptx
it-150608145445-lva1-app6891Unit_3 .pptx
Shwetamaurya36
 
4. Web Technology CSS Basics-1
4. Web Technology CSS Basics-14. Web Technology CSS Basics-1
4. Web Technology CSS Basics-1
Jyoti Yadav
 
CSS-ppt.pptx f df dff dfvdfv fdvfdfddf dfv df
CSS-ppt.pptx f df dff dfvdfv fdvfdfddf dfv dfCSS-ppt.pptx f df dff dfvdfv fdvfdfddf dfv df
CSS-ppt.pptx f df dff dfvdfv fdvfdfddf dfv df
drpreetiwctm
 

Recently uploaded (20)

Timber Pitch Roof Construction Measurement-2024.pptx
Timber Pitch Roof Construction Measurement-2024.pptxTimber Pitch Roof Construction Measurement-2024.pptx
Timber Pitch Roof Construction Measurement-2024.pptx
Tantish QS, UTM
 
One Hot encoding a revolution in Machine learning
One Hot encoding a revolution in Machine learningOne Hot encoding a revolution in Machine learning
One Hot encoding a revolution in Machine learning
momer9505
 
Fundamentals of PR: Wk 4 - Strategic Communications
Fundamentals of PR: Wk 4 - Strategic CommunicationsFundamentals of PR: Wk 4 - Strategic Communications
Fundamentals of PR: Wk 4 - Strategic Communications
Jordan Williams
 
Quality Contril Analysis of Containers.pdf
Quality Contril Analysis of Containers.pdfQuality Contril Analysis of Containers.pdf
Quality Contril Analysis of Containers.pdf
Dr. Bindiya Chauhan
 
Open Access: Revamping Library Learning Resources.
Open Access: Revamping Library Learning Resources.Open Access: Revamping Library Learning Resources.
Open Access: Revamping Library Learning Resources.
Rishi Bankim Chandra Evening College, Naihati, North 24 Parganas, West Bengal, India
 
Odoo Inventory Rules and Routes v17 - Odoo Slides
Odoo Inventory Rules and Routes v17 - Odoo SlidesOdoo Inventory Rules and Routes v17 - Odoo Slides
Odoo Inventory Rules and Routes v17 - Odoo Slides
Celine George
 
LDMMIA Reiki Master Spring 2025 Mini Updates
LDMMIA Reiki Master Spring 2025 Mini UpdatesLDMMIA Reiki Master Spring 2025 Mini Updates
LDMMIA Reiki Master Spring 2025 Mini Updates
LDM Mia eStudios
 
Vitamins Chapter-7, Biochemistry and clinical pathology, D.Pharm 2nd year
Vitamins Chapter-7, Biochemistry and clinical pathology, D.Pharm 2nd yearVitamins Chapter-7, Biochemistry and clinical pathology, D.Pharm 2nd year
Vitamins Chapter-7, Biochemistry and clinical pathology, D.Pharm 2nd year
ARUN KUMAR
 
GDGLSPGCOER - Git and GitHub Workshop.pptx
GDGLSPGCOER - Git and GitHub Workshop.pptxGDGLSPGCOER - Git and GitHub Workshop.pptx
GDGLSPGCOER - Git and GitHub Workshop.pptx
azeenhodekar
 
Stein, Hunt, Green letter to Congress April 2025
Stein, Hunt, Green letter to Congress April 2025Stein, Hunt, Green letter to Congress April 2025
Stein, Hunt, Green letter to Congress April 2025
Mebane Rash
 
Geography Sem II Unit 1C Correlation of Geography with other school subjects
Geography Sem II Unit 1C Correlation of Geography with other school subjectsGeography Sem II Unit 1C Correlation of Geography with other school subjects
Geography Sem II Unit 1C Correlation of Geography with other school subjects
ProfDrShaikhImran
 
UNIT 3 NATIONAL HEALTH PROGRAMMEE. SOCIAL AND PREVENTIVE PHARMACY
UNIT 3 NATIONAL HEALTH PROGRAMMEE. SOCIAL AND PREVENTIVE PHARMACYUNIT 3 NATIONAL HEALTH PROGRAMMEE. SOCIAL AND PREVENTIVE PHARMACY
UNIT 3 NATIONAL HEALTH PROGRAMMEE. SOCIAL AND PREVENTIVE PHARMACY
DR.PRISCILLA MARY J
 
YSPH VMOC Special Report - Measles Outbreak Southwest US 4-30-2025.pptx
YSPH VMOC Special Report - Measles Outbreak  Southwest US 4-30-2025.pptxYSPH VMOC Special Report - Measles Outbreak  Southwest US 4-30-2025.pptx
YSPH VMOC Special Report - Measles Outbreak Southwest US 4-30-2025.pptx
Yale School of Public Health - The Virtual Medical Operations Center (VMOC)
 
Introduction to Vibe Coding and Vibe Engineering
Introduction to Vibe Coding and Vibe EngineeringIntroduction to Vibe Coding and Vibe Engineering
Introduction to Vibe Coding and Vibe Engineering
Damian T. Gordon
 
Presentation of the MIPLM subject matter expert Erdem Kaya
Presentation of the MIPLM subject matter expert Erdem KayaPresentation of the MIPLM subject matter expert Erdem Kaya
Presentation of the MIPLM subject matter expert Erdem Kaya
MIPLM
 
K12 Tableau Tuesday - Algebra Equity and Access in Atlanta Public Schools
K12 Tableau Tuesday  - Algebra Equity and Access in Atlanta Public SchoolsK12 Tableau Tuesday  - Algebra Equity and Access in Atlanta Public Schools
K12 Tableau Tuesday - Algebra Equity and Access in Atlanta Public Schools
dogden2
 
Ultimate VMware 2V0-11.25 Exam Dumps for Exam Success
Ultimate VMware 2V0-11.25 Exam Dumps for Exam SuccessUltimate VMware 2V0-11.25 Exam Dumps for Exam Success
Ultimate VMware 2V0-11.25 Exam Dumps for Exam Success
Mark Soia
 
To study Digestive system of insect.pptx
To study Digestive system of insect.pptxTo study Digestive system of insect.pptx
To study Digestive system of insect.pptx
Arshad Shaikh
 
Exploring-Substances-Acidic-Basic-and-Neutral.pdf
Exploring-Substances-Acidic-Basic-and-Neutral.pdfExploring-Substances-Acidic-Basic-and-Neutral.pdf
Exploring-Substances-Acidic-Basic-and-Neutral.pdf
Sandeep Swamy
 
Michelle Rumley & Mairéad Mooney, Boole Library, University College Cork. Tra...
Michelle Rumley & Mairéad Mooney, Boole Library, University College Cork. Tra...Michelle Rumley & Mairéad Mooney, Boole Library, University College Cork. Tra...
Michelle Rumley & Mairéad Mooney, Boole Library, University College Cork. Tra...
Library Association of Ireland
 
Timber Pitch Roof Construction Measurement-2024.pptx
Timber Pitch Roof Construction Measurement-2024.pptxTimber Pitch Roof Construction Measurement-2024.pptx
Timber Pitch Roof Construction Measurement-2024.pptx
Tantish QS, UTM
 
One Hot encoding a revolution in Machine learning
One Hot encoding a revolution in Machine learningOne Hot encoding a revolution in Machine learning
One Hot encoding a revolution in Machine learning
momer9505
 
Fundamentals of PR: Wk 4 - Strategic Communications
Fundamentals of PR: Wk 4 - Strategic CommunicationsFundamentals of PR: Wk 4 - Strategic Communications
Fundamentals of PR: Wk 4 - Strategic Communications
Jordan Williams
 
Quality Contril Analysis of Containers.pdf
Quality Contril Analysis of Containers.pdfQuality Contril Analysis of Containers.pdf
Quality Contril Analysis of Containers.pdf
Dr. Bindiya Chauhan
 
Odoo Inventory Rules and Routes v17 - Odoo Slides
Odoo Inventory Rules and Routes v17 - Odoo SlidesOdoo Inventory Rules and Routes v17 - Odoo Slides
Odoo Inventory Rules and Routes v17 - Odoo Slides
Celine George
 
LDMMIA Reiki Master Spring 2025 Mini Updates
LDMMIA Reiki Master Spring 2025 Mini UpdatesLDMMIA Reiki Master Spring 2025 Mini Updates
LDMMIA Reiki Master Spring 2025 Mini Updates
LDM Mia eStudios
 
Vitamins Chapter-7, Biochemistry and clinical pathology, D.Pharm 2nd year
Vitamins Chapter-7, Biochemistry and clinical pathology, D.Pharm 2nd yearVitamins Chapter-7, Biochemistry and clinical pathology, D.Pharm 2nd year
Vitamins Chapter-7, Biochemistry and clinical pathology, D.Pharm 2nd year
ARUN KUMAR
 
GDGLSPGCOER - Git and GitHub Workshop.pptx
GDGLSPGCOER - Git and GitHub Workshop.pptxGDGLSPGCOER - Git and GitHub Workshop.pptx
GDGLSPGCOER - Git and GitHub Workshop.pptx
azeenhodekar
 
Stein, Hunt, Green letter to Congress April 2025
Stein, Hunt, Green letter to Congress April 2025Stein, Hunt, Green letter to Congress April 2025
Stein, Hunt, Green letter to Congress April 2025
Mebane Rash
 
Geography Sem II Unit 1C Correlation of Geography with other school subjects
Geography Sem II Unit 1C Correlation of Geography with other school subjectsGeography Sem II Unit 1C Correlation of Geography with other school subjects
Geography Sem II Unit 1C Correlation of Geography with other school subjects
ProfDrShaikhImran
 
UNIT 3 NATIONAL HEALTH PROGRAMMEE. SOCIAL AND PREVENTIVE PHARMACY
UNIT 3 NATIONAL HEALTH PROGRAMMEE. SOCIAL AND PREVENTIVE PHARMACYUNIT 3 NATIONAL HEALTH PROGRAMMEE. SOCIAL AND PREVENTIVE PHARMACY
UNIT 3 NATIONAL HEALTH PROGRAMMEE. SOCIAL AND PREVENTIVE PHARMACY
DR.PRISCILLA MARY J
 
Introduction to Vibe Coding and Vibe Engineering
Introduction to Vibe Coding and Vibe EngineeringIntroduction to Vibe Coding and Vibe Engineering
Introduction to Vibe Coding and Vibe Engineering
Damian T. Gordon
 
Presentation of the MIPLM subject matter expert Erdem Kaya
Presentation of the MIPLM subject matter expert Erdem KayaPresentation of the MIPLM subject matter expert Erdem Kaya
Presentation of the MIPLM subject matter expert Erdem Kaya
MIPLM
 
K12 Tableau Tuesday - Algebra Equity and Access in Atlanta Public Schools
K12 Tableau Tuesday  - Algebra Equity and Access in Atlanta Public SchoolsK12 Tableau Tuesday  - Algebra Equity and Access in Atlanta Public Schools
K12 Tableau Tuesday - Algebra Equity and Access in Atlanta Public Schools
dogden2
 
Ultimate VMware 2V0-11.25 Exam Dumps for Exam Success
Ultimate VMware 2V0-11.25 Exam Dumps for Exam SuccessUltimate VMware 2V0-11.25 Exam Dumps for Exam Success
Ultimate VMware 2V0-11.25 Exam Dumps for Exam Success
Mark Soia
 
To study Digestive system of insect.pptx
To study Digestive system of insect.pptxTo study Digestive system of insect.pptx
To study Digestive system of insect.pptx
Arshad Shaikh
 
Exploring-Substances-Acidic-Basic-and-Neutral.pdf
Exploring-Substances-Acidic-Basic-and-Neutral.pdfExploring-Substances-Acidic-Basic-and-Neutral.pdf
Exploring-Substances-Acidic-Basic-and-Neutral.pdf
Sandeep Swamy
 
Michelle Rumley & Mairéad Mooney, Boole Library, University College Cork. Tra...
Michelle Rumley & Mairéad Mooney, Boole Library, University College Cork. Tra...Michelle Rumley & Mairéad Mooney, Boole Library, University College Cork. Tra...
Michelle Rumley & Mairéad Mooney, Boole Library, University College Cork. Tra...
Library Association of Ireland
 
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