Scribd
Upload
53 views

PPT-2 CSS

Style sheets allow for control over the style and layout of web pages. They provide several advantages including separation of content from presentation, global updates by modifying a single style sheet, and inheritance of styles. Styles can be defined internally within the <HEAD> element, externally in separate CSS files, or inline within HTML elements. The order of precedence is inline styles, internal styles, external styles, and browser defaults. Selectors like classes and IDs allow targeting specific elements. Pseudo-classes can style links in different states. [/SUMMARY]

Uploaded by

Anushka Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
53 views

PPT-2 CSS

Style sheets allow for control over the style and layout of web pages. They provide several advantages including separation of content from presentation, global updates by modifying a single style sheet, and inheritance of styles. Styles can be defined internally within the <HEAD> element, externally in separate CSS files, or inline within HTML elements. The order of precedence is inline styles, internal styles, external styles, and browser defaults. Selectors like classes and IDs allow targeting specific elements. Pseudo-classes can style links in different states. [/SUMMARY]

Uploaded by

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

1

2
3
4
• Style Sheet is a breakthrough in Web design.
• User can control over style and layout of web pages.
• Either a single style can be applied to multiple pages or multiple styles can be
given to a single page.
• If you want to update style of multiple pages then simply update the style sheet
which changes all the elements automatically Style sheets are said to cascade
when they combine to specify the web page.
• A style sheet consists of style rules that tell a browser how to present a document.

• The simplest way of using style sheet with HTML document is embed styles in
<STYLE> element.
• The style is present in the HEAD section and it contains the rules for the page
elements such as BODY,P,FONT etc.
• Each rule is made up of a selector.

5
Advantages
•Since style sheets support a wide variety of properties. It has a good control over
the presentation.
•With the external style sheets the contents and the presentation can be separated.
The same style sheet can be linked to one or more web pages. This maintains a
standard look and feel for all the pages of a web site.
•Changes made to the external style sheet reflect globally in all the connected web
pages. This helps in reducing the effort and time spent for web site maintenance.

6
The selector contains HTML element/tag , the property defines the attribute
to be changed, and each property can take a value. Both are separated by a
colon and surrounded by curly braces.
The selector is an element that is linked to a particular style .
The example given is a CSS rule. it consists of two main parts: selector
(element) and declaration (‘property: value'). Again the declaration has two
parts: property ('color') and value (‘red').

7
<html>
<head>
<style type="text/css">
body{
background-color:#d0e4fe;}
h1{
color:orange;
text-align:center;}
p{
font-family:"cosmic sans ms";
font-size:20pt;}
</style></head>
<body>
<h1> CSS Example</h1>
<p> Module name is HTML and Topic is CSS</p>
</body>

8
</html>

8
SELECTORS: The selector is the link between the style sheet and the HTML
document, and any HTML element types can be defined as selectors.

Inheritance: All selectors which are nested within selectors will inherit the property
values of the outer selector if it not modified. A font-size defined for the BODY will
also be applied to sub elements.

<html>
<head>
<style>
h2{
color:blue;
font-size:80pt;
}
</style>
</head>
<body>

<h2> This is CSS style</h2>


</body>
</html>

9
<html>
<head>
<style type="text/css">
body
{
color:Green;
}
</style>
</head>
<body>
<h1>CSS stands for Cascading Style Sheet</h1>
</body>
</html>

10
Class Selector.
It can have different classes, so we can have different styles for the same element.
For example, an author may wish to display code in a different color depending on its
language:
code.html { color: #191970 }
code.css { color: #4b0082 }
Classes can also be delcared without an associated element:
.css { color: red}
ID Selector.
ID selectors are created for the purpose of defining on a per-element basis. An ID
selector can be created by using the symbol "#" to precede a name.
<style>
H1 { color:red; font_size:20pt;}
h1.c { color:red; }
</style><head>
<body>
<h1> First H1 Tag</h1>
<h1 class="c"> Second H1 Tag with class attribute</h1>
</body>

11
<html>
<head>
<style type="text/css">
p.center{
color:blue;
text-align:center;
}
</style>
</head>
<body>
<h1 class="center"> This heading is will not be affected</h1>
<p class="center"> This paragraph will be center-aligned</p>
</body>
</html>

12
13
Contextual Selectors
the contextual selector
P EM { background: yellow }
Emphasized element within Paragraph will have yellow background. Other
emphasized elements will not be affected.
Grouping
all of the elements will have identical properties through a grouping:
H1, H2, H3, H4, H5, H6 {
color: blue; font-family: arial
}

14
Rules with pseudo-classes take the form
selector:pseudo-class { property: value }

Pseudo-classes and pseudo-elements should not be specified with HTML's CLASS


attribute.
Normal classes may be used with pseudo-classes as follows.
selector.class:pseudo-class { property: value }

The anchor element can give the pseudo-classes link, visited, or active. A visited link
could be defined to render in a different color and even a different font size and style.

<html>
<head><style>
a:link{ color:blue; }
a:hover{ color:red; }
</style>
<head><body>
<h2> Open sparsh <a href="http://sparsh">Sparsh</a></h2>
</body></html>

15
<html>
<head>
<style type="text/css">
a:link{color:#FF0000;} /* unvisited link */
a:visited{color:#00FF00;} /* visited link */
a:hover{color:#FF00FF;} /* mouse over link */
a:active{color:#0000FF;} /* selected link */
</style>
</head>
<body>
<h2> Company Intranet<a href=https://www.amity.edu/gwalior/'> Go To
Sparsh</a></h2>
</body>
</html>
Style Sheets allow style to be specified in many ways. They are as follows:
1. Inside an element
2. Inside HEAD
3. External sheet

17
Style Sheets allow style information to be specified in many ways. Styles can be
specified inside a single HTML element, inside the <HEAD> element of an HTML page,
or in an external CSS file. Even multiple external Style Sheets can be referenced inside
a single HTML document.

18
Embedded Style : The style definition is part of the HTML doc - typically within the
HEAD tags. This is much better than inline. If a change has to be made to a certain tag
e.g. H1 in the page, you need to make it only in one place i.e. in the style definition
(unlike inline styles where the change has to be made at every occurrence of H1).
However embedded styles still have the drawback of not providing automatic
consistency over a set of HTML pages.

<html><head>
<style>
/* Using Embedded style */
h2{
color:blue;
font-size:40pt;
letter-spacing :10pt;
}
</style></head><body>
<!-- Comments : Using inline style -->
<h2 style="color:red;">Using Inline and Embedded</h2>
</body></html>

19
An external style sheet is used when the style is applied to many pages. It can be
used to control the entire web site by changing one one style file.
• All the style definitions are stored in a separate css file and referenced from
the HTML document using a LINK tag..
<LINK REL=stylesheet HREF=“external.css“ TYPE=text/css>
• REL is the relationship specifier
HREF specifies the URL of the style sheet to use.
TYPE specifies the content type. e.g: "text/html", "image/png", "image/gif",
"video/mpeg", "text/css",
• The above line can be kept in the HEAD tag.
• The browser will read the style definitions from the file external.css, and
format the document according to it.
• This is best way to use CSS because the same .css file can be used for the
entire web site.

20
Apart from the <LINK> tag ,importing a style to a document is another way to
use a document –wide style. It refers the external style sheet but this reference is
similar to macro expansion inline.

The syntax is :
@import followed by the URL of the style sheet to import.
e.g . @import “http://www.mywebsite.com/styles/mystyle.css”
Which style will be used if more than one style specified for an HTML element?The
order is as follows
• inline Style (highest priority)
• Internal Style Sheet
• External Style Sheet
• Browser default ( default value)

21
The DIV and SPAN elements , in conjunction with the id and class attributes, offer a
generic mechanism for adding structure to documents. These elements do not impose
any presentational idioms on the content.
DIV element:
•Used when the user wants to define a block or section of styled text.
•The DIV Formatting element is with an implied line break before and after the
enclosed contents.
•The DIV element can be nested.
DIV element Attributes:
•ALIGN : horizontal alignment by default and can be over-riden by style sheets values
•COLS :defines the number columns the contained content will be split into.
•HEIGHT and WIDTH :specifies the height and width in pixels.
•NOWRAP :False- normal line breaking behavior
True-element will not wrap to the rendering viewport unless explicit line
breaking elements are added.

22
<html><head>
<style>
.heading {
text-align:center;
font-size:20pt;
color:blue; }
.div1 {
font-size:16pt;
color:blue; }
.span1 {color:red; }
</style></head><body>
<h3 class="heading"> Diff between Div and Span</h3>
<div class="div1">
<span class="span1">SPAN</span> allow authors to give
style that could not be attached to a structural HTML element.
It is a <span class="span1">Inline element</span>
and <span class="span1">DIV</span> is a
<span class="span1">block level element</span>
</div></body><html>

23
All of the above are the style properties that are supported. In this unit we will be
looking at all these properties and their corresponding attributes in detail.
Most of the above properties have attributes that require length values to be specified.
Lets look at the length values in detail.
Length values
• It can have positive or negative values, have a numerical value followed by a unit of
measurement.
•Two kind of length unit, relative and absolute
•The units of measurement are :

Unit Name Abbreviation Explanation


Em Em The height of the font
Ex Ex Height of the letter x in the font.
Pica Pc 1 pica is 12 points
Point Pt 1/72 of an inch
Pixel Px One dot on the screen
Millimeter Mm Printing unit
Centimeter Cm Printing unit
Inch In Printing unit

In the table above Em, Ex and pixel are relative units, rest are absolute.
NOTE : Absolute units should be used only when the physical characteristics of the output
device is known.
24
Color properties
CSS supports a variety of properties that can be used to control the color and
backgrounds.
It supports three basic forms of color specifications:
• Color names : 16 colors keywords are supported by browsers. These are the same
predefined colors from the HTML specifications.
• Hexadecimal : Supports standard 6-digit color form #RRGGBB same as used within
the <FONT> and <BODY> tag.
• RGB values : The RGB format is also specified in the form rgb (R,G,B), where R,G
and B values range from 0 to 255.
CSS supports the color property, which is used to set the text color.
e.g. BODY {color:blue }
H1 { color: #FF0088}
The Background properties allow you to control the background color of an element,
set an image as the background, repeat a background image vertically or horizontally,
and position an image on a page. The properties and their description is summarized
in the table below.

25
<html>
<head>
<style type="text/css">
body{
background-color:#b0c4de;
color:blue;
} </style>
</head>
<body>
<h1> Welcome To Amity University Gwalior</h1>
<p>We enable you to leverage knowledge anytime, anywhere!</p>
</body>
</html>
<html>
<head>
<style type="text/css">
body{
background-image:url("aump_img1.jpg");}
</style>
</head>
<body>
<h1> Welcome To Global Education Center</h1>
</body>
</html>

27
CSS provides numerous font oriented properties to set the family, style, size and
variations of the font used.
• font-family : Is used to set the font-family that is used to render text. This
property may be set to specific font like Arial , to a generic family, such as sans serif
or a comma delimited sequence of font family names.
• font-size : Is used to set the relative or physical size of the font used.
• font-style : is used to specify normal, italic or oblique font style for the font being
used
• font-weight: Selects the weight or darkness of the font. Value rages from 100 to
900, in increments of 100. Keywords are also supported
<html>
<head>
<style type="text/css">
p.fontstyle {font-style:italic;}
p.fontfamily {font-family:"comic sans ms", arial;}
p.fontweight {font-weight:bold;}
p.fontsize {font-size:xx-small;}
</style>
</head>
<body>
<p class="fontfamily">what type of font is this - comic sans or arial???</p>
<p class="fontstyle">this is now italicized</p>
<p class="fontweight">the bold and the beautiful</p>
<p class="fontsize">small is beautiful</p>
</body>
</html>

28
<html>
<head>
<style type="text/css">
p.class1{font-family:"verdana";}
p.class2{font-style:"italic";}
p.class3{font-weight:bold;}
p.class4{font-size:xx-small;}
</style>
</head>

<body>
<h1> Global Education Center</h1>
<p class="class1"> Education and Research</p>
<p class="class2"> Generic & Itermediate</p>
<p class="class3"> Open Systems</p>
<p class="class4"> Dot Net</p>
</body>
</html>
Text properties controls the appearance of text. The color of a text can be changed,
and size can be increased or decreased, the space between characters in a text,

30
align a text, decorate a text, indent the first line in a text, and more.
The word-spacing property – amount of space between words
The letter-spacing property – amount space between characters.
The text-decoration property allows text to be decorated.
The vertical-align property may be used to alter the vertical positioning of an inline
element.
The text-transform property allows text to be transformed by one of four properties.
The text-align property can be applied to block-level elements to give the alignment
of the element's text. Examples are P, H1 etc
The text-indent property can be applied to block-level elements, to define the
amount of indentation that the first line of the element should receive.
<html><head>
<style>
h2{
letter-spacing:25pt; font-size:100pt;text-align:center;
}
</style>
<head><body>
<h2>AUMP</h2>
</body></html>

30
<html>
<head>
<style type="text/css">
h1{text-decoration:overline;}
h2{text-decoration:line-through;}
h3{text-decoration:underline;}
h4{letter-spacing:20pt;}
h5{text-align:center;}
</style>
</head>

<body>
<h1> Global Education Center</h1>
<h2>Training Period</h2>
<h3>Generic & Itermediate Courses</h3>
<h4>Open Systems </h4>
<h5>E&R</h5>
</body>
</html>

31
<html>
<head>
<style type="text/css">
h1{text-decoration:overline;}
h2{text-decoration:line-through;}
h3{text-decoration:underline;}
h4{letter-spacing:20pt;}
h5{text-align:center;}
</style>
</head>

<body>
<h1> Global Education Center</h1>
<h2>Training Period</h2>
<h3>Generic & Itermediate Courses</h3>
<h4>Open Systems </h4>
<h5>E&R</h5>
</body>
</html>

32
The Margin properties is used to define the space around HTML elements. Contents
can be overlapped by using the negative values.The margins(top.left,right, bottom)
can be changed independently using separate properties. A shorthand margin
property can also be used to change all of the margins at once.
Eg. DIV { margin: 1em 2em 3em 4em }
top-1em,
Right- 2em
Bottom-3em
Left- 4em
The Border will allow you to modify the style, color and width of an
block level element. HTML table’s border can be modifed using this element.
The border property is a shorthand for setting the width, style, and color of an
element's border.
Eg. A:active { border: thick double red }
<html>
<head><style>
h2{ text-align:center;
border-width:thick;
border-color:red;
Border-style:solid; }
</style>
<head><body>
<h2>Border Demo</h2>
</body></html>

33
The Classification properties allow you to control how to display an element, set
where an image will appear in another element, position an element relative to its
normal position, position an element using an absolute value, and how to control
the visibility of an element. Most often used properties are briefly described in the
table below.
Property Description Values

clear Sets the sides of an element where left, right, both, none
other floating elements are not allowed

cursor Specifies the type of cursor to be url, auto, crosshair


displayed default, pointer, move
display Sets how/if an element is displayed none, inline, block
list-item, run-in
compact, marker
float Sets where an image or a text will left, right,
appear in another element none
list-style- Sets the type of the list-item marker none, disc, circle, square
type decimal, lower-roman
upper-roman,
lower-alpha, upper-alpha

list-style- Sets an image as the list-item marker none, url


image 35
CSS Positioning properties define the position of an element.
Postiton can be set to left, right, top, and bottom position of an element.
It could be static, relative, absolute or fixed position .
Z-index: Sets the stack order of an element.
visibility: The visibility property sets if an element should be visible or invisible.
Invisible elements takes up space on the page. Use the "display" property to create invisible
elements that do not take up space.

Property Description Values


bottom Sets how far the bottom edge of an element is auto, %, length
above/below the bottom edge of the parent
element
Similarly we have left , right and top.
Position Places an element in a static, relative, absolute or static, relative, absolute
fixed position fixed

overflow Sets what happens if the content of an element visible, hidden, scroll
overflow its area auto
vertical- Sets the vertical alignment of an element baseline, sub, super, top,
align text-top, middle, bottom
text-bottom, length, %

z-index Sets the stack order of an element. Default z- Auto, number


index is 0. Element with smaller Z-index will be 38
placed "behind" another element having larger z-
<html>
<head>
<style type="text/css">
h1{ font-size:60pt;
color:blue;
position:absolute;
top:0px;
z-index;1;}
h2{
font-size:58pt;
color:red;
position:absolute;
top:20px;}
</style>
</head>
<body>
<h1>AUMP</h1>
<h2>AUMP</h2>
</body>
</html>

39

You might also like