Scribd
Upload
3 views

Lecture 15

This document provides an overview of Cascading Style Sheets (CSS), including its purpose, advantages, and various versions. It explains CSS syntax, selectors, and methods for including styles in HTML documents, such as inline, embedded, external, and imported CSS. Additionally, it discusses different types of selectors and the concept of CSS rules overriding, along with a brief mention of measurement units and colors in CSS.

Uploaded by

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

Lecture 15

This document provides an overview of Cascading Style Sheets (CSS), including its purpose, advantages, and various versions. It explains CSS syntax, selectors, and methods for including styles in HTML documents, such as inline, embedded, external, and imported CSS. Additionally, it discusses different types of selectors and the concept of CSS rules overriding, along with a brief mention of measurement units and colors in CSS.

Uploaded by

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

WEB TECHNOLOGY

(BCS-502)
UNIT 2

Prepared By : Anjali Dwivedi


Let’s create some colourful pages with CSS
CSS

 Cascading Style Sheets, fondly


referred to as CSS, is a simple
design language intended to
simplify the process of making web
pages presentable.
 CSS handles the look and feel part
of a web page.
 Using CSS, you can control the
color of the text, the style of fonts,
the spacing between paragraphs
etc.
ADVANTAGES OF CSS
 CSS saves time -

 Pages load faster -


 Easy maintenance-
 Superior styles to HTML-
 Multiple Device
Compatibility-
 Global web standards-
CSS VERSIONS
 Cascading Style Sheets, level 1
(CSS1) was came out of W3C as a
recommendation in December
1996.
 CSS2 was became a W3C
recommendation in May 1998
and builds on CSS1.
 The earliest CSS 3 drafts were
published in June 1999.
CSS SYNTAX – SELECTORS

A CSS comprises of style rules that are


interpreted by the browser and then applied
to the corresponding elements in your
document. A style rule is made of three parts:
 Selector: A selector is an HTML tag at which style

will be applied. This could be any tag like <h1> or


<table> etc.
 Property: A property is a type of attribute of HTML

tag. Put simply, all the HTML attributes are


converted into CSS properties. They could
be color or border etc.
 Value: Values are assigned to properties. For

example color property can have value


either red or #F1F1F1 etc.
CSS INCLUSION - ASSOCIATING
STYLES
There are four ways to associate styles
with your HTML document. Most
commonly used methods are inline
CSS and External CSS.
• Embedded CSS
• Inline CSS
• External CSS
• Imported CSS
EMBEDDED CSS
 You can put your CSS rules into an
HTML document using the <style>
element. This tag is placed inside
<head>...</head> tags.
Syntax:
<head>
<style type="text/css”>
Style Rules............
</style>
</head>
INLINE CSS
 You can use style attribute of any
HTML element to define style rules.
These rules will be applied to that
element only.
 <element style="...style rules....">

<h1 style ="color:#36C;"> This is


inline CSS</h1>
EXTERNAL CSS
 The <link> element can be used to
include an external stylesheet file in
your HTML document.
 An external style sheet is a separate

text file with .css extension.


<head><link rel=”stylesheet”
type="text/css" href="...“ ></head>
IMPORTED CSS
@import is used to import an
external stylesheet in a manner
similar to the <link> element.
<head>
<style>
@import url("a.css");
</style>
</head>
THE TYPE SELECTORS
In this type simply apply selector name
and set the attribute value you have
to change.
h1 { color: #36CFFF; }
THE DESCENDANT SELECTORS
 Suppose you want to apply a style rule
to a particular element only when it lies
inside a particular element.
ul em { color: #000000; }
THE CLASS SELECTORS
 You can define style rules based on the
class attribute of the elements.
.black { color: #000000; }
<h1 class="black">Hello Welcome
</h1>
THE ID SELECTORS
All the elements having that id will be
formatted according to the defined
rule.
#black { color: #000000; }
<h1 id=“black">Hello Welcome </h1>
THE CHILD SELECTORS

body > p { color: #000000; }


 This rule will render all the paragraphs

in black if they are direct child of


<body> element.
MULTIPLE STYLE RULES
 You may need to define multiple style
rules for a single element.
h1 {color: #36C;
font-weight: normal;
letter-spacing: .4px;
margin-bottom: 1px;
text-transform: lowercase;
}
GROUPING SELECTORS
You can apply a style to many selectors
if you like.
h1, h2, h3 {color: #36C;font-weight:
normal;letter-spacing: .4em;margin-
bottom: 1em;text-transform:
lowercase;}
CSS RULES OVERRIDING
 Any inline style sheet takes highest
priority. So it will override any rule
defined in <style>...</style> tags or
rules defined in any external style
sheet file.
 Any rule defined in
<style>...</style> tags will override
rules defined in any external style
sheet file.
 Any rule defined in external style
sheet file takes lowest priority.
CSS - MEASUREMENT UNITS
CSS - COLORS

You might also like