Scribd
Upload
20 views138 pages

FSD Module 2 Css

Uploaded by

aboutrajababu1
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
20 views138 pages

FSD Module 2 Css

Uploaded by

aboutrajababu1
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/ 138

Module 2

Cascading Style
Sheet
Full Stack Development & Department of Computer Science &
1
20CS2406 Engineering
Levels in CSS

The Cascading Style Sheets is defined at three different levels to specify


the style of a Document.

XHTML style sheets are called cascading style sheets

Lower level style sheets can override higher level style sheets ,so the style
of the content of a tag is determined ,in effect ,through a cascade of style
sheet applications.

Full Stack Development & Department of Computer Science &


2
20CS2406 Engineering
Level of Style Sheets

• Three levels of style sheets , from lowest level to highest level are
• Inline
• Document
• External
• Inline style sheets apply to content of single XHTML element.
• Document level style sheets apply to the whole body of a document.
• External Style sheets can apply to the bodies of any number of
documents.
• Inline style sheets have precedence over document style
sheets ,which have precedence over external style sheets

Full Stack Development & Department of Computer Science &


3
20CS2406 Engineering
*Level of Style Sheets :

• Inline style specifications appear within the opening tag and apply only
to the content of that tag
• Document level style specifications appear in the document head
section and apply to the entire body of the document.
• External Style sheets stored separately and are referenced in all
documents that use them
• External style sheets are written as text files with the MIME type
text/css.
• They can be stored on any computer on the web .
• The browser fetches external style sheets just as it fetches documents.

Full Stack Development & Department of Computer Science &


4
20CS2406 Engineering
External Style Sheets

• External style sheets are written as text files with the MIME type text/css
.
• They can be stored on any computer on the web .The browser fetches
external style sheets just as it fetches documents.
• The <link > tag is used to specify external style sheets. Within <link> , the
rel attribute is used to specify the relationship of the linked-to document
to the document in which the link appears. The href attribute of the <link>
is used to specify the URL of the style sheet document.

Full Stack Development & Department of Computer Science &


5
20CS2406 Engineering
inshort-css levels
1. Inline Styles. These are specified in the tag itself.
2. Document-Level (Internal) Style Sheets. These are specified in the <head> of a
document, using the special tag <style>.
3. External Style Sheets. These are specified in a separate CSS file that is
connected to the HTML file by the <link> tag.
External Style Sheets :
Example which uses External Style Sheets
//ext.html
<!DOCTYPE html> Style1.css//file name
<html>
h1
<head> {
font-family : Lucida
<title> Sample CSS </title> Handwriting ;
<link rel=“stylesheet” href=“Style1.css” /> font-size : big;
color : red ;
</head> }
<body>
<h1> Dayananda Sagar University</h1>
</body>
</html>
Note: Save html file as ext.html and css as Style1.css

Full Stack Development & Department of Computer Science &


7
20CS2406 Engineering
Document Style Sheets :
Example which uses Document Style Sheets
<!DOCTYPE html>
<html>
<head>
<title> Sample CSS </title>
<style>
h1{
font-family : Lucida Handwriting;
font-size : 50pt ;
color : red ;
}
</style>
</head>
<h1> Dayananda Sagar University</h1>
</html>

Full Stack Development & Department of Computer Science &


8
20CS2406 Engineering
Inline Style Sheets :
Example which uses Inline Style Sheets
<!DOCTYPE html>
<html>
<head>
<title> Sample CSS </title>
</head>
<body>
<h1 style = “ font-family : Lucida Handwriting; font-size : 50pt; color : red ; “ >
Dayananda Sagar University</h1>
</body>
</html>

Full Stack Development & Department of Computer Science &


9
20CS2406 Engineering
Style Specification Format:
Inline Style Specification

Style = “ Property1.Value1; Property2.Value2 ;Property3.value3;


……….Propertyn.Valuen “;

Full Stack Development & Department of Computer Science &


10
20CS2406 Engineering
Style Specification Format:
Document Style Specification
< Style type = “text/css” >
Rule list
</Style>

Each Style rule ,In a rule has two parts

A selector ,which indicates the tag or tags affected by the


rule and a list has same form as the quoted list for inline
style sheets, except that it is delimited by braces rather than
double quotes , So the form of a style rule is as follows

Selector {Property1.value1;Property2.Value2; ,
Property3.Value3 , ………………..Propertyn.Valuen;}

Full Stack Development & Department of Computer Science &


11
20CS2406 Engineering
Style Specification Format:
SELECTOR in CSS
Simple Selector Forms

In case of Simple selector , a tag is used .


If the properties of the tag are changed ,then it reflects at all
the places when used in the program.

The selector can be any tag .If the new properties for a tag are
not mentioned within the rule list , then the browser uses
default behavior of a tag.

Full Stack Development & Department of Computer Science &


12
20CS2406 Engineering
Style Specification Format:
SELECTOR FORMS : Simple Selector Forms
< !DOCTYPE html>
<html>
<head>
<title> Sample CSS </title>
<style type =“text/css”>
P
{ font-family : Lucida Handwriting;
font-size : 50pt;
color : red ;
}
</style>
</head>
<body>
<p> Dayananda Sagar University</p>
<p> Computer Science and Engineering</p>
</body>
</html>

Full Stack Development & Department of Computer Science &


13
20CS2406 Engineering
Style Specification Format:
Class Selector : It is possible to give different properties for different
elements.
< !DOCTYPE html>
<html>
<head>
<title> Sample CSS </title>
<style type =“text/css”>
p.one
{ font-family : Lucida Handwriting;
font-size : 25pt;
color : red ;
}
p.two
{ font-family : Monotype Corsiva;
font-size : 50pt;
color : green ;
}
</style>

Full Stack Development & Department of Computer Science &


14
20CS2406 Engineering
Style Specification Format:
Class Selector :

</head>
<body>
<p class=“one”> Computer Science and Engineering </p>
<p class=“two”> Electronics Engineering and Technology</p>
</body>
</html>

Full Stack Development & Department of Computer Science &


15
20CS2406 Engineering
CSS, a class selector is formatted as a period (.) character followed by the name of
the class. It selects all elements with that class attribute so that unique CSS
declarations can be applied to those specific elements without affecting other
elements on the page.
p .style1
{color:blue;
text-align:right;
Font-style:italic
}
p.style2
{
Background-colour:yellow;
border: 3px dashed red;

Padding:1.5 cm}

Full Stack Development & Department of Computer Science &


16
20CS2406 Engineering
Style Specification Format:
Generic Selector : In case of Generic Selector ,when the class is
created ,it would not be associated to any particular tag.

< !DOCTYPE html>


<html>
<head>
<title> Sample CSS </title>
<style type =“text/css”>
.one
{ font-family : Monotype Corsiva;
color : red ;
}
</style>
</head>

Full Stack Development & Department of Computer Science &


17
20CS2406 Engineering
Style Specification Format:
Generic Selector :

</head>
<body>
<p class=“one” > Computer Science and Engineering </p>
<h1 class=“one”> Electronics Technology and Engineering</h1>
<h6 class=“one “> Mechanical Engineering and Technology</h6>
</body>
</html>

Full Stack Development & Department of Computer Science &


18
20CS2406 Engineering
*Style Specification Format:
Id Selector : An Id Selector allows the applications of a style to one
specific element
< !DOCTYPE html>
<html>
<head>
<title> Sample CSS </title>
<style type =“text/css”>
#one
{ font-family : lucida Handwriting ;
color : purple ;
}
#two
{ font-family : comic sans ms;
color : orange ;
}
p#three
{ color:aqua;
}
</style>
Full </head>
Stack Development & Department of Computer Science &
19
20CS2406 Engineering
Style Specification Format:
Id Selector :

<body>
<p id =“two” > Computer Science and Engineering </p>
<h1 id=“one”> Electronics Technology and Engineering</h1>
<body>
<p id =“three” > Computer Science and Engineering </p>

</body>
</html>

Full Stack Development & Department of Computer Science &


20
20CS2406 Engineering
Style Specification Format:
Universal Selector : The Universal selector ,denoted by an asterisk
(*) ,applies its style to all elements in a document .

< !DOCTYPE html>


<html>
<head>
<title> Sample CSS </title>
<style type =“text/css”>
*
{ font-family : lucida Calligraphy ;
color : purple ;
}
</style>
</head>

Full Stack Development & Department of Computer Science &


21
20CS2406 Engineering
Style Specification Format:
Universal Selector :

<body>
<h1 > Computer Science and Engineering </h1>
<h2 > Electronics Engineering and Technology</h2>
<h3 > Mechanical Engineering and Technology </h3>
<p> Dayananda Sagar University </p>
</body>
</html>

Full Stack Development & Department of Computer Science &


22
20CS2406 Engineering
<!DOCTYPE html>
<html>
<head>
<style>
Element , Element Selectors
h2, p {
background-color: yellow;
}
</style>
</head>
<body>

<h1>Demo of the element, element selector</h1>

<h2>Welcome to My Homepage</h2>

<div>
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>
CONTEXTUAL SELECTORS ARE AS FOLLOWS
The element element selector in CSS is used to select elements
inside the elements i.e

Element Element Selector it combines two selectors such that elements matched by the
(Also called Space selectors) second selector are selected if they have an ancestor element
matching the first selector.
<!DOCTYPE html>

<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>

<h1>Demo of the * selector</h1>

<div >
<p >My name is Donald.</p>
<p >I live in Duckburg.</p>
<h1>ghsadjs</h1>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>
<!-- HTML code to illustrates space selector -->
<!DOCTYPE html>
<html>
<head>
<title>
element element Selector
</title>

<style>
div p {
background-color: green;
color: white;
}
</style>
</head>

<body style="text-align: center;">

<h1 style = "color: green;">


Go to park
</h1>

<div>
<h2>element element Selector</h2>

<!-- CSS property is used here -->


<p>A computer science portal </p>
</div>

<p>This paragraph will not be selected.</p>


</body>
</html>
div#container p{
font-weight:bold;
Example 2 }

It is the descendant selector. It will


target all p tags within container div.

<div id="container">
<p>First</p>
<div>
<p>Child Paragraph</p>
</div>
<p>Second</p>
<p>Third</p>
</div>
CSS
element>element
Selector
element>elementSelector
div > p {
background-
color: yellow;
}
<!DOCTYPE html>
<html>
The element>element <head>
selector is used to select elements <style>
with a specific parent. div > p {
Note: Elements that are not background-color: yellow;
directly a child of the specified }
parent, are not selected.
</style>
</head>
Note: The <div> tag is used as a
container for HTML elements <body>

<h1>Demo of the element > element selector</h1>

<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>

<div>
<span><p>I will not be styled.</p></span>
Note for ur knowledge::The <p> tag
</div>
cannot contain tables and other block-
level elements.
<p>My best friend is Mickey.</p>

</body>
</html>
div#container > p {
border: 1px solid black;
It will target elements which are }
DIRECT children of a particular
element.
It will target all P element which are
direct children of container div, not
children of child div.
The first-child selector specifies the first child of the element to whose
name it is attached. For example, consider the following:
p:first-child {property-value list}
The properties in the list are applied to the first child element of each p element.
The last-child selector specifies the last child of the element to whose
name it is attached. For example, consider the following:
p:last-child {property-value list}
The properties in the list are applied to the last child element of each p element.
The only-child selector specifies the child of the element to whose name
it is attached, but only if that child is the only child of the element. For example,
consider the following:
p:only-child {property-value list}
The properties in the list are applied to the child element of each p element that
has just one child element.
The empty selector specifies the element to which it is attached when that
element has no child elements. For example, consider the following:
p:empty {property-value list}
The properties in the list are applied to each p element that has no child elements.
NOTE: DO THE EXAMPLES
Child selectors can be specified over any number
of elements in a family
hierarchy (not just one generation). For example,
the following selector selects em
elements that are children of h1 elements that
are children of paragraph elements:
div > h1 > em {property-value list}
<!DOCTYPE html>
<html>
<head>
EXAMPLE OF P:__ <style>
p:first-child {
background-color: yellow;
}
</style>
</head>
<body>

<p>This paragraph is the first child of its parent (body).</p>


<p>This paragraph is not the first child of its parent
(body).</p>

<div>
<p>This paragraph is the first child of its parent (div).</p>
<p>This paragraph is not the first child of its parent (div).</p>
</div>

</body>
</html>
GO THROUGH + AND ~
SYMBOLS IN CSS SELECTORS
FOR YOUR MORE
KNOWLEDGE
Style Specification Format:
Pseudo Classes : Pseudo class selectors are used if properties are to be
changed dynamically .
Example : When mouse movement happens ,in other words hover
happens or focus happens .
< !DOCTYPE html>
<html>
<head> <body>
<title> Sample CSS </title> <form action=“”>
<style type =“text/css”> <p>
Input : focus <label>
{ font-family : lucida Calligraphy ; NAME:
color : purple ; <input type=“text”/>
font-size :100pt; </label>
} </p>
</style> </form>
</head> </body>
</html>

Full Stack Development & Department of Computer Science &


39
20CS2406 Engineering
Syntax
The syntax of pseudo-classes:

selector:pseudo-class{

property: value;

Full Stack Development & Department of Computer Science &


40
20CS2406 Engineering
Anchor Pseudo-
/* mouse over link */
classes
Links can be displayed a:hover {
in different ways:
color: #FF00FF;
Example
/* unvisited link }
*/
a:link {
color: #FF0000; /* selected link */
}
a:active {
/* visited link */
a:visited { color: #0000FF;
color: #00FF00; }

Full Stack Development & Department of Computer Science &


41
20CS2406 Engineering
/* selected link */
a:active {
color: blue;
<!DOCTYPE html> }
<html>
</style>
</head>
<head>
<body>
<style>
<h2>Styling a link depending on
/* unvisited link */ state</h2>
a:link { <p><b><a href="default.asp"
color: red; target="_blank">This is a link</a></b></p>
} <p><b>Note:</b> a:hover MUST come
/* visited link */ after a:link and a:visited in the CSS
a:visited { definition in order to be effective.</p>
color: green; <p><b>Note:</b> a:active MUST come
} after a:hover in the CSS definition in
/* mouse over link */ order to be effective.</p>
a:hover { </body>
color: hotpink;
</html>
}
Full Stack Development & Department of Computer Science &
42
20CS2406 Engineering
Output

Full Stack Development & Department of Computer Science &


43
20CS2406 Engineering
Style Specification Format:
Pseudo Classes :.
Input : hover
{ font-family : lucida Handwriting ;
color : violet ;
font-size :40pt;
}
</style>
</head>
<body>
<form action=“”>
<p>
<label>
NAME:
<input type=“text”/>
</label>
</p>
</form>
</body>
</html>
Full Stack Development & Department of Computer Science &
44
20CS2406 Engineering
*PROPERTY VALUE FORMS:
CSS includes 60 different properties in seven categories :
fonts ,lists ,alignment of text , margins ,colors , backgrounds and
borders .
Property value can appear in variety of forms
• Keyword property values are used when there are only a few possible
values and they are predefined.
• A number value can be either an integer or a sequence of digits with a
decimal point and can be preceded by a sign(+ or -)
• Length values are specified as number values that are followed
immediately by a two character abbreviation of a unit name. The possible
unit names are px for pixels , in for inches ,cm for centimeters ,mm for
millimeters ,pt for points.

Full Stack Development & Department of Computer Science &


45
20CS2406 Engineering
1. Inline styles (Presence of style in document). An inline style
lives within your XHTML document. It is attached directly to
the element to be styled. E.g. <h1 style=“color:
#fff;”>
2. IDs (# of ID selectors) ID is an identifier for your page
elements, such as #div.
3. Classes, attributes and pseudo-classes (# of class selectors).
This group includes .classes, [attributes] and
pseudo-classes such as :hover, :focus etc.
4. Elements and pseudo-elements (# of Element (type) selectors).
Including for instance ::before and ::after.

Full Stack Development & Department of Computer Science &


46
20CS2406 Engineering
PROPERTY VALUE FORMS:
• Percentage values are used to provide a measure that is relative to the
previously used measure for a property value. Percentage values are
numbers that are followed immediately by a percentage sign(%).
Percentage values can be signed if preceded by a plus sign .The
percentage is added to the previous value. If negative ,the percentage is
subtracted .
• There can be no space between url and left parenthesis .
• Color property values can be specified as color names , as six digit
hexadecimal number or in RGB form. RGB form is just word rgb
followed by a parenthesized list of three nos that specify the levels of
red,green and blue respectively.

Full Stack Development & Department of Computer Science &


47
20CS2406 Engineering
PROPERTY VALUE FORMS:
• The RGB values can be given either as decimal numbers between
0 to 255 or percentage hexadecimal numbers must be preceded
with pound sign (#) as in #43AF00.

Full Stack Development & Department of Computer Science &


48
20CS2406 Engineering
FONT PROPERTIES:
• Font families :
– The font family property is used to specify a list of font names . The
browser uses a list of font names.
– The browser uses the first font in the list that it supports.
– Font-family : Arial ,Helvetica, Futura
– It tells the browser to use font Arial ,if it supports that font , if not it will
use Helvetica ,if it supports it. If the browser supports neither Arial nor
Helvetica ,it will use Futura . If it can .If browser doesnot support any of
the specified fonts ,it will use an alternative of its choosing.
– If a font name has more than one word ,the whole name should be
delimited by single quote
– Font-family : ‘Times new roman’

Full Stack Development & Department of Computer Science &


49
20CS2406 Engineering
FONT PROPERTIES:
• Font Sizes :
– The font-size property does what it name implies , For example ,the
following property specification sets the font size for text to 10 points
– Font-size : 10pt
– Many relative font size values are defined including xx-small ,x-small,
small, medium, large, ,x-large , xx-large.
– In addition smaller or larger can be specified further more the values can
be a percentage relative to the current font size.
• Font Styles : italic/normal/oblique
– The font-style property is most commonly used to specify italic as in
– Font-style : italic

Full Stack Development & Department of Computer Science &


50
20CS2406 Engineering
FONT PROPERTIES:
• Font -variant :
– The default value of font variant property is normal , which specifies
usual character font .This property can be set to small-caps to specify
small capital characters .
– These characters are all uppercase ,but the letters that are normally
uppercase are somewhat larger than those that are normally
lowercase.
• Font weight :
– The font-weight property is used to specify the degree of boldness .
font-weight : bold
– Besides bold ,the values normal, bolder,lighter can be specified
– Specific number also can be given in multiples of 100 from 100 to 900
where 400 is same as normal and 700 is same as bold

Full Stack Development & Department of Computer Science &


51
20CS2406 Engineering
FONT PROPERTIES:
• Font Shorthands :
– If more than one font property must be specified ,the values can be
stated in a list .As the values of the font property.
– The order in which the property values are given in a font value, list
is important .
– The order must be as follows
• The font names must be last.
• The font size must be second to last.
• Font style , font variant , and font-weight ,when they are included they
are in any order but must precede the font-size and font names .
– Font :bold 14pt Times New Roman’

Full Stack Development & Department of Computer Science &


52
20CS2406 Engineering
Font Properties:
< !DOCTYPE html>
<html>
<head>
<title> Sample CSS </title>
<style type =“text/css”>
p.one
{ font-family : ‘lucida Calligraphy’ ;
font-weight : bold ;
font-size : 75pt ;
color : purple ;
}
h1.two
{ font-family : ‘cambria’ ;
color : purple ;
font-style : italics;
}
p.three
{
font :small-caps italic bold 50pt ‘Times New Roman’ ;}
Full Stack Development & Department of Computer Science &
53
20CS2406 Engineering
Font Properties:
</style>
</head>
<body>
<p class=“one”> CSE </p>
<h1 class=“two” > ECE</h1>
<p class=“three”> MECH </p>
</body>
</html>

Full Stack Development & Department of Computer Science &


54
20CS2406 Engineering
Text Decoration:
The text-decoration property is used to
specify some special features of text.
The available values are line through
overline, underline and none which is
the default.
<!DOCTYPE html>
<html>
<head>
<title>Text Decoration</title>
<style type = "text/css">
h1.one
{text-decoration: line-through;}
h1.two
{text-decoration: overline;}
h1.three
{text-decoration: underline;}
</style>
</head>
Full Stack Development & Department of Computer Science &
55
20CS2406 Engineering
Text Decoration:
<body>
<h1 class = "one">Computer Science and Engineering</h1> <p>[This is line-
through]</p><br/>
<h1 class = "two">Computer Science and Engineering</h1> <p>[This is
overline]</p><br/>
<h1 class = "three">Computer Science and Engineering </h1><p>[This is
underline]</p><br/>
</body>
</html>

Full Stack Development & Department of Computer Science &


56
20CS2406 Engineering
*LIST PROPERTIES
—--List -style-image

Full Stack Development & Department of Computer Science &


57
20CS2406 Engineering
List Properties:
• Two presentation details of lists can be specified in XHTML
documents :
• The shape of the bullets that precede the items in an unordered list
and the sequencing values that precede the items in an ordered list.
• The list-style-property is used to specify both of these
• The list-style-property of an ordered list can be set to disc ,circle ,
square or none

<!DOCTYPE html>
<html>
<head>
<title>CSS Bullets</title>
<style type = "text/css">
li.one {list-style-type:disc}
li.two{list-style-type:square}
li.three{list-style-type:circle}

Full Stack Development & Department of Computer Science &


58
20CS2406 Engineering
*List Properties:
</style>
</head>
<body>
<h3>Dayananda Sagar University</h3>
<ul>
<li class = "one"> Computer Science and Engineering</li>
<li class = "two"> Electronics Engineering and Technology</li>
<li class = "three"> Mechanical Engineering </li>
</ul>
</body>
</html>

Full Stack Development & Department of Computer Science &


59
20CS2406 Engineering
output

Full Stack Development & Department of Computer Science &


60
20CS2406 Engineering
List Properties:
• Bullets in unordered list are not limited to discs ,squares n and
circles .
• Any image can be used in a list item bullets .
• Such a bullet is specified with the list-style-image property,
whose value is specified with the url form

<!DOCTYPE html>
<html>
<head>
<title>CSS Bullets-Image</title>
<style type = "text/css">
li.image {list-style-image: url(arrow.png); font-size:25pt;}
</style>
</head>

Full Stack Development & Department of Computer Science &


61
20CS2406 Engineering
List Properties:
<body>
<h1>Dayananda Sagar University</h1>
<ul>
<li class = "image"> Computer Science and Engineering</li>
<li class = "image"> Electronics and Telecommunication</li>
<li class = "image"> Mechanical Engineering</li>
</ul>
</body>
</html>

Full Stack Development & Department of Computer Science &


62
20CS2406 Engineering
List Properties:
• The following example illustrates the use of different sequence
value in nested lists .
<html>
<head>
<title> CSS nested lists </title>
<style type = "text/css">
ol {list-style-type:upper-roman;}
ol ol {list-style-type:upper-alpha;}
ol ol ol {list-style-type:decimal;}
</style>
</head>
<ol>
<li> Information Science </li>
<ol>
<li>OOMD</li>
<li>Java & J2ee</li>

Full Stack Development & Department of Computer Science &


63
20CS2406 Engineering
List Properties:
<ol>
<li>classes and methods</li>
<li>exceptions</li>
<li>applets</li>
<li>servelets</li>
</ol>
<li>Computer Networks</li>
<ol>
<li>Part 1</li>
<li>Part 2</li>
</ol>
<li>DBMS</li>
<li>Operations Research</li>
</ol>
<li> Computer Science</li>
<ol>
<li>Compiler Design</li>
<li>FLAT</li>

Full Stack Development & Department of Computer Science &


64
20CS2406 Engineering
List Properties:
<ol>
<li>NFA</li>
<li>DFA</li>
<li>CFG</li>
</ol>
<li>Computer Graphics</li>
<li>Artificial Intelligence</li>
</ol>
</ol>
</html>

Full Stack Development & Department of Computer Science &


65
20CS2406 Engineering
Output

Full Stack Development & Department of Computer Science &


66
20CS2406 Engineering
Color:
Color Groups :
• Three levels of collections of colors might be used by an
XHTML document.
• The smallest useful set of colors includes only those that
have standard names and are guaranteed .
• To be correctly displayable by all browsers on all color
monitors .
• This collection of 17 colors is called named colors.
• Larger set of colors called the web pallette , consist of 216
colors. The colors of the web pallette can be viewed at
• https://www.web-source.net/216_color_chart.htm

•
Full Stack Development & Department of Computer Science &
67
20CS2406 Engineering
Color:

Name Hexadecimal Name Hexadecimal


code code
aqua 00FFFF olive 808000
black 000000 orange FFA500
Blue 0000FF purple 800080
fuchsia FF00FF red FF0000
Gray 808080 silver C0C0C0
Green 008000 teal 008080
Lime 00FF00 white FFFFFF
maroon 800000 yellow FFFF00

navy 000080

Full Stack Development & Department of Computer Science &


68
20CS2406 Engineering
Color Properties:
The color property is used to specify the foreground color of
XTML elements
<!DOCTYPE html>
<html>
<head>
<title>Colours</title>
<style type = "text/css">
p.one
{color: pink; }
p.two
{color: # 9900FF; }

Full Stack Development & Department of Computer Science &


69
20CS2406 Engineering
Color Properties:
The color property is used to specify the foreground color of
XTML elements
p.three
{background-color:#99FF00;}
</style>
</head>
<body>
<p class = "one">Dayananda Sagar University</p>
<p class = "two">CSE</p>
<p class = "three">ECE</p>
</body>
</html>

Full Stack Development & Department of Computer Science &


70
20CS2406 Engineering
ALIGNMENT OF TEXT:
• The text-indent property can be used to indent the first line of
a paragraph. This property takes either a length or a
percentage value.
• The text-align property, for which the possible keyword
values are left, center, right, and justify, is used to arrange text
horizontally.
• The float property is used to specify that text should flow
around some element, often an image or a table.
The possible values for float are left, right, and none,
which is the default.

Full Stack Development & Department of Computer Science &


71
20CS2406 Engineering
ALIGNMENT OF TEXT:
<!DOCTYPE html>
<html>
<head>
<title>Text Alignment</title>
<style type = "text/css">
h1.one
{text-align: center}
p.two
{text-indent: 0.5in; text-align: justify;}
img{float:right}
</style>
</head>
<body>

Full Stack Development & Department of Computer Science &


72
20CS2406 Engineering
ALIGNMENT OF TEXT:
<h1 class = "one">Dayananda Sagar University</h1>
<p>
<img src = "DSU.jpg" alt="error"/>
</p>
I am there
<p class = "two">Dayananda Sagar Institutions founded in the 60s by one such
visionary, late Sri Dayananda Sagar committed to take knowledge to the people,
transforms today’s students into responsible citizens and professional leaders of
tomorrow. Dayananda Sagar University created by an Act of the Karnataka State
in 2014, built on this adorable legacy and inspired by its own milestones,
meeting the needs of quality higher education in this part of the world.
</p>
</body>
</html>

Full Stack Development & Department of Computer Science &


73
20CS2406 Engineering
THE BOX MODEL:
• On a given web page or document ,all the elements can
have borders.
• The borders have various styles ,color and width .
• The amount of space between the content of the element
and its border is known as padding .
• The space between border and adjacent element is known
as margin.

Full Stack Development & Department of Computer Science &


74
20CS2406 Engineering
Borders:
• Border-style.
• It can be dotted ,dashed ,double
– Border-top-style.
– Border-bottom-style
– Border-left-style
– Border-right-style
• Border-width.
• It can be thin ,medium ,thick or any length value
– Border-top-width.
– Border-bottom-width
– Border-left-width
– Border-right-width

Full Stack Development & Department of Computer Science &


75
20CS2406 Engineering
Borders:
• Border-color.
– Border-top-color.
– Border-bottom-color
– Border-left-color
– Border-right-color

Full Stack Development & Department of Computer Science &


76
20CS2406 Engineering
Example
short hand css for border Example 1
Width ,style and color can be
given in one property ie border
border:solid;
Example 2
border: dashed red;
Example 3
border:1rem solid;
Example 4
border:thick double #32a1ce;
/* border-width | border-
style|border-color;
Examples:

● border-width: thin medium thick 10px;


○ top border is thin
○ right border is medium
○ bottom border is thick
○ left border is 10px

● border-width: thin medium thick;


○ top border is thin
○ right and left borders are medium
○ bottom border is thick

● border-width: thin medium;


○ top and bottom borders are thin
○ right and left borders are medium

● border-width: thin;
○ all four borders are thin

Note: Always declare the border-style property before the border-width property. An element must have borders
before you can set the width.
Example :

<html>
<head>
<title> Table with border effects </title>
<style type = "text/css">
table
{
border-width:thick;
border-top-color:red;
border-left-color:orange;
border-bottom-color:violet;
border-right-color:green;
border-top-style:dashed;
border-bottom-style:double;
border-right-style:dotted;
}

Full Stack Development & Department of Computer Science &


79
20CS2406 Engineering
</style>
</head>
<body>
<table border = "border">
<caption>Department of CSE, DSU </caption>
<tr>
<td> Prof. Sanjay Chitnis </td>
<td> <img src = "sanjaychitnis.jpg" alt = "cant display"/></td>
</tr>
</table>
</body>
</html>

Full Stack Development & Department of Computer Science &


80
20CS2406 Engineering
another example

p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides
*/
/*try the following also, top|left&right|bottom
border-width:5px 10px 20px; */
}

p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides
*/
}

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px
bottom and 35px left */
}Full Stack Development & Department of Computer Science &
81
20CS2406 Engineering
You can also specify all the individual border
properties for just one side:

Left Border

p{

border-left: 6px solid red;

background-color: lightgrey;

Full Stack Development & Department of Computer Science &


82
20CS2406 Engineering
Box Shadow:
• The box-shadow property attaches one or more shadows to
an element .

Value Description

None Default value, No shadow is displayed

H offset The horizontal offset of the shadow. A


positive value puts the shadow on the
right side of a Box , A negative value
puts the shadow on left side of the box
V-offset The verticle offset of the shadow .A
positive value puts the shadow below
the box , A negative value puts The
shadow above the box
blur Optional .The blur radius ,the higher
the number ,the more blurred the
shadow will be
color The color of the shadow ,the default
value is text color

Full Stack Development & Department of Computer Science &


83
20CS2406 Engineering
Box-Shadow:
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid;
/* shorthand css */
padding: 10px;
box-shadow: 5px 10px 8px #888888;
}
#example2 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px 18px #888888;
Full Stack Development & Department of Computer Science &
20CS2406
} Engineering
84
Box-Shadow:
#example3 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px 18px red;
}
</style>
</head>
<body>
<h2>box-shadow: 5px 10px 8px #888888:</h2>
<div id="example1">
<p>The optional third value adds a blur effect to the shadow.</p>

Full Stack Development & Department of Computer Science &


85
20CS2406 Engineering
Box-Shadow:

</div>
<h2>box-shadow: 5px 10px 18px #888888:</h2>
<div id="example2">
<p>More blurred.</p>
</div>
<h2>box-shadow: 5px 10px 18px red:</h2>
<div id="example3">
<p>More blurred and red.</p>
</div>
</body>
</html>

Full Stack Development & Department of Computer Science &


86
20CS2406 Engineering
Box Shadow:

Full Stack Development & Department of Computer Science &


87
20CS2406 Engineering
Margins and Padding:
• The Margin properties are named margin ,which applies to
all four sides of an element : margin-left ,margin-right,
margin-top and margin bottom. The padding properties are
named padding ,which applies to all four sides:

– padding-left.
– padding-right
– padding-top
– padding -bottom

Full Stack Development & Department of Computer Science &


88
20CS2406 Engineering
Example :
<html>
<head>
<title> Margins and Padding </title>
<style type = "text/css">
p.one
{
margin:0.1in;
padding:0.5in;
background-color:#FF33FF;
border-style:dotted;
}
p.two
{
margin:0.5in;
padding:0.1in;
background-color:#00FF33;
border-style:dashed;
}

Full Stack Development & Department of Computer Science &


89
20CS2406 Engineering
Example :

p.three
{margin:0.3in;
background-color:#FFFF00;
}
p.four
{
padding:0.3in;
background-color:#FF9900;
}
</style>
</head>
<body>

Full Stack Development & Department of Computer Science &


90
20CS2406 Engineering
Example :

<p class = "one"> Dr.Sanjay Chitnis is the Chairman of Computer Science


and Engg ,Department ,DSU<br/>
[margin=0.1in, padding=0.5in]</p>
<p class = "two"> Dr.Sanjay Chitnis is the Chairman of Computer Science
and Engg ,Department ,DSU<br/>
[margin=0.5in, padding=0.1in]</p>
<p class = "three"> Dr.Sanjay Chitnis is the Chairman of Computer Science
and Engg ,Department ,DSU<br/>
[margin=0.3in, no padding, no border]</p>
<p class = "four"> Dr.Sanjay Chitnis is the Chairman of Computer Science
and Engg ,Department ,DSU<br/>
[no margin, padding=0.3in, no border]</p>
</body>
</html>

Full Stack Development & Department of Computer Science &


91
20CS2406 Engineering
<!DOCTYPE html>
<html>
<head>
margin example <style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of


150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>
</html>
Back Ground Image:
• The background-image property is used to place an
image in the background of an element.
• Example code to display background image
<html>
<head>
<title>Background Image</title>
<style type = "text/css">
body {background-image:url(DSU.jpg);}
p
{text-align: justify; color:blue;font-size:20pt;}
</style>
</head>
<body>
•
Full Stack Development & Department of Computer Science &
93
20CS2406 Engineering
Back Ground Image:
<p >WELCOME TO DAYANANDA SAGAR UNIVERSIT
Dayananda Sagar Institutions founded in the 60s by one such visionary, late Sri Dayananda
Sagar committed to take knowledge to the people, transforms today’s students into
responsible citizens and professional leaders of tomorrow. Dayananda Sagar University
created by an Act of the Karnataka State in 2014, built on this adorable legacy and inspired
by its own milestones, meeting the needs of quality higher education in this part of the
world.Universities of great legacy across the world are the invaluable contribution of certain
visionaries to the world. Universities don’t manufacture products with specific use and
determined life cycle. They share & impart multitudes of streams of knowledge and create
wonderful human beings – learned practitioners & Disseminators of knowledge to make the
world a better place to be. These Universities of great significancehave lived through the
centuries building centers of knowledge and great alumni of such Universities.</p>

</body>
</html>

Full Stack Development & Department of Computer Science &


94
20CS2406 Engineering
Back Ground Image:
• In the example , notice that the background image is replicated
as necessary to fill the area of the element .
• This replication is called Tiling .
• Tiling can be controlled with the background –repeat
property ,which can take the value repeat (the default) , no-
repeat ,repeat-x, or repeat-y.
• The no-repeat value specifies that just one copy of the image to
be displayed .
• The repeat-x value means that the image is to be repeated
horizontally; repeat-y means that the image is to be repeated
vertically. In addition, the position of a non repeated background
image can be specified with the background-position property, which
can take a large number of different values.

Full Stack Development & Department of Computer Science &


95
20CS2406 Engineering
<!DOCTYPE html>
<html>
<head>
<style>
p#one
{
border: 1px dashed red ;
padding:30px;
background-color:red;
background-image:url('smiley.gif');
background-repeat:repeat-x;
box-shadow:-5px -10px 10px green;
margin:10px;

}
p#two
{
border: 1px dashed red ;
padding:30px;
background-color:purple;
box-shadow:-5px -10px 10px green;
margin:50px;
background-image:url('smiley.gif');
background-repeat:repeat-y;

</style>

</head>
<p id="one"> I will have a box shadow</p>
<p id="two"> I will have a box shadow</p>
Back Ground Image:
• The keyword values are top, center ,bottom ,left and right .all
of which can be used in many different combinations.

Full Stack Development & Department of Computer Science &


98
20CS2406 Engineering
The <span>
In many situations , we want to apply special font properties to
less than a whole paragraph of text.
• The tag is designed for just this purpose.
<html>
<head> <title>span</title>
<style type = "text/css">
.spanviolet {font-size:25pt;font-family:'lucida calligraphy';color:violet;}
</style>
</head>
<body>

Full Stack Development & Department of Computer Science &


99
20CS2406 Engineering
The <span> tag
<p> Dayananda Sagar Institutions founded in the 60s by one such
visionary, <span class-"spanviolet"> late Sri Dayananda Sagar </span>
committed to take knowledge to the people, transforms today’s students
into responsible citizens and professional leaders of tomorrow</p>
</body>
</html>

Full Stack Development & Department of Computer Science &


100
20CS2406 Engineering
The <div> tags:
• It is more convenient ,however ,to be able to apply a style
to a section of document rather than to each paragraph .
This can be done with the <div>tag. As with <span> , there
is no implied layout for the content of the <div> tag , so its
primary use is to specify presentation details for a section
or division of a document.

Full Stack Development & Department of Computer Science &


101
20CS2406 Engineering
The <span> and <div> tags:
<html>
<head>
<title>div</title>
<style type = "text/css">
.one
{font-size:20pt;font-family:'lucida calligraphy';color:violet;}
.two
{font-size:25pt;font-family:'comic sans ms';color:green;}
</style>
</head>
<body>

Full Stack Development & Department of Computer Science &


102
20CS2406 Engineering
The <span> and <div> tags:
<div class = "one">
<p>Paragragh 1 under division 1</p>
<p>Paragragh 2 under division 1</p>
<p>Paragragh 3 under division 1</p>
</div>
<div class = "two">
<p>Paragragh 1 under division 2</p>
<p>Paragragh 2 under division 2</p>
<p>Paragragh 3 under division 2</p>
</div>
</body>
</html>

Full Stack Development & Department of Computer Science &


103
20CS2406 Engineering
Conflict Resolution:
• There can be one or more type of conflict:
1). when style sheets at 2 or more levels specify different value
for same property on some element.
• This conflict is resolved by providing priority to the different
levels of style sheets.
• The inline level gets the highest priority over the document
level.
• The document level gets the higher priority over the external
level.
• Check the following example:

Full Stack Development & Department of Computer Science &


104
20CS2406 Engineering
Property-value conflicts can occur in several other ways.
1)For example, a conflict may occur within a single style sheet. Consider the following style specifications,
which are next to each other in the same document-level style sheet:
• h3 {color: blue;}
• body h3 {color: red;}

• Both these specifications apply to all h3 elements in the body of the document.
The browser has to resolve this conflict

2) Another source of conflict can arise from the fact that there can be several different origins of the
specification of property values. For example, they may come from a style sheet written by the author of
the document itself but they may come from the browser user and from the browser.

For example, an FX user can set a minimum font size in the Tools-Options-Advanced window.
Furthermore, browsers allow their users to write and use their own style sheets
Origin of Cascading
Origin of Style sheets may have three different origins: author, user, and user agent.

* Author: The author specifies style sheets for a source document according to the conventions of the document language. For
Cascading instance, in HTML, style sheets may be included in the document or linked externally.

* User: The user may be able to specify style information for a particular document. For example, the user may specify a file
that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behave as if it did).

* User agent: Conforming user agents must apply a default style sheet (or behave as if they did) prior to all other style sheets
for a document. A user agent's default style sheet should present the elements of the document language in ways that satisfy
general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented
using an italic font). See "A sample style sheet for HTML 4.0" for a recommended default style sheet for HTML 4.0 documents.

Note that the default style sheet may change if system settings are modified by the user (e.g., system colors). However, due to
limitations in a user agent's internal implementation, it may be impossible to change the values in the default style sheet.

Style sheets from these three origins will overlap in scope, and they interact according to the cascade.

The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes
precedence.

By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for "!
important" rules. All rules user and author rules have more weight than rules in the UA's default style sheet.
Conflict Resolution:
● There can be several different origins of the specification of property values
• One of the value may come from a style sheet created by the author or it can be
specified by the user using the options provided by the browser.
• The property values with different origin have different precedence

• The precedence can also be set for a property by making it as important


• The process of conflict resolution is a multi-stage sorting process
• The first step is to gather information about levels of style sheet.
• Next, all the origins and weights are sorted. The following rules are considered: The
precedence is followed as below ,
1. Important declarations with user origin
2. Important declarations with author origin
3. Normal declarations with author origin
4. Normal declarations with user origin
5. Any declarations with browser (or other user agent) origin.

Full Stack Development & Department of Computer Science &


108
20CS2406 Engineering
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
background-color: blue;
}

.myclass {
background-color: gray;
}

p{
background-color: red !important;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

<p class="myclass">This is some text in a paragraph.</p>

<p id="myid">This is some text in a paragraph.</p>

</body>
</html>
• If there are other conflicts even after sorting ,The next step is
sorting by specificity
• Rules are
1. id selectors
2. Class and pseudo class selectors
3. Contextual selectors (more element type names means
that they are more specific)
4. Universal selectors
• If there still conflicts, they are resolved by giving precedence
to most recently seen specification

• The whole sorting process that is used to resolve style


specification conflicts is called the cascade

Full Stack Development & Department of Computer Science &


110
20CS2406 Engineering
2)Inheritance is another source of property-value conflicts; although as we already
know, the inherited property value is always overridden by the property value given
to the descendant element.
A child element always inherits the styles of the parent element, unless declared
otherwise separately. Even here, if the declarations are not in conflict, they simply
merge
As we can see, the text colour is inherited from the parent element. The background colour is
received from the styles of the box. There are 2 conflicting declarations for “box4”, both of
which have the same specificity(we will come to specificity in the next paragraph). So, the
bottom declaration wins, and the font-size becomes 1em.

3) every property-value specification has a particular specificity, depending on the


particular kind of selector that is used to set it, and those specificities have different levels of
precedence. These different levels are used to resolve conflicts among different specifications.

4) property-value specifications can be marked as being important by including !important


in the specification

• p.special {font-style :italic !important ; font-size:14 }


• This means that font-style:italic is important [this is known as weight
of specification}
CSS3: Introduction
• CSS3 version introduced new features that allowed
developers to style HTML elements with less CSS code.

• CSS3 is most notorious for modules that speed up the


specification process.

• At first , browsers did not support CSS3 features and took a


while for them to become fully Compatible.

Full Stack Development & Department of Computer Science &


113
20CS2406 Engineering
Difference between CSS1 and CSS3
• CSS3 does not deprecate older CSS Code because it is
only an addition to the features offered by CSS1.This list
provides the main arguments in the CSS3 Vs CSS Debate.

• CSS3 allows developers to style HTML elements


easier .They are less dependent on image files and can
complete CSS Styling with fewer lines of code

• The aim of CSS1 was for appearance formatting , and it


did not allows responsive designs.

Full Stack Development & Department of Computer Science &


114
20CS2406 Engineering
CSS Opacity
• The opacity property specifies the
opacity/transparency of an element

• Opacity value can take a value from 0.0 -1.0 .The


lower value ,the more transparent

Full Stack Development & Department of Computer Science &


115
20CS2406 Engineering
CSS Opacity
• Image opacity with 20% transparency

<html>
<head>
<style>
img {
opacity: 0.2;
}
</style>
</head>
<body>

Full Stack Development & Department of Computer Science &


116
20CS2406 Engineering
CSS Opacity

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The
lower the value, the more transparent:</p>
<p>Image with 20% opacity:</p>
<img src="klematis.jpg" alt="Forest" width="170" height="100">
</body>
</html>

Full Stack Development & Department of Computer Science &


117
20CS2406 Engineering
CSS Opacity
Output :

Full Stack Development & Department of Computer Science &


118
20CS2406 Engineering
CSS Opacity
• Image opacity with 50% transparency

<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>

Full Stack Development & Department of Computer Science &


119
20CS2406 Engineering
CSS Opacity

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The
lower the value, the more transparent:</p>
<p>Image with 50% opacity:</p>
<img src="klematis.jpg" alt="Forest" width="170" height="100">
</body>
</html>

Full Stack Development & Department of Computer Science &


120
20CS2406 Engineering
CSS Opacity
Output :

Full Stack Development & Department of Computer Science &


121
20CS2406 Engineering
CSS Opacity
• Image opacity with 50% transparency

<html>
<head>
<style>
img {
opacity: 1.0;
}
</style>
</head>
<body>

Full Stack Development & Department of Computer Science &


122
20CS2406 Engineering
CSS Opacity

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The
lower the value, the more transparent:</p>
<p>Image with 100% opacity:</p>
<img src="klematis.jpg" alt="Forest" width="170" height="100">
</body>
</html>

Full Stack Development & Department of Computer Science &


123
20CS2406 Engineering
CSS Opacity
Output :

Full Stack Development & Department of Computer Science &


124
20CS2406 Engineering
CSS Rounded Corners
• With the CSS border-radius property ,you can give any
element “Rounded Corners”
• CSS border-radius Property: The CSS border-radius property
defines ,the radius of an elements corners.

Full Stack Development & Department of Computer Science &


125
20CS2406 Engineering
CSS Rounded Corners

Full Stack Development & Department of Computer Science &


126
20CS2406 Engineering
CSS Rounded Corners
Code example :

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

Full Stack Development & Department of Computer Science &


127
20CS2406 Engineering
CSS Rounded Corners
Code example :
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

Full Stack Development & Department of Computer Science &


128
20CS2406 Engineering
CSS Rounded Corners
Code example :
#rcorners3 {
border-radius: 25px;
background: url(klematis.jpg);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>

Full Stack Development & Department of Computer Science &


129
20CS2406 Engineering
CSS Rounded Corners
Code example :
<h1>The border-radius Property</h1>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>
</body>
</html>

Full Stack Development & Department of Computer Science &


130
20CS2406 Engineering
CSS Rounded Corners
Code example :
<h1>The border-radius Property</h1>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>
</body>
</html>

Full Stack Development & Department of Computer Science &


131
20CS2406 Engineering
<!DOCTYPE html>
<html>
<style>

img{
opacity:.4;

}
p#example1
{
border:solid 5px red;
border-width:5px 20px;
border-top-width:50px;
background-color:yellow;
background-image:url('smiley.gif');
background-repeat:no-repeat;
border-radius:10px;
background-position:center;

</style>
<body>

<h1>The img element</h1>

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

<p id="example1"> I am a paragraph</p>

</body>
CSS Attribute Selector
• Style HTML elements with specific Attributes
It is possible to Style HTML elements that have
specific Attributes or Attribute values .
• CSS [Attribute] selector
The [attribute] selector is used to select elements
with a specified attribute.
• The following example selects all <a> elements with a target
attribute
a[target]{
background-color :yellow;
}

Full Stack Development & Department of Computer Science &


133
20CS2406 Engineering
CSS Attribute Selector
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>

Full Stack Development & Department of Computer Science &


134
20CS2406 Engineering
CSS Attribute Selector

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

Full Stack Development & Department of Computer Science &


135
20CS2406 Engineering
CSS Attribute Selector

Full Stack Development & Department of Computer Science &


136
20CS2406 Engineering
https://blog.hubspot.com/
website/css-margin-vs-
padding#:~:text=In%20CSS
%2C%20a%20margin
%20is,the%20space%20inside
%20an%20element.
THANK YOU

Full Stack Development & Department of Computer Science &


138
20CS2406 Engineering

You might also like