Web Technology
(KCS-602)
Unit 2
Prepared By
Mr. Sachin Kumar Sonker
Assistant Professor,UCER Naini,Allahabad
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
