Scribd
Upload
156 views

CSS Presentation

Cascading Style Sheets (CSS) is a language for styling web pages. It allows control over colors, fonts, spacing and other aspects of visual presentation. CSS was proposed in 1994 and the first version was released in 1996. CSS separates structure and presentation, allowing HTML to define content while CSS handles layout. CSS uses selectors to apply styles to HTML elements, and properties to specify values for attributes like color and font-size. CSS simplifies web design and improves compatibility across devices.

Uploaded by

Rajveer
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
156 views

CSS Presentation

Cascading Style Sheets (CSS) is a language for styling web pages. It allows control over colors, fonts, spacing and other aspects of visual presentation. CSS was proposed in 1994 and the first version was released in 1996. CSS separates structure and presentation, allowing HTML to define content while CSS handles layout. CSS uses selectors to apply styles to HTML elements, and properties to specify values for attributes like color and font-size. CSS simplifies web design and improves compatibility across devices.

Uploaded by

Rajveer
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

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:

2.ELEMENT 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:

3.DESCENDANT 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: 4.ID 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:

5.CLASS 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

6.GROUPING 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!

You might also like