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, Rules, And Tips
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, Rules, And Tips
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, Rules, And Tips
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, Rules, And Tips
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, Rules, And Tips

More Related Content

PPT
PPTX
Types of Selectors (HTML)
PPTX
Css syntax, teachin presentation
PPTX
Ia css
PPTX
Introduction to CSS
PDF
Basic-CSS-tutorial
Types of Selectors (HTML)
Css syntax, teachin presentation
Ia css
Introduction to CSS
Basic-CSS-tutorial

What's hot (19)

PPTX
Week 12 CSS - Review from last week
PDF
Introduction to CSS: Part Deux
PPTX
introduction to CSS
PPTX
Mdst 3559-02-08-css
PPT
Cascading Style Sheets (CSS) help
PPTX
Languages for web(HTML,CSS,JS)
PPTX
Welcome to css!
PPT
Cascading style sheets
PPT
Cascading style sheets
PPTX
Id and class selector
PPT
PPTX
Css ppt
PPTX
presentation in html,css,javascript
PPTX
PPTX
Complete Lecture on Css presentation
PPTX
Gail Borden Library | HTML/CSS Program
PPTX
Cascading Style Sheet
PPTX
chitra
Week 12 CSS - Review from last week
Introduction to CSS: Part Deux
introduction to CSS
Mdst 3559-02-08-css
Cascading Style Sheets (CSS) help
Languages for web(HTML,CSS,JS)
Welcome to css!
Cascading style sheets
Cascading style sheets
Id and class selector
Css ppt
presentation in html,css,javascript
Complete Lecture on Css presentation
Gail Borden Library | HTML/CSS Program
Cascading Style Sheet
chitra
Ad

Similar to CSS Basic Introduction, Rules, And Tips (20)

PPTX
Web Concepts_Introduction to presentation.pptx
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
PPT
Cascading Style Sheet | CSS
PPTX
Cascading Style Sheets (CSS) LEVELS.pptx
PPTX
Intro to css
PPT
Css lecture notes
PPTX
Beginners css tutorial for web designers
PPTX
Css1
PDF
Web Design & Development - Session 2
Web Concepts_Introduction to presentation.pptx
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 Sheet | CSS
Cascading Style Sheets (CSS) LEVELS.pptx
Intro to css
Css lecture notes
Beginners css tutorial for web designers
Css1
Web Design & Development - Session 2
Ad

More from Reema (20)

PPTX
CSS Basic Introduction
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
HTML Semantic Elements
CSS Basic Introduction
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.
HTML Semantic Elements

Recently uploaded (20)

PPTX
4_599444444444446601104945646843 (1).pptx
PDF
NIELSEN Annual-Marketing-Report 2025: Unlocking the power of data-driven mark...
PDF
The Dynamic CLOs Shaping the Future of the Legal Industry in 2025.pdf
PDF
Who says elephants can't dance? - Business Analysis 30 Aug 2025
PDF
MLM plans ppt - MLM Compensation Plans
PPTX
2025 MDM Session 6 Nature of Design.pptx
PDF
PPT-1-ENTREPRENEURSHIP PPT-1-ENTREPRENEURSHIP.pdf
PDF
Trust Building in Family business: Issues and Challenges in Family Business a...
PDF
Development of Maritime Professionals in Bangladesh: A Literature Review
PDF
Top 10 Arab General Managers Revolutionizing the Hospitality Industry.pdf
PDF
The Leading Cyber Security Companies in India 2025.pdf
PPTX
international business Chapter 013 global sourcing
PPT
Characteristics of Market-driven firm.ppt
PDF
NewBase 02 September 2025 Energy News issue - 1822 by Khaled Al Awadi_compre...
PPTX
4- Cyber Technology and Operations Capabilities-B.pptx
PDF
Management Theories and Digitalization at Emirates Airline
PDF
Unit 2 Electronic-Commerce Business Models.pptx
PDF
Unit-1 Introduction to Electronic-Commerce.pptx
PDF
The Accidental Empire. How Google’s Founders Stumbled Into History
PDF
The 5 Most Remarkable CMOs to Watch in 2025.pdf
4_599444444444446601104945646843 (1).pptx
NIELSEN Annual-Marketing-Report 2025: Unlocking the power of data-driven mark...
The Dynamic CLOs Shaping the Future of the Legal Industry in 2025.pdf
Who says elephants can't dance? - Business Analysis 30 Aug 2025
MLM plans ppt - MLM Compensation Plans
2025 MDM Session 6 Nature of Design.pptx
PPT-1-ENTREPRENEURSHIP PPT-1-ENTREPRENEURSHIP.pdf
Trust Building in Family business: Issues and Challenges in Family Business a...
Development of Maritime Professionals in Bangladesh: A Literature Review
Top 10 Arab General Managers Revolutionizing the Hospitality Industry.pdf
The Leading Cyber Security Companies in India 2025.pdf
international business Chapter 013 global sourcing
Characteristics of Market-driven firm.ppt
NewBase 02 September 2025 Energy News issue - 1822 by Khaled Al Awadi_compre...
4- Cyber Technology and Operations Capabilities-B.pptx
Management Theories and Digitalization at Emirates Airline
Unit 2 Electronic-Commerce Business Models.pptx
Unit-1 Introduction to Electronic-Commerce.pptx
The Accidental Empire. How Google’s Founders Stumbled Into History
The 5 Most Remarkable CMOs to Watch in 2025.pdf

CSS Basic Introduction, Rules, And Tips

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