Css Intro2023

CSS
CasCaDInG STYle
SheeTs
What is CSS
• CSS or Cascading Style Sheet allows you to control the
styles for your web pages, including the design, layout
and variations in display for different devices and screen
sizes.
WHY CSS?
1. CSS saves time : You can write CSS once and reuse same sheet in multiple HTML
pages.
2. Easy Maintenance : To make a global change simply change the style, and all elements
in all the webpages will be updated automatically.
3. Search Engines : CSS is considered as clean coding technique, which means search
engines won’t have to struggle to “read” its content.
4. Superior styles to HTML : CSS has a much wider array of attributes than HTML, so you
can give a far better look to your HTML page in comparison to HTML attributes.
5. Offline Browsing : CSS can store web applications locally with the help of offline
catche.Using of this we can view offline websites.
W h o C r eaTes a n D
M a I n T a I n s CSS?
● CSS is created and maintained through a group of people within the W3C called the
CSS Working Group. The CSS Working Group creates documents called specifications.
When a specification has been discussed and officially ratified by the W3C members, it
becomes a recommendation.
● These ratified specifications are called recommendations because the W3C has no
control over the actual implementation of the language. Independent companies and
organizations create that software.
● NOTE − The World Wide Web Consortium, or W3C is a group that makes recommendations about
how the Internet works and how it should evolve.
✓ 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.
• A CSS declarations are separated with semicolons, and declaration
blocks are surrounded by curly braces.
CSS
Syntax
CSS Syntax
CSS Syntax
A CSS rule-set consists of a SELECTOR and a DECLARATION BLOCK:
CSS syntax
p is a selector in CSS (it points to the HTML element you want to
style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value
CSS Selectors
CSS selectors are used to “find” (or select)
HTML elements based on their element
name, id, class, attribute, and more.
NOTE: An id name cannot start with a number.
CSS GROUPING
SELECTORS
• The CSS grouping selector is used to select multiple
elements and style them together.
• If you have elements with the same style definitions, It
will be better to group the selectors in order to
minimize the code.
• To group selectors, separate each selector with a comma.

HOw TO ADD CSS
Three Ways to Insert CSS:
1. External CSS
2. Internal CSS
3. Inline CSS
External CSS
With an external style sheet, you can change the look of an entire website by
changing just one file!
Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.
An external style sheet can

be written in any text editor,
and must be saved with a
.css extension.
The external .css file should

not contain any HTML tags.
Internal
CSS
An internal style sheet may be used if one
single HTML page has a unique style.
The internal style is defined inside the

<style> </style> element, inside the head
section.
I n l i n e CSS
An inline style may be
used to apply a unique
style for a single
element.
To use inline styles,

add the style attribute
to the relevant
element. The style
attribute can contain
any CSS property.
CascaDing OrDer
What style will be used when there is more than one style specified for
an HTML element?
All the styles in a page will "cascade" into a new "virtual" style sheet
by the following rules, where number one has the highest priority:
1. Inline style (inside an HTML element)

2. External and internal style sheets (in the head section)
3. Browser default
So, an inline style has the highest priority, and will override external
and internal styles and browser defaults.

Css Intro2023

Uploaded by

Copyright:

Available Formats

Css Intro2023

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Intro2023

Uploaded by

Copyright:

Available Formats

CSS

• each declaration includes a CSS property name and a value,

• To group selectors, separate each selector with a comma.

An external style sheet can

The external .css file should

The internal style is defined inside the

To use inline styles,

1. Inline style (inside an HTML element)

You might also like