Unit II Style Sheets Full

Unit-2
Syllabus
Need for CSS, introduction to CSS, basic syntax and
structure using CSS, background images, colors and
properties, manipulating texts using fonts, borders and
boxes, margins, padding, lists, positioning using CSS, CSS2.
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.
Need for CSS
 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, how columns are sized
and laid out, what background images or colors are used, layout designs, and variations
in display for different devices and screen sizes as well as a variety of other effects.
 CSS is easy to learn and understand but it provides powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with the
markup languages HTML or XHTML.
Advantages of CSS
 CSS plays an important role, by using CSS you simply got to specify a repeated style for
element once & use it multiple times as because CSS will automatically apply the required
styles.
 The main advantage of CSS is that style is applied consistently across variety of sites. One
instruction can control several areas.
 It creates a stunning website.
 Web designers needs to use few lines of programming for every page improving site speed.
 Cascading sheet not only simplifies website development, but also simplifies the
maintenance time.
 CSS changes are device friendly. With people employing a batch of various range of smart
devices to access websites over the web, there’s a requirement for responsive web design.
 It has the power for re-positioning. It helps us to determine the changes within the position
of web elements who are there on the page.
 Easy for the user to customize the online page.
 It reduces the file transfer size.
CSS - Syntax
 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 a 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, border etc.
 Value − Values are assigned to properties. For example, color property can have
value either red or #F1F1F1 etc.
CSS Style Rule Syntax as follows −
selector { property: value }
 Example
p{
color: red;
text-align: center;
}
 Explanation of Example
p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value
Example
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
<style>
h1 {
color: #36CFFF;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
< p> Introduction to CSS <p>
</body>
</html>
CSS Selectors:
 CSS selectors are used to select the content you want to style. Selectors are the part of
CSS rule set. CSS selectors select HTML elements according to its id, class, type,
attribute etc.
 There are several different types of selectors in CSS.
 CSS Element Selector
 CSS Id Selector
 CSS Class Selector
 CSS Universal Selector
 CSS Group Selector
The element Selector:
 The element selector selects elements based on the element name.
 You can select all <p> elements on a page like this (in this case, all <p> elements
will be center-aligned, with a red text color):
 Example:
p{
text-align: center;
color: red;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
The id Selector:
 The id selector uses the id attribute of an HTML element to select a specific element.
 An id should be unique within a page, so the id selector is used if you want to select
a single, unique element.
 To select an element with a specific id, write a hash character (#), followed by the id
of the element.
 The style rule below will be applied to the HTML element with id="para1":
 Example:
#para1 {
text-align: center;
color: red;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello CSS.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
The class Selector:
 The class selector selects elements with a specific class attribute.
 To select elements with a specific class, write a period character.(full stop symbol), followed
by the name of the class:
 Syntax:
<style type=”text/css”>
.classname {style_attribute: value;}
</style>
 In the example below, all HTML elements with class="center" will be red and center-aligned:
Example1:
.center{
text-align: center;
color: red;
}
 In the example below, all <p> elements with class="center" will be center-aligned:
 Example 2:
p.center{
text-align: center;
color: red;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
Grouping Selectors:
 Size of the style sheets can be reduced using grouping
 One can group selectors in comma-separates list.
If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
 You can group the selectors, to minimize the code.
 To group selectors, separate each selector with a comma.
 In the example below we have grouped the selectors from the code above:
Example:
h1, h2, p {
text-align: center;
color: red;
}
CSS Universal Selector
 The universal selector is used as a wildcard character. It selects all the elements on
the pages.
Example:
*{
color: green;
font-size: 20px;
}
 In this example, all HTML elements are applied with this style.
Methods/Types of CSS in webpage
Three ways to insert a style sheet (CSS)

 There are three ways of inserting a style sheet:
• External CSS
• Internal / Embedded CSS
• Inline CSS
External CSS
 With an external style sheet, you can change the look of an entire website by
changing just one file!
 When using CSS it is preferable to keep the CSS separate from your HTML.
 Placing CSS in a separate file allows the web designer to completely differentiate
between content (HTML) and design (CSS).
 External CSS is a file that contains only CSS code and is saved with a ".css" file
extension.
 This CSS file is then referenced in your HTML using the <link> instead of
<style>, inside the head section.
Example
 External styles are defined within the <link> element, inside the <head> section of an HTML
page:
 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
 An external style sheet can be written in any text editor, and must be saved with a .css extension.
 The external .css file should not contain any HTML tags.
Here is the "mystyle.css" file:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal / Embedded CSS
 An internal style sheet may be used if one single HTML page has a unique style.
 The internal style is defined inside the <style> element, inside the head section or
<head> tag.
Example
 Internal styles are defined within the <style> element, inside the <head> section of an
HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
 An inline style may be used to apply a unique style for a single element.
 To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.
Example
 Inline styles are defined within the "style" attribute of the relevant element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>
</body>
</html>
CSS Background
 CSS background property is used to define the background effects on element.
There are 5 CSS background properties that affects the HTML elements:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
1) CSS background-color
 The background-color property is used to specify the background color of the element.
 Example
<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello, This is an example of CSS background-color.</p>
</body>
</html>
2) CSS background-image
 The background-image property is used to set an image as a background of an element. By default the
image covers the entire element.
 Example
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-image: url(“image.jpg");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Background Image</h1>
</body>
</html>
3) CSS background-repeat
 By default, the background-image property repeats the background image horizontally
and vertically. Some images are repeated only horizontally or vertically.
 The background looks better if the image repeated horizontally only.
background-repeat: repeat-x;
 For vertical
background-repeat: repeat-y;
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>background - horizontal.com</h1>
</body>
</html>
4) CSS background-attachment
 The background-attachment property is used to specify if the background image is

fixed or scroll with the rest of the page in browser window. If you set fixed the
background image then the image will not move during scrolling in the browser.
background-repeat: no-repeat;
background-attachment: fixed;
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url (“image.jpg");
background-attachment: fixed;}
</style>
</head>
<body>
<h1>background .com</h1>
</body>
</html>
5) CSS background-position
 The background-position property is used to define the initial position of the background
image. By default, the background image is placed on the top-left of the webpage.
 You can set the following positions:
1. center
2. top
3. bottom
4. left
5. Right
Example:
background: white url ('good-morning.jpg');
background-position: center;
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: white url(‘image1.jpg');
background-position: center;
}
</style>
</head>
<body>
<h1>background - position.com</h1>
</body>
</html>
CSS colors
 The color property in CSS is used to set the color of HTML elements. Typically,
this property is used to set the background color or the font color of an element.
 There are different coloring schemes in CSS
 Three widely used techniques are as follows
 RGB
 This starts with RGB and takes 3 parameter
 3 parameter basically corresponds to red, green and blue
 The value of each parameter may vary from 0 to 255.
 Eg: RGB(255,0,0); means color red
 HEX
 Hex code starts with # and comprises of 6 numbers which are further divided into 3 sets
 Sets basically correspond to Red, Green, and Blue
 Single set value can vary from 00 to 09 and AA to FF
 Eg: #ff0000 ; means color red
 RGBA
 This starts with RGB and takes 4 parameter
 4 parameter basically corresponds to red, green, blue and alpha
 Value of the first three parameters may vary from 0 to 255 and the last parameter ranges from
0 to 1 that is from 0.1, 0.2,…..0.9
 Eg: RGB(255,0,0,0); means color red
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<style>
#center{ color:#ff0099; text-align: center;}
h1{ color:rgba(255,0,0,0.5);}
</style>
</head>
<body>
<h1>This heading is CSS colors</h1>
<p style="color:rgb(255,0,0)">This paragraph will be red</p>
<p id="center">This paragraph will be pink and center-aligned</p>
</body>
</html>
CSS Font
 CSS Font property is used to control the look of texts. By the use of CSS font
property you can change the text size, color, style and more.
 These are some important font attributes:
1. CSS Font color: This property is used to change the color of the text. (standalone
attribute)
2. CSS Font family: This property is used to change the face of the font.
3. CSS Font size: This property is used to increase or decrease the size of the font.
4. CSS Font style: This property is used to make the font bold, italic or oblique.
5. CSS Font variant: This property creates a small-caps effect.
6. CSS Font weight: This property is used to increase or decrease the boldness and
lightness of the font.
1) CSS Font Color
 CSS font color is a standalone attribute in CSS
 It is used to change the color of the text.
 There are three different formats to define a color:
1. By a color name
2. By hexadecimal value
3. By RGB
 Set the text-color for different elements:
 Example
<style>
h4 { color: red; }
h5 { color: #9000A1; }
h6 { color: rgb(0, 220, 98); }
</style>
2) CSS Font Family
 The font family of a text is set with the font-family property.
<style>
h4 { font-family: sans-serif; }
h5 { font-family: serif; }
h6 { font-family: arial; }
</style>
3) CSS Font Size
 CSS font size property is used to change the size of the font.
These are the possible values that can be used to set the font size:
Font Size Value Description

xx-small used to display the extremely small text size.
x-small used to display the extra small text size.
small used to display small text size.

medium used to display medium text size.
large used to display large text size.

x-large used to display extra large text size.
xx-large used to display extremely large text size.
size in pixels or % used to set value in percentage or in pixels.

 Example
p { font-size: 120%; }
p{ font-size: 10px; }
p{ font-size: x-large; }
4) CSS Font Style
 CSS Font style property defines what type of font you want to display. It may
be italic, oblique, or normal.
 Example
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
5) CSS Font Variant
 CSS font variant property specifies how to set font variant of an element. It may
be normal and small-caps.
 In a small-caps font, all lowercase letters are converted to uppercase letters.
However, the converted uppercase letters appears in a smaller font size than the
original uppercase letters in the text.
 Example
p { font-variant: small-caps; }
h3 { font-variant: normal; }
<!DOCTYPE html>
<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
</html>
6) CSS Font Weight
 CSS font weight property defines the weight of the font and specify that how bold
a font is. The possible values of font weight may be normal, bold, bolder, lighter
or number (100, 200..... upto 900).
 Example
h{ font-weight: bolder; }
p { font-weight: 100; }
CSS TEXT
CSS is a language that describes the style of an HTML document. The following are the
CSS text properties of an element:
 The color property is used to set the color of a text.
 The direction property is used to set the text direction.
 The letter-spacing property is used to add or subtract space between the letters that make
up a word.
 The word-spacing property is used to add or subtract space between the words of a
sentence.
 The text-indent property is used to indent the text of a paragraph.
 The text-align property is used to align the text of a document.
 The text-decoration property is used to underline, overline, and strikethrough text
 The text-transform property is used to capitalize text or convert text to uppercase or lowercase
letters.
 The white-space property is used to control the flow and formatting of text.
 The text-shadow property is used to set the text shadow around a text.
syntax
text-shadow: h-shadow v-shadow blur-radius color| none | initial | inherit;
Example
<html>
<head> <title>Manipulating Text using CSS</title>
</head>
<body>
<p style = "color:red;">This text will be written in red.</p>
<p style = "direction:rtl;">This text will be rendered from right to left. </p>
<p style = "letter-spacing:5px;">This text is having space between letters.</p>
<p style = "word-spacing:5px;">This text is having space between words. </p>
<p style = "text-indent:1cm;">
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>
<p style = "text-align:right;"> This will be right aligned.</p>
<p style = "text-align:center;">This will be center aligned.</p>
<p style = "text-align:left;“>This will be left aligned.</p>
<p style = "text-decoration:underline;">This will be underlined.</p>
<p style = "text-decoration:line-through;">This will be striked through.</p>
<p style = "text-decoration:overline;">This will have a over line.</p>
<p style = "text-decoration:blink;">This text will have blinking effect.</p>
<p style = "text-transform:capitalize;"> This will be capitalized. </p>
<p style = "text-transform:uppercase;">This will be in uppercase.</p>
<p style = "text-transform:lowercase;">This will be in lowercase.</p>
<p style = "text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property, this text will have a blue shadow.
</p>
</body>
</html>
Output
CSS Border
 The border properties allow you to specify how the border of the box representing
an element should look. There are three properties of a border you can change −
 The border-color specifies the color of a border.
 The border-style specifies whether a border should be solid, dashed line, double
line, or one of the other possible values.
 The border-width specifies the width of a border.
CSS border-color
The border-color property is used to set the color of the four borders.
The color can be set by:
 name - specify a color name, like "red"
 HEX - specify a HEX value, like "#ff0000"
 RGB - specify a RGB value, like "rgb(255,0,0)"
 HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
 Transparent.
 Example
p.one {
border-style: solid;
border-color: red;
}
CSS border-width
 The border-width property specifies the width of the four borders.
 The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the
three pre-defined values: thin, medium, or thick.
 Example
p.one {
border-width: 5px;
}
p.two {
border-width: medium;
}
CSS border-style
The border-style property specifies what kind of border to display. The following values
are allowed:
 dotted - Defines a dotted border
 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-color value
 ridge - Defines a 3D ridged border. The effect depends on the border-color value
 inset - Defines a 3D inset border. The effect depends on the border-color value
 outset - Defines a 3D outset border. The effect depends on the border-color value
 none - Defines no border
 hidden - Defines a hidden border
Example
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style: double; border-color:#009900; ">
This is a double border. </p>
<p style = "border:4px solid red;">
This example is showing shorthand property for border.
</p>
</body>
</html>
CSS box model
 The CSS box model is essentially a box that wraps around every HTML element.
It consists of: margins, borders, padding, and the actual content. The image below
illustrates the box model:
Box model
 Explanation of the different parts:
 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space
between elements.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>The Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of:
borders, padding, margins, and the actual content.</p>
</body>
</html>
CSS-Margins
 CSS Margin property is used to define the space around elements. It is completely
transparent and doesn't have any background color. It clears an area around the
element.
 Top, bottom, left and right margin can be changed independently using separate
properties.
 There are following CSS margin properties:
Property Description
margin This property is used to set all the properties in one declaration.
margin-left it is used to set left margin of an element.
margin-right It is used to set right margin of an element.
margin-top It is used to set top margin of an element.
margin-bottom It is used to set bottom margin of an element.
All the margin properties can have the following values:
 auto - the browser calculates the margin
 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the parent element
Example
1. margin: 50px 100px 150px 200px;
It identifies that:
top margin value is 50px
right margin value is 100px
bottom margin value is 150px
left margin value is 200px
2. margin: 50px 100px 150px;

top margin value is 50px
left and right margin values are 100px
bottom margin value is 150px
3. margin: 50px 100px;

top and bottom margin values are 50px
left and right margin values are 100px
4. margin 50px;
top right bottom and left margin values are 50px
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: pink;
}
p.ex {
margin: 50px 100px 150px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>
CSS-Padding
 CSS Padding property is used to define the space between the element content and the
element border.
 CSS padding is affected by the background colors. It clears an area around the content.
 Top, bottom, left and right padding can be changed independently using separate
properties. It is possible to change all properties at once by using shorthand padding
property.
Property Description
padding It is used to set all the padding properties in one declaration.
padding-left It is used to set left padding of an element.

padding-right It is used to set right padding of an element.
padding-top It is used to set top padding of an element.
padding-bottom It is used to set bottom padding of an element.
All the padding properties can have the following values:
 length - specifies a padding in px, pt, cm, etc.
 % - specifies a padding in % of the width of the containing element
 inherit - specifies that the padding should be inherited from the parent element
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: pink;
}
p.padding {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
(or)
Padding: 50px 100px 150px 200px
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
CSS-Lists
 There are various CSS properties that can be used to control lists.
 Lists can be classified as ordered lists and unordered lists. In ordered lists, marking of
the list items is with alphabet and numbers, whereas in unordered lists, the list items
are marked using bullets.
CSS list properties allow us to:

 Set the distance between the text and the marker in the list.
 Specify an image for the marker instead of using the number or bullet point.
 Control the marker appearance and shape.
 Place the marker outside or inside the box that contains the list items.
 Set the background colors to list items and lists.
The CSS properties to style the lists are given as follows:
 list-style-type: This property is responsible for controlling the appearance and shape
of the marker.
ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }
 list-style-image: It sets an image for the marker instead of the number or a bullet
point.
ul { list-style-image: url("listArrow.gif"); }
ol { list-style-image: url("listArrow2.gif"); }
 list-style-position: It specifies the position of the marker.
ul { list-style-position: inside; }
ol { list-style-position: outside; }
 list-style: It is the shorthand property of the above properties.
Example
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square; list-style-position:inside;">

<li>Maths</li>
<li>Physics</li>
</ul>
<ul>
<li style = "list-style-image: url(/https/www.scribd.com/images/bullet.gif);">Maths</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal; list-stlye-position:outside;">
<li>Maths</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha; list-style-position:inside;">
<li>Maths</li>
<li>Physics</li>
</ol>
</body>
</html>
output
Example
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Physics</li>
</ol>
</body>
</html>
Positioning using CSS
 The CSS position property is used to set position for an element. it is also used
to place an element behind another and also useful for scripted animation effect.
 Position an element using the top, bottom, left and right properties. These
properties can be used only after position property is set first.
 Position property are
CSS Static Positioning
CSS Fixed Positioning
CSS Relative Positioning
CSS Absolute Positioning
1) CSS Static Positioning
 This is a by default position for HTML elements. It always positions an element
according to the normal flow of the page. It is not affected by the top, bottom, left
and right properties.
2) CSS Fixed Positioning
 The fixed positioning property helps to put the text fixed on the browser. This
fixed test is positioned relative to the browser window, and doesn't move even you
scroll the window.
 use two values top and left along with the position property to move an HTML
element anywhere in the HTML document.
 Move Left - Use a negative value for left.
 Move Right - Use a positive value for left.
 Move Up - Use a negative value for top.
 Move Down - Use a positive value for top.
 You can use bottom or right values as well in the same way as top and left.
3) CSS Relative Positioning
 The relative positioning property is used to set the element relative to where it
normally appears.
 Use two values top and left along with the position property to move an HTML
element anywhere in the HTML document.
 Move Left - Use a negative value for left.
 Move Right - Use a positive value for left.
 Move Up - Use a negative value for top.
 Move Down - Use a positive value for top.
 You can use bottom or right values as well in the same way as top and left.
4) CSS Absolute Positioning
 The absolute positioning is used to position an element relative to the first parent
element that has a position other than static.
Example
<html>
<head>
</head>
<body>
<div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
This CSS style has fixed positioning.
</div>
<div style = "position:relative; left:100px; top:50px; background-color:yellow;">
This div has relative positioning.
</div>
<div style = "position:absolute; left:250px; top:80px; background-color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>
CSS Layers/ z-index property
 CSS allows you to control which item will appear on top with the use of layers.
 In CSS, each element is given a priority.
 If there are two overlapping CSS positioned elements, the element with the higher priority
will appear on top of the other.
 To manually define a priority, set the z-index value. The larger the value, the higher the
priority the element will have.
h4{position: relative; top: 30px;left: 50px; z-index: 2;}
p {position: relative; z-index: 1;background-color: #FFCCCC;}
 This paragraph has a z-index of 1, which is less than the header.
 If not defined the z-index, then by default the paragraph would have been on top of the
header because it appears later in our HTML code.
CSS Features
1. Consistency
 With CSS, it is easy to make changes to the pages of your website. By making one
change to your CSS stylesheet, you can consequently make it to each page of your
website.
2. Browser Compatibility
 Browser compatibility is something that is very important and with CSS, it is easy
to withhold as it addresses this issue nicely.
3. Appearance
 With CSS, it is easy to improve the look-and-feel of the website from one place as
it allows you to use a wide array of extensive and expressive styles.
4. Maintainability
 CSS offers you the ability to automatically correct and change every page
throughout your website whenever a change is made to your website’s style sheet.
5. Saves Time
 With CSS, you only need to specify details of the styling once for any element
and it will automatically apply the specified styles whenever that particular
element occurs. Hence, it saves a lot of time by not forcing you to rewrite
everything again and again.
CSS2
 CSS2 is a style sheet language that allows authors and users to attach style (e.g., fonts,
spacing, and aural cues) to structured documents (e.g., HTML documents and XML
applications).
 By separating the presentation style of documents from the content of documents, CSS2
simplifies Web authoring and site maintenance.
 CSS2 builds on CSS1 and, with very few exceptions, all valid CSS1 style sheets are valid
CSS2 style sheets.
 CSS2 supports media-specific style sheets so that authors may tailor the presentation of their
documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc.
This specification also supports content positioning, downloadable fonts, table layout, features
for internationalization, automatic counters and numbering, and some properties related to
user interface.

Unit II Style Sheets Full

Uploaded by

Copyright:

Available Formats

Unit II Style Sheets Full

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit II Style Sheets Full

Uploaded by

Copyright:

Available Formats

Unit-2

Three ways to insert a style sheet (CSS)

<h1 style="color:blue;text-align:center;">This is a heading</h1>

 The background-attachment property is used to specify if the background image is

Font Size Value Description

x-small used to display the extra small text size.

small used to display small text size.

large used to display large text size.

xx-large used to display extremely large text size.

size in pixels or % used to set value in percentage or in pixels.

2. margin: 50px 100px 150px;

3. margin: 50px 100px;

padding-left It is used to set left padding of an element.

CSS list properties allow us to:

<ul style = "list-style-type:square; list-style-position:inside;">

You might also like