CSS
"CASCADING STYLE SHEETS"
AYESHA KHAN (21214031)
RAJVEER SINGH (21214085)
INTRODUCTION
Cascading Style Sheets,
fondly referred to as CSS, is a
simply designed language
intended to simplify the process of making web pages
presentable. CSS allows you to apply styles to web pages.
It describes how a webpage should look: it prescribes
colors, fonts, spacing, and much more. In short, we can
make our website look however we want.
HISTORY OF CSS:
1994- HÃ¥kon Wium Lie proposed the idea of CSS.
1996- The first version of CSS was invented.
1998- CSS 2 was released and work on CSS 3 began.
CSS 3 was very different from the other versions.
2011- CSS 2.1 was released, which fixed the errors
found in CSS 2
DIFFERENCES
BETWEEN CSS
AND HTML
Here is a section of the DevMountain Courses
page with CSS:
WHY IS CSS SO
IMPORTANT?
We’ll notice quite a few differences
between the two when it comes to
overall presentation. With CSS, we
And here is that same section without CSS:
see a change in font, font size, and
font color. We also see a change in
the format of the buttons and get
an added blue background
behind them. Each of these
elements are possible because of
cascading style sheets. As a user,
which looks more enticing? It’s
pretty easy to see why CSS is so
crucial.
1) Faster Page Speed
CSS
2) Better User Experience
3) Quicker Development Time
ADVANTAGES OF 4) Easy Formatting Changes
THE
APPLICATION 5) Compatibility Across Devices
Confusion due to many
CSS levels
CSS
Cross-Browser Issues
Security Issues
DISADVANTAGES Extra Work for Developers
OF THE
APPLICATION
CSS SYNTAX CSS comprises style rules that are interpreted by
the browser and then applied to the corresponding
elements in your document.
In the following example all p elements will be
center-aligned, with a blue text color:
A style rule set consists of a selector and
declaration block.
Selector -- h1Declaration -- {color:blue;font
size:12px;}
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.
For Example:
1. Color is property and blue is value.
2. Font-size is property and 12px is value.
3. CSS declaration always ends with a semicolon,
and declaration blocks are surrounded by curly
braces.
CSS SELECTORS
Output: This rule renders the content of
every element in our document in black.
1. UNIVERSAL SELECTORS: Rather
than selecting elements of a
specific type, the universal
selector quite simply matches
the name of any element type
CSS SELECTORS
Output:
[Link] SELECTORS: The element
selector selects elements based
on the element name. You can
select all p elements on a page
like this (in this case, all p
elements will be center-aligned,
with a red text color).
CSS SELECTORS
Output:
[Link] SELECTORS:
Suppose you want to apply a style
rule to a particular element only
when it lies inside a particular
element. As given in the following
example, the style rule will apply to
the em element only when it lies
inside the ul tag.
CSS SELECTORS
Output: [Link] SELECTORS:
The id selector uses the id attribute of
an HTML element to select a specific
element.
The id of an element should be 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.
The style rule below will be applied to
the HTML element with id=”para1″:
CSS
CSS SELECTORS
Output:
[Link] SELECTORS:
The class selector selects
elements with a specific class
attribute.
To select elements with a specific
class, write a period (.) character,
followed by the name of the class.
In the example below, all HTML
elements with class=”center” will
be green and center-aligned:
CSS SELECTORS
[Link] SELECTORS: If we have
elements with the same style
definitions, like the image on top
It will be better to group the selectors,
to minimize the code. To group
selectors, separate each selector with
a comma. In the example shown in
the image below, we have grouped
the selectors from the code above.
External, Internal, or Inline CSS?
External style sheets
Internal style sheets
Inline style sheets
So if HTML is the foundation, frames,
walls, and girders supporting our
website, consider CSS the paint
color, window styles, and
CONCLUSION landscaping that comes on
afterward. can’t get anywhere
without putting that foundation up
first, but —once you do — you’ll want
to follow up with some style, and
CSS is the ticket to unleashing your
inner decorator.
THANK YOU!
