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 Basic Introduction
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 Basic Introduction
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 Basic Introduction
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 Basic Introduction
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

PPT
PPTX
CSS introduction
PPT
Cascading Style Sheet | CSS
PPT
Introduction to CSS
PPT
Cascading Style Sheets (CSS) help
PPT
Introduction to Cascading Style Sheets (CSS)
PDF
Introduction to CSS
PPTX
Week 12 CSS - Review from last week
CSS introduction
Cascading Style Sheet | CSS
Introduction to CSS
Cascading Style Sheets (CSS) help
Introduction to Cascading Style Sheets (CSS)
Introduction to CSS
Week 12 CSS - Review from last week

What's hot (19)

PPTX
Cascading Style Sheets (CSS)
PPT
CSS Introduction
PPTX
Cascading Style Sheet
PPTX
Complete Lecture on Css presentation
PPTX
1 03 - CSS Introduction
PPTX
Introducing Cascading Style Sheets
PPTX
Beginners css tutorial for web designers
PPSX
Introduction to css
PPT
Basic css
PPTX
CSS (Cascading Style Sheet)
PPTX
Cascading style sheets (CSS)
PPT
CSS
PPTX
Css ppt
PPT
Css lecture notes
Cascading Style Sheets (CSS)
CSS Introduction
Cascading Style Sheet
Complete Lecture on Css presentation
1 03 - CSS Introduction
Introducing Cascading Style Sheets
Beginners css tutorial for web designers
Introduction to css
Basic css
CSS (Cascading Style Sheet)
Cascading style sheets (CSS)
CSS
Css ppt
Css lecture notes
Ad

Similar to CSS Basic Introduction (20)

PPTX
Web Concepts_Introduction to presentation.pptx
PPTX
Introduction to CSS
PPTX
Cascading Styling Sheets(CSS) simple design language intended to transform th...
PPTX
css.ppt
PPTX
Module 2 CSS . cascading style sheet and its uses
PPTX
PPTX
Cascading style sheets, Introduction to web programming
PPTX
Css part 1
PDF
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
PPTX
Web Development - Lecture 5
PPTX
CSS document। .pptx
PPTX
Cascading Style Sheets (CSS) LEVELS.pptx
PPTX
Intro to css
PPTX
Ia css
PPTX
Css1
PPTX
introduction to CSS
PDF
Web Design & Development - Session 2
Web Concepts_Introduction to presentation.pptx
Introduction to CSS
Cascading Styling Sheets(CSS) simple design language intended to transform th...
css.ppt
Module 2 CSS . cascading style sheet and its uses
Cascading style sheets, Introduction to web programming
Css part 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Web Development - Lecture 5
CSS document। .pptx
Cascading Style Sheets (CSS) LEVELS.pptx
Intro to css
Ia css
Css1
introduction to CSS
Web Design & Development - Session 2
Ad

More from Reema (20)

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

Recently uploaded (20)

PDF
COST SHEET- Tender and Quotation unit 2.pdf
PDF
Dr. Enrique Segura Ense Group - A Self-Made Entrepreneur And Executive
PDF
Traveri Digital Marketing Seminar 2025 by Corey and Jessica Perlman
PDF
MSPs in 10 Words - Created by US MSP Network
PDF
Roadmap Map-digital Banking feature MB,IB,AB
PDF
Unit 1 Cost Accounting - Cost sheet
PDF
TriStar Gold Corporate Presentation August 2025
PDF
The FMS General Management Prep-Book 2025.pdf
PPTX
How to best Address your professional Training Program - August 2025.pptx
PPTX
Buy Chaos Software – V-Ray, Enscape & Vantage Licenses in India
DOCX
Business Management - unit 1 and 2
PDF
Leading with Vision_ How Mohit Bansal Is Shaping Chandigarh’s Real Estate Ren...
PDF
A Brief Introduction About Julia Allison
PDF
Reconciliation AND MEMORANDUM RECONCILATION
PPTX
Untitled presentation (2).quiz presention
PDF
WRN_Investor_Presentation_August 2025.pdf
PPTX
AI-assistance in Knowledge Collection and Curation supporting Safe and Sustai...
PPT
Data mining for business intelligence ch04 sharda
DOCX
Euro SEO Services 1st 3 General Updates.docx
PPTX
Belch_12e_PPT_Ch18_Accessible_university.pptx
COST SHEET- Tender and Quotation unit 2.pdf
Dr. Enrique Segura Ense Group - A Self-Made Entrepreneur And Executive
Traveri Digital Marketing Seminar 2025 by Corey and Jessica Perlman
MSPs in 10 Words - Created by US MSP Network
Roadmap Map-digital Banking feature MB,IB,AB
Unit 1 Cost Accounting - Cost sheet
TriStar Gold Corporate Presentation August 2025
The FMS General Management Prep-Book 2025.pdf
How to best Address your professional Training Program - August 2025.pptx
Buy Chaos Software – V-Ray, Enscape & Vantage Licenses in India
Business Management - unit 1 and 2
Leading with Vision_ How Mohit Bansal Is Shaping Chandigarh’s Real Estate Ren...
A Brief Introduction About Julia Allison
Reconciliation AND MEMORANDUM RECONCILATION
Untitled presentation (2).quiz presention
WRN_Investor_Presentation_August 2025.pdf
AI-assistance in Knowledge Collection and Curation supporting Safe and Sustai...
Data mining for business intelligence ch04 sharda
Euro SEO Services 1st 3 General Updates.docx
Belch_12e_PPT_Ch18_Accessible_university.pptx

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.
  • 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)
  • 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)
  • 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.
  • 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):