Scribd
Upload
15 views67 pages

Unit1 2

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of HTML elements, allowing for consistent styling across multiple web pages. CSS has evolved through several versions, from CSS1 in 1996 to the ongoing development of CSS4, introducing features like positioning, advanced selectors, and animations. The benefits of CSS include time-saving, faster page loading, easier maintenance, superior styling capabilities, and compatibility across different devices.

Uploaded by

sameermadabhavi232
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views67 pages

Unit1 2

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of HTML elements, allowing for consistent styling across multiple web pages. CSS has evolved through several versions, from CSS1 in 1996 to the ongoing development of CSS4, introducing features like positioning, advanced selectors, and animations. The benefits of CSS include time-saving, faster page loading, easier maintenance, superior styling capabilities, and compatibility across different devices.

Uploaded by

sameermadabhavi232
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 67

Cascading Style Sheets

(CSS)
What is CSS?

•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

•External stylesheets are stored in CSS files


The presentation specifications of documents can be more precisely and
more consistently described with style sheets.

• The CSS1 specification was developed in 1996


• CSS2 was released in 1998
• CSS3 is on its way CSSs provide the means to control and change presentation
of HTML documents
• CSS is not technically HTML, but can be embedded in HTML documents
• The most important benefit of style sheets is their capability of imposing
consistency on the style of documents.
Eg: they allow the author to specify that all occurrences of a particular tag
use the same presentation style. Style is specified for a tag by the values of its
property.
CSS Versions
•CSS1 (Cascading Style Sheets Level1) - The initial version of CSS, released in December
1996. CSS1 provided basic styling capabilities for HTML documents, including
properties for text, colors, backgrounds, margins, and borders.

•CSS2 (Cascading Style Sheets Level2) - Released in May 1998, CSS2 introduced new
features such as positioning, z-index, media types, and more advanced selectors
like attribute selectors and child selectors.

•CSS2.1 - The version 2.1, published as a W3C Recommendation in June 2011,


clarified and refined CSS2, addressing inconsistencies and ambiguities in the
specification. CSS2.1 focused on improving interoperability among web browsers.

•CSS3 (Cascading Style Sheets Level 3) - CSS3 is a collection of modules that extend the
capabilities of CSS. It introduces numerous new features and enhancements,
including advanced selectors, multiple column layouts, animations,
transformations, gradients, shadows, and more.

•CSS4 (Cascading Style Sheets Level 4) - CSS4 is an ongoing effort to extend CSS3 with
new features and enhancements.
Benefits of CSS: (Why Use CSS?)
CSS Saves Time: You can write CSS once and then reuse same sheet in multiple HTML pages.

Pages Load Faster: If you are using CSS, you do not need to write HTML tag or attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.

Easy Maintenance: To make a global change, simply change the style, and all elements in all
the web pages will be updated automatically.

Superior Styles to HTML: CSS has a much wider array of attributes than HTML, so you can
get a far better look to your HTML page.

Multiple Device Compatibility: For the same HTML document, different versions of a
website can be presented for different screen widths.

Global Web Standards: Now most of the HTML attributes are being deprecated and it is
being recommended to use CSS.
Continue…
CSS OUTLINE PROPERTIES
CSS - Links
You can set following properties of a hyper link:
• The :link Signifies unvisited hyperlinks.
• The :visited Signifies visited hyperlinks.
• The :hover Signifies an element that currently has the
user's mouse pointer hovering over it.
• The :active Signifies an element on which the user is
currently clicking.
CSS LIST PROPERTY
Background Properties This exceptionally helpful property permits
you to consolidate a few qualities into one: the background
property. It is similar to textual style, utilizes the default values
when they are not available in the announcement. CSS LONGHAND

background-color: #456;
background-image:url("backdrop.gif");
background-repeat: repeat-y;
background-attachment: fixed;
background-position: 50% 50%;
CSS SHORTHAND

background: #456 url("backdrop.gif") repeat-y fixed 50% ;


<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>

<h1>Define Colors With HSLA Values</h1>

<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>

</body>
<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>


<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>


<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even
transparent colors using RGBA or HSLA color values.</p>

</body>
</html>
CSS Box Model
CSS Borders

You might also like