SlideShare a Scribd company logo
CSS Basic Introduction, Rules,
And Tips
2
CSS Introduction,
Rules, And Tips:
CSS stands for Cascading Style Sheets. CSS
describes how HTML elements are to be displayed on
screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of
multiple web pages all at once
CSS Syntax:
The selector points to the HTML element you
want to style. The declaration block contains one
or more declarations separated by semicolons.
Each declaration includes a CSS property name
and a value, separated by a colon. Multiple CSS
declarations are separated with semicolons, and
declaration blocks are surrounded by curly
braces.
CSS Selectors:
CSS selectors are used to "find" (or select) the HTML elements
you want to style.
We can divide CSS selectors into five categories:
•Simple selectors (select elements based on name, id, class)
•Combinator selectors (select elements based on a specific
relationship between them)
•Pseudo-class selectors (select elements based on a certain
state)
•Pseudo-elements selectors (select and style a part of an
element)
•Attribute selectors (select elements based on an attribute or
attribute value)
CSS Selectors:
CSS selectors are used to "find" (or select) the HTML elements
you want to style.
We can divide CSS selectors into five categories:
•Simple selectors (select elements based on name, id, class)
•Combinator selectors (select elements based on a specific
relationship between them)
•Pseudo-class selectors (select elements based on a certain
state)
•Pseudo-elements selectors (select and style a part of an
element)
•Attribute selectors (select elements based on an attribute or
attribute value)
CSS ID Selectors:
The id selector uses the id attribute of an HTML element to
select a specific element.
The id of an element is unique within a page, so the id selector
is used to select one unique element!
To select an element with a specific id, write a hash (#)
character, followed by the id of the element.
CSS Class Selectors:
The class selector selects HTML elements with a specific class
attribute.
To select elements with a specific class, write a period (.)
character, followed by the class name.
CSS Universal Selectors:
The universal selector (*) selects all HTML elements on the
page.
CSS Grouping Selectors
The grouping selector selects all the HTML elements with the
same style definitions.
Look at the following CSS code (the h1, h2, and p elements
have the same style definitions):
CSS Basic Introduction

More Related Content

What's hot

Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
Harshil Darji
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
Swati Sharma
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
KushagraChadha1
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introductionapnwebdev
 
Css
CssCss
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
Evolution Network
 
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)
Harshit Srivastava
 
Cascading style sheets (CSS)
Cascading style sheets (CSS)Cascading style sheets (CSS)
Cascading style sheets (CSS)
Harshita Yadav
 
CSS
CSS CSS
CSS
Sunil OS
 
Css ppt
Css pptCss ppt
Css ppt
Nidhi mishra
 
Css lecture notes
Css lecture notesCss lecture notes
Css lecture notes
Santhiya Grace
 

What's hot (19)

Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
 
Css
CssCss
Css
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Css
CssCss
Css
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Basic css
Basic cssBasic css
Basic css
 
Casc Style Sheets Ii
Casc Style Sheets IiCasc Style Sheets Ii
Casc Style Sheets Ii
 
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)
 
CSS
CSSCSS
CSS
 
Css
CssCss
Css
 
Cascading style sheets (CSS)
Cascading style sheets (CSS)Cascading style sheets (CSS)
Cascading style sheets (CSS)
 
CSS
CSS CSS
CSS
 
Css ppt
Css pptCss ppt
Css ppt
 
Css lecture notes
Css lecture notesCss lecture notes
Css lecture notes
 

Similar to CSS Basic Introduction

Web Concepts_Introduction to presentation.pptx
Web Concepts_Introduction to presentation.pptxWeb Concepts_Introduction to presentation.pptx
Web Concepts_Introduction to presentation.pptx
clement swarnappa
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Ameer Khan
 
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.ppt
css.pptcss.ppt
css.ppt
bhasula
 
Css.html
Css.htmlCss.html
Cascading style sheets, Introduction to web programming
Cascading style sheets, Introduction to web programmingCascading style sheets, Introduction to web programming
Cascading style sheets, Introduction to web programming
LikhithaBrunda
 
Css part 1
Css part 1Css part 1
Css part 1
lokenra
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Erin M. Kidwell
 
Web Development - Lecture 5
Web Development - Lecture 5Web Development - Lecture 5
Web Development - Lecture 5
Syed Shahzaib Sohail
 
Intro to css
Intro to cssIntro to css
Intro to css
Rajashekarkorva
 
Ia css
Ia  cssIa  css
Ia css
osman do
 
Css1
Css1Css1
Css1
teach4uin
 
introduction to CSS
introduction to CSSintroduction to CSS
introduction to CSS
Manish jariyal
 
CSS
CSSCSS
Css
CssCss
Web Design & Development - Session 2
Web Design & Development - Session 2Web Design & Development - Session 2
Web Design & Development - Session 2
Shahrzad Peyman
 
Automated Analysis of CSS Rules to Support Style Maintenance
Automated Analysis of CSS Rules to Support Style MaintenanceAutomated Analysis of CSS Rules to Support Style Maintenance
Automated Analysis of CSS Rules to Support Style Maintenance
Abhishek Rakshe
 
CSS.pptx
CSS.pptxCSS.pptx
Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheetsJafar Nesargi
 

Similar to CSS Basic Introduction (20)

Web Concepts_Introduction to presentation.pptx
Web Concepts_Introduction to presentation.pptxWeb Concepts_Introduction to presentation.pptx
Web Concepts_Introduction to presentation.pptx
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
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...
 
css.ppt
css.pptcss.ppt
css.ppt
 
Css.html
Css.htmlCss.html
Css.html
 
Cascading style sheets, Introduction to web programming
Cascading style sheets, Introduction to web programmingCascading style sheets, Introduction to web programming
Cascading style sheets, Introduction to web programming
 
Css part 1
Css part 1Css part 1
Css part 1
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
 
Css
CssCss
Css
 
Web Development - Lecture 5
Web Development - Lecture 5Web Development - Lecture 5
Web Development - Lecture 5
 
Intro to css
Intro to cssIntro to css
Intro to css
 
Ia css
Ia  cssIa  css
Ia css
 
Css1
Css1Css1
Css1
 
introduction to CSS
introduction to CSSintroduction to CSS
introduction to CSS
 
CSS
CSSCSS
CSS
 
Css
CssCss
Css
 
Web Design & Development - Session 2
Web Design & Development - Session 2Web Design & Development - Session 2
Web Design & Development - Session 2
 
Automated Analysis of CSS Rules to Support Style Maintenance
Automated Analysis of CSS Rules to Support Style MaintenanceAutomated Analysis of CSS Rules to Support Style Maintenance
Automated Analysis of CSS Rules to Support Style Maintenance
 
CSS.pptx
CSS.pptxCSS.pptx
CSS.pptx
 
Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheets
 

More from Reema

Google Analytics Course For Beginners
Google Analytics Course For BeginnersGoogle Analytics Course For Beginners
Google Analytics Course For Beginners
Reema
 
Conclusion Of The Course
Conclusion Of The CourseConclusion Of The Course
Conclusion Of The Course
Reema
 
Introduction
IntroductionIntroduction
Introduction
Reema
 
Create A Texture Pattern:
Create A Texture Pattern:Create A Texture Pattern:
Create A Texture Pattern:
Reema
 
Creating The Footer:
Creating The Footer:Creating The Footer:
Creating The Footer:
Reema
 
Creating The Main Content Area
Creating The Main Content AreaCreating The Main Content Area
Creating The Main Content Area
Reema
 
Create The Quick Quote Section:
Create The Quick Quote Section:Create The Quick Quote Section:
Create The Quick Quote Section:
Reema
 
Create The Featured Project Section:
Create The Featured Project Section:Create The Featured Project Section:
Create The Featured Project Section:
Reema
 
Creating The Navigation Bar:
Creating The Navigation Bar:Creating The Navigation Bar:
Creating The Navigation Bar:
Reema
 
Creating The Logo:
Creating The Logo:Creating The Logo:
Creating The Logo:
Reema
 
Prepare Your Photoshop Document:
Prepare Your Photoshop Document:Prepare Your Photoshop Document:
Prepare Your Photoshop Document:
Reema
 
Conclusion Of The Course
Conclusion Of The CourseConclusion Of The Course
Conclusion Of The Course
Reema
 
Adding A Dash In jQuery:
Adding A Dash In jQuery:Adding A Dash In jQuery:
Adding A Dash In jQuery:
Reema
 
Introduction To jQuery:
Introduction To jQuery:Introduction To jQuery:
Introduction To jQuery:
Reema
 
Introduction To JavaScript Ajax
Introduction To JavaScript AjaxIntroduction To JavaScript Ajax
Introduction To JavaScript Ajax
Reema
 
Introduction To JavaScript
Introduction To JavaScriptIntroduction To JavaScript
Introduction To JavaScript
Reema
 
Responsive Web Development
Responsive Web DevelopmentResponsive Web Development
Responsive Web Development
Reema
 
How To Add CSS The Correct Way.
How To Add CSS The Correct Way.How To Add CSS The Correct Way.
How To Add CSS The Correct Way.
Reema
 
CSS Basic Introduction, Rules, And Tips
CSS Basic Introduction, Rules, And TipsCSS Basic Introduction, Rules, And Tips
CSS Basic Introduction, Rules, And Tips
Reema
 
HTML Semantic Elements
HTML Semantic ElementsHTML Semantic Elements
HTML Semantic Elements
Reema
 

More from Reema (20)

Google Analytics Course For Beginners
Google Analytics Course For BeginnersGoogle Analytics Course For Beginners
Google Analytics Course For Beginners
 
Conclusion Of The Course
Conclusion Of The CourseConclusion Of The Course
Conclusion Of The Course
 
Introduction
IntroductionIntroduction
Introduction
 
Create A Texture Pattern:
Create A Texture Pattern:Create A Texture Pattern:
Create A Texture Pattern:
 
Creating The Footer:
Creating The Footer:Creating The Footer:
Creating The Footer:
 
Creating The Main Content Area
Creating The Main Content AreaCreating The Main Content Area
Creating The Main Content Area
 
Create The Quick Quote Section:
Create The Quick Quote Section:Create The Quick Quote Section:
Create The Quick Quote Section:
 
Create The Featured Project Section:
Create The Featured Project Section:Create The Featured Project Section:
Create The Featured Project Section:
 
Creating The Navigation Bar:
Creating The Navigation Bar:Creating The Navigation Bar:
Creating The Navigation Bar:
 
Creating The Logo:
Creating The Logo:Creating The Logo:
Creating The Logo:
 
Prepare Your Photoshop Document:
Prepare Your Photoshop Document:Prepare Your Photoshop Document:
Prepare Your Photoshop Document:
 
Conclusion Of The Course
Conclusion Of The CourseConclusion Of The Course
Conclusion Of The Course
 
Adding A Dash In jQuery:
Adding A Dash In jQuery:Adding A Dash In jQuery:
Adding A Dash In jQuery:
 
Introduction To jQuery:
Introduction To jQuery:Introduction To jQuery:
Introduction To jQuery:
 
Introduction To JavaScript Ajax
Introduction To JavaScript AjaxIntroduction To JavaScript Ajax
Introduction To JavaScript Ajax
 
Introduction To JavaScript
Introduction To JavaScriptIntroduction To JavaScript
Introduction To JavaScript
 
Responsive Web Development
Responsive Web DevelopmentResponsive Web Development
Responsive Web Development
 
How To Add CSS The Correct Way.
How To Add CSS The Correct Way.How To Add CSS The Correct Way.
How To Add CSS The Correct Way.
 
CSS Basic Introduction, Rules, And Tips
CSS Basic Introduction, Rules, And TipsCSS Basic Introduction, Rules, And Tips
CSS Basic Introduction, Rules, And Tips
 
HTML Semantic Elements
HTML Semantic ElementsHTML Semantic Elements
HTML Semantic Elements
 

Recently uploaded

ikea_woodgreen_petscharity_cat-alogue_digital.pdf
ikea_woodgreen_petscharity_cat-alogue_digital.pdfikea_woodgreen_petscharity_cat-alogue_digital.pdf
ikea_woodgreen_petscharity_cat-alogue_digital.pdf
agatadrynko
 
Building Your Employer Brand with Social Media
Building Your Employer Brand with Social MediaBuilding Your Employer Brand with Social Media
Building Your Employer Brand with Social Media
LuanWise
 
The effects of customers service quality and online reviews on customer loyal...
The effects of customers service quality and online reviews on customer loyal...The effects of customers service quality and online reviews on customer loyal...
The effects of customers service quality and online reviews on customer loyal...
balatucanapplelovely
 
Understanding User Needs and Satisfying Them
Understanding User Needs and Satisfying ThemUnderstanding User Needs and Satisfying Them
Understanding User Needs and Satisfying Them
Aggregage
 
Discover the innovative and creative projects that highlight my journey throu...
Discover the innovative and creative projects that highlight my journey throu...Discover the innovative and creative projects that highlight my journey throu...
Discover the innovative and creative projects that highlight my journey throu...
dylandmeas
 
Exploring Patterns of Connection with Social Dreaming
Exploring Patterns of Connection with Social DreamingExploring Patterns of Connection with Social Dreaming
Exploring Patterns of Connection with Social Dreaming
Nicola Wreford-Howard
 
Kseniya Leshchenko: Shared development support service model as the way to ma...
Kseniya Leshchenko: Shared development support service model as the way to ma...Kseniya Leshchenko: Shared development support service model as the way to ma...
Kseniya Leshchenko: Shared development support service model as the way to ma...
Lviv Startup Club
 
VAT Registration Outlined In UAE: Benefits and Requirements
VAT Registration Outlined In UAE: Benefits and RequirementsVAT Registration Outlined In UAE: Benefits and Requirements
VAT Registration Outlined In UAE: Benefits and Requirements
uae taxgpt
 
Authentically Social by Corey Perlman - EO Puerto Rico
Authentically Social by Corey Perlman - EO Puerto RicoAuthentically Social by Corey Perlman - EO Puerto Rico
Authentically Social by Corey Perlman - EO Puerto Rico
Corey Perlman, Social Media Speaker and Consultant
 
Event Report - SAP Sapphire 2024 Orlando - lots of innovation and old challenges
Event Report - SAP Sapphire 2024 Orlando - lots of innovation and old challengesEvent Report - SAP Sapphire 2024 Orlando - lots of innovation and old challenges
Event Report - SAP Sapphire 2024 Orlando - lots of innovation and old challenges
Holger Mueller
 
-- June 2024 is National Volunteer Month --
-- June 2024 is National Volunteer Month ---- June 2024 is National Volunteer Month --
-- June 2024 is National Volunteer Month --
NZSG
 
Recruiting in the Digital Age: A Social Media Masterclass
Recruiting in the Digital Age: A Social Media MasterclassRecruiting in the Digital Age: A Social Media Masterclass
Recruiting in the Digital Age: A Social Media Masterclass
LuanWise
 
Search Disrupted Google’s Leaked Documents Rock the SEO World.pdf
Search Disrupted Google’s Leaked Documents Rock the SEO World.pdfSearch Disrupted Google’s Leaked Documents Rock the SEO World.pdf
Search Disrupted Google’s Leaked Documents Rock the SEO World.pdf
Arihant Webtech Pvt. Ltd
 
Project File Report BBA 6th semester.pdf
Project File Report BBA 6th semester.pdfProject File Report BBA 6th semester.pdf
Project File Report BBA 6th semester.pdf
RajPriye
 
Brand Analysis for an artist named Struan
Brand Analysis for an artist named StruanBrand Analysis for an artist named Struan
Brand Analysis for an artist named Struan
sarahvanessa51503
 
In the Adani-Hindenburg case, what is SEBI investigating.pptx
In the Adani-Hindenburg case, what is SEBI investigating.pptxIn the Adani-Hindenburg case, what is SEBI investigating.pptx
In the Adani-Hindenburg case, what is SEBI investigating.pptx
Adani case
 
Cree_Rey_BrandIdentityKit.PDF_PersonalBd
Cree_Rey_BrandIdentityKit.PDF_PersonalBdCree_Rey_BrandIdentityKit.PDF_PersonalBd
Cree_Rey_BrandIdentityKit.PDF_PersonalBd
creerey
 
Company Valuation webinar series - Tuesday, 4 June 2024
Company Valuation webinar series - Tuesday, 4 June 2024Company Valuation webinar series - Tuesday, 4 June 2024
Company Valuation webinar series - Tuesday, 4 June 2024
FelixPerez547899
 
ikea_woodgreen_petscharity_dog-alogue_digital.pdf
ikea_woodgreen_petscharity_dog-alogue_digital.pdfikea_woodgreen_petscharity_dog-alogue_digital.pdf
ikea_woodgreen_petscharity_dog-alogue_digital.pdf
agatadrynko
 
Bài tập - Tiếng anh 11 Global Success UNIT 1 - Bản HS.doc
Bài tập - Tiếng anh 11 Global Success UNIT 1 - Bản HS.docBài tập - Tiếng anh 11 Global Success UNIT 1 - Bản HS.doc
Bài tập - Tiếng anh 11 Global Success UNIT 1 - Bản HS.doc
daothibichhang1
 

Recently uploaded (20)

ikea_woodgreen_petscharity_cat-alogue_digital.pdf
ikea_woodgreen_petscharity_cat-alogue_digital.pdfikea_woodgreen_petscharity_cat-alogue_digital.pdf
ikea_woodgreen_petscharity_cat-alogue_digital.pdf
 
Building Your Employer Brand with Social Media
Building Your Employer Brand with Social MediaBuilding Your Employer Brand with Social Media
Building Your Employer Brand with Social Media
 
The effects of customers service quality and online reviews on customer loyal...
The effects of customers service quality and online reviews on customer loyal...The effects of customers service quality and online reviews on customer loyal...
The effects of customers service quality and online reviews on customer loyal...
 
Understanding User Needs and Satisfying Them
Understanding User Needs and Satisfying ThemUnderstanding User Needs and Satisfying Them
Understanding User Needs and Satisfying Them
 
Discover the innovative and creative projects that highlight my journey throu...
Discover the innovative and creative projects that highlight my journey throu...Discover the innovative and creative projects that highlight my journey throu...
Discover the innovative and creative projects that highlight my journey throu...
 
Exploring Patterns of Connection with Social Dreaming
Exploring Patterns of Connection with Social DreamingExploring Patterns of Connection with Social Dreaming
Exploring Patterns of Connection with Social Dreaming
 
Kseniya Leshchenko: Shared development support service model as the way to ma...
Kseniya Leshchenko: Shared development support service model as the way to ma...Kseniya Leshchenko: Shared development support service model as the way to ma...
Kseniya Leshchenko: Shared development support service model as the way to ma...
 
VAT Registration Outlined In UAE: Benefits and Requirements
VAT Registration Outlined In UAE: Benefits and RequirementsVAT Registration Outlined In UAE: Benefits and Requirements
VAT Registration Outlined In UAE: Benefits and Requirements
 
Authentically Social by Corey Perlman - EO Puerto Rico
Authentically Social by Corey Perlman - EO Puerto RicoAuthentically Social by Corey Perlman - EO Puerto Rico
Authentically Social by Corey Perlman - EO Puerto Rico
 
Event Report - SAP Sapphire 2024 Orlando - lots of innovation and old challenges
Event Report - SAP Sapphire 2024 Orlando - lots of innovation and old challengesEvent Report - SAP Sapphire 2024 Orlando - lots of innovation and old challenges
Event Report - SAP Sapphire 2024 Orlando - lots of innovation and old challenges
 
-- June 2024 is National Volunteer Month --
-- June 2024 is National Volunteer Month ---- June 2024 is National Volunteer Month --
-- June 2024 is National Volunteer Month --
 
Recruiting in the Digital Age: A Social Media Masterclass
Recruiting in the Digital Age: A Social Media MasterclassRecruiting in the Digital Age: A Social Media Masterclass
Recruiting in the Digital Age: A Social Media Masterclass
 
Search Disrupted Google’s Leaked Documents Rock the SEO World.pdf
Search Disrupted Google’s Leaked Documents Rock the SEO World.pdfSearch Disrupted Google’s Leaked Documents Rock the SEO World.pdf
Search Disrupted Google’s Leaked Documents Rock the SEO World.pdf
 
Project File Report BBA 6th semester.pdf
Project File Report BBA 6th semester.pdfProject File Report BBA 6th semester.pdf
Project File Report BBA 6th semester.pdf
 
Brand Analysis for an artist named Struan
Brand Analysis for an artist named StruanBrand Analysis for an artist named Struan
Brand Analysis for an artist named Struan
 
In the Adani-Hindenburg case, what is SEBI investigating.pptx
In the Adani-Hindenburg case, what is SEBI investigating.pptxIn the Adani-Hindenburg case, what is SEBI investigating.pptx
In the Adani-Hindenburg case, what is SEBI investigating.pptx
 
Cree_Rey_BrandIdentityKit.PDF_PersonalBd
Cree_Rey_BrandIdentityKit.PDF_PersonalBdCree_Rey_BrandIdentityKit.PDF_PersonalBd
Cree_Rey_BrandIdentityKit.PDF_PersonalBd
 
Company Valuation webinar series - Tuesday, 4 June 2024
Company Valuation webinar series - Tuesday, 4 June 2024Company Valuation webinar series - Tuesday, 4 June 2024
Company Valuation webinar series - Tuesday, 4 June 2024
 
ikea_woodgreen_petscharity_dog-alogue_digital.pdf
ikea_woodgreen_petscharity_dog-alogue_digital.pdfikea_woodgreen_petscharity_dog-alogue_digital.pdf
ikea_woodgreen_petscharity_dog-alogue_digital.pdf
 
Bài tập - Tiếng anh 11 Global Success UNIT 1 - Bản HS.doc
Bài tập - Tiếng anh 11 Global Success UNIT 1 - Bản HS.docBài tập - Tiếng anh 11 Global Success UNIT 1 - Bản HS.doc
Bài tập - Tiếng anh 11 Global Success UNIT 1 - Bản HS.doc
 

CSS Basic Introduction

  • 1. CSS Basic Introduction, Rules, And Tips 2
  • 2. CSS Introduction, Rules, And Tips: CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • 3. CSS Syntax: The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
  • 4.
  • 5. CSS Selectors: CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories: •Simple selectors (select elements based on name, id, class) •Combinator selectors (select elements based on a specific relationship between them) •Pseudo-class selectors (select elements based on a certain state) •Pseudo-elements selectors (select and style a part of an element) •Attribute selectors (select elements based on an attribute or attribute value)
  • 6.
  • 7. CSS Selectors: CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories: •Simple selectors (select elements based on name, id, class) •Combinator selectors (select elements based on a specific relationship between them) •Pseudo-class selectors (select elements based on a certain state) •Pseudo-elements selectors (select and style a part of an element) •Attribute selectors (select elements based on an attribute or attribute value)
  • 8.
  • 9. CSS ID Selectors: The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.
  • 10.
  • 11. CSS Class Selectors: The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name.
  • 12. CSS Universal Selectors: The universal selector (*) selects all HTML elements on the page. CSS Grouping Selectors The grouping selector selects all the HTML elements with the same style definitions. Look at the following CSS code (the h1, h2, and p elements have the same style definitions):