Topics: Cascading Style Sheet 22 February 2021

Cascading Style Sheet 22 February 2021
CSS Basic
CSS Introduction
CSS Syntax
CSS Id & Class
Topics
CSS How to insert
CSS Styling
CSS Styling Backgrounds
Styling Text
Styling Fonts
Styling Links
Styling Lists https://www.youtube.com/watch?v=0R4_qWPLyuY
Dr. MareeswariV Styling Tables
CSS Box Model
Assistant Professsor (Sr) CSS Box Model
CSS Border
School of Information Technology and Engineering CSS Margin
CSS Padding
VIT, Vellore CSS Advanced
Cabin No:SJT 210-A30 CSS Grouping/Nesting
CSS Positioning
<span>
Dr. MAREESWARI V/ AP(Sr) / SITE
CSS CSS Parts

 Cascading Style Sheets (CSS) is a style sheet language used for  A CSS rule has two main parts: a selector, and one or more
describing the look and formatting of a document written in a markup declarations:
language.
 Development of large web sites, where fonts and color information
were added to every single page, became a long and expensive process.
 To solve this problem, the World Wide Web Consortium (W3C)  The selector is normally the HTML element you want to style.
created CSS in December 17, 1996.
 Each declaration consists of a property and a value.
 CSS is designed primarily to enable the separation of document content
 The property is the style attribute you want to change. Each property
from document presentation, including elements such as the layout,
has a value.
colors, and fonts.
 A CSS declaration always ends with a semicolon, and declaration
 CSS has 4 levels of variations ( CSS1,CSS2,CSS3 and CSS4)
groups are surrounded by curly brackets.
Dr. MAREESWARI V/ AP(Sr) / SITE Dr. MAREESWARI V/ AP(Sr) / SITE
Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 1

Comments Three Ways to Insert CSS

 Comments are ignored by browsers.  External style sheet
p  Internal style sheet
{  Inline style
text-align:center;
/*This is a comment*/
color:black;
font-family:arial;
}
External Style Sheet

 An external style sheet is ideal when the style is applied to many pages. Internal Style Sheet
With an external style sheet, you can change the look of an entire Web
 An internal style sheet should be used when a single document has a
site by changing one file. Each page must link to the style sheet using
the <link> tag. unique style.You define internal styles in the head section of an HTML
<head> page, by using the <style> tag, like this:
<link rel="stylesheet" type="text/css" href="mystyle.css" /> <head>
</head> <style type="text/css">
 An external style sheet can be written in any text editor. The file should hr {color:red;}
not contain any html tags. Your style sheet should be saved with a .css p {margin-left:20px;}
extension. body {background-image:url("images/back40.gif");}
hr{color:sienna;} </style>
p {margin-left:20px;} </head>
body {background-image:url("images/back40.gif");} Note: without specify type attribute in style tag, some styles will not be
 Note: Do not leave spaces between the property value and the units! applied. Eg:text-decoration:overline;
"margin-left:20 px"

CSS Demo
Inline Styles
 An inline style loses many of the advantages of style sheets by mixing <html> <body>
content with presentation. <head> <h1>CSS example!</h1>
<style type="text/css"> <p>This is a paragraph.</p>
 To use inline styles you use the style attribute in the relevant tag. The
body </body>
style attribute can contain any CSS property. { background-color:#d0e4fe; } </html>
<p style="color:red;margin-left:20px">This is a paragraph.</p> h1
{ color:orange;
text-align:center; }
p
{ font-family:"Times New
Roman";
font-size:20px; }
</style> </head>
The id Selector
The id selector is used to specify a style for a single, unique element. The class Selector
<html> <body>  It is used to specify a style for a <html>
group of elements. <head>
<head> <p id="para1">Hello World!</p>
 It uses the HTML class attribute, <style type="text/css">
<style type="text/css"> <p>This paragraph is not affected by the and is defined with a ".“ .redcenter
#para1 style.</p>  Eg: .center {text-align:center;} { text-align:center;
{ text-align:center; <p id="para2"> The id selector uses the  You can also specify that only color:red; }
id attribute of the HTML element, and specific HTML elements should be
color:red; } affected by a class. </style></head>
is defined with a "#".The style rule
#para2  Eg: p.center {text-align:center;} <body>
below will be applied to the element
{ text-align:right; <h1 class="redcenter">Center-
with id="para2" </p> aligned heading</h1>
color:blue; } </body> <p class="redcenter">Center-
</style> </head> </html> aligned paragraph.</p>
</body></html>

Difference
 ID's are unique  Classes are NOT unique Multiple Style Sheets
 Each element can have only one  You can use the same class on  If some properties have been set for the same selector in different style
ID multiple elements. sheets, the values will be inherited from the more specific style sheet.
 Each page can have only one  You can use multiple classes on  For example, properties for the h3 selector:
element with that ID the same element.
External style sheet Internal style sheet internal style sheet
ID is absolutely the fastest. Part of the reason is that ID is supposed to be h3 h3
unique, so the API stops searching after the ID is found in the DOM. If you also links to the
{ { external style sheet
must use a class or attribute selector, you can improve performance by color:red; text-align:right;
specifying the optional context parameter. as final:
text-align:left; font-size:20pt; color:red;
 Information that is reusable should be kept in a class and font-size:8pt; } text-align:right;
} font-size:20pt;
information that is totally unique should be kept in an ID.
 <p class="para3" id="para4"> Both an ID and a Class applied on
a single element</p>
Cascading Order CSS - Background Properties

 Browser default  CSS background properties are used to define the background effects of
 External style sheet an element.
 Internal style sheet (in the head section)  CSS properties used for background effects:
 Inline style (inside an HTML element) background-color
 So, an inline style (inside an HTML element) has the highest priority, background-image
which means that it will override a style defined inside the <head> tag,
background-repeat
or in an external style sheet, or in a browser (a default value).
background-attachment
 Note: If the link to the external style sheet is placed after the internal
style sheet in HTML <head>, the external style sheet will override the background-position
internal style sheet!

background-color background-image
 body {background-color:#b0c4de;}  By default, the image is repeated so it covers the entire element
 p {background-color:#e0ffff;} body {background-image:url(“paper.gif ”);}

 You can have a background image repeat vertically (y-axis), horizontally (x-
 div {background-color:#b0c4de;}
axis), in both directions, or in neither direction.
 h4 { background-color: white; } p { background-image: url(“smallPic.jpg”);
 ul { background-color: rgb( 149, 206, 145); } background-repeat: repeat; }
h4 { background-image: url(“../smallPic.jpg”);
background-repeat: repeat-y;}
ol { background-image: url(“../image/smallPic.jpg”);
background-repeat: repeat-x;}
ul { background-image: url(“c:/IWP/image/smallPic.jpg”);
background-repeat: no-repeat;}
Background-attachment background-position
 You may choose to have your background scroll naturally, or to have it  If you would like to define where exactly an image appears within an
in a fixed position. HTML element, you may use CSS's background-position.
 body {  Three different ways of defining position:
 length, percentages, and keywords.
background-image: url(smallPic.jpg);
 p{ background-image: url(smallPic.jpg);
background-attachment: fixed; }
background-position: 20px 10px; }
 body {
h4 { background-image: url(smallPic.jpg);
background-image: url(smallPic.jpg); background-position: 30% 30%; }
background-attachment: scroll;} ol { background-image: url(smallPic.jpg);
background-position: top center; }
 The location of the image will be (A)px from the left of the screen and
(B)px from the top of the screen.

Background - Shorthand property CSS – Text Properties

 To shorten the code, it is also possible to specify all the properties in Text Color
one single property. This is called a shorthand property.  The color property is used to set the color of the text.
body {background: url(“img_tree.png”) no-repeat right top;} body{color:blue;}
h1{color:#00ff00;}
 When using the shorthand property the order of the property values h2 {color:rgb(255,0,0);}
are: Text Alignment
 background-color  The text-align property is used to set the horizontal alignment of a text.
 background-image  Text can be centered, or aligned to the left or right, or justified.
 background-repeat  When text-align is set to "justify", each line is stretched so that every line has
 background-attachment
equal width, and the left and right margins are straight (like in magazines and
newspapers).
 background-position h1 {text-align:center;}
 It does not matter if one of the property values is missing, as long as the p.main {text-align:justify;}
ones that are present are in this order.
 Text Transformation
Text Decoration It can be used to turn everything into uppercase or lowercase letters, or
capitalize the first letter of each word.
 The text-decoration property is used to set or remove decorations from
text. p {text-transform:uppercase;}  lowercase or capitalize
h1 {text-decoration:overline;}  Text Indentation
h2 {text-decoration:line-through;} It is used to specify the indentation of the first line of a text.
h3 {text-decoration:underline;} p {text-indent:50px;}
h4 {text-decoration:blink;}  Word Spacing
a {text-decoration:none;}  remove underlines from links It is used to specify the exact value of the spacing between your words.
 Note:The "blink" value is not supported in IE, Chrome, or Safari. p { word-spacing: 10px; }
 Letter Spacing
It is used to specify the exact value of the spacing between your letters.
p { letter-spacing: 3px; }

Font Size - sets the size of the text.

p {font-size:14px;}
Font Properties p {font-size:0.875em;} /* 14px/16=0.875em */
Font Family p { font-size: 20%; }
 If the name of a font family is more than one word, it must be in  The default text size in browsers is 16px. So, the default size of 1em is 16px.
quotation marks, like font-family: "Times New Roman". Font Color
 More than one font family is specified in a comma-separated list: h4 { color: red; }
p{font-family:"Times New Roman“;} Font Weight
Font Style  If you want to control the weight of your font (its thickness), using font weight
is the best way to go about it.
 This property has three values:
 You only use font-weight in multiples of 100 (e.g. 200, 300, etc) .The values
 normal -The text is shown normally
range from 100 (thin)-900 (thick).
 italic -The text is shown in italics
p { font-weight: 100; }
 oblique -The text is "leaning" (oblique is very similar to italic, but less
ul{ font-weight: bolder; }
supported)
 Available key terms for font-weight: bold or bolder, lighter and normal.
p{font-style:normal;}
Font Variant - allows you to convert your font to all small caps.
p { font-variant: small-caps; }
Emoji
 font-variant: normal|small-caps|initial|inherit; <!DOCTYPE html><html><head>
<meta charset="UTF-8">
</head><body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p></body></html>

Link Properties
 The four links states are: Text Decoration
1. a:link - a normal, unvisited link a:link {text-decoration:none;}
2. a:visited - a link the user has visited a:visited {text-decoration:none;}
3. a:hover - a link when the user mouses over it a:hover {text-decoration:underline;}
4. a:active - a link the moment it is clicked a:active {text-decoration:underline;}
a:link {color:#FF0000;} /* unvisited link */ Background Color
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */ The background-color property specifies the background color for links:
a:active {color:#0000FF;} /* selected link */ a:link {background-color:#B2FF99;}
 When setting the style for several link states, there are some order
rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
<html> <head>
a.five:visited {color:#0000ff; <body>
<style type="text/css">
text-decoration:none;} <p>Mouse over the links to see them change layout.</p>
a.one:link {color:#ff0000;}
a.five:hover{text-decoration:underline;} <p><b><a class="one" href="default.asp" target="_blank">This link
a.one:visited {color:#0000ff;}
a.six:link,a.six:visited changes color</a></b></p>
a.one:hover {color:#ffcc00;}
{ display:block; <p><b><a class="two" href="default.asp" target="_blank">This link
a.two:link {color:#ff0000;} changes font-size</a></b></p>
font-weight:bold;
a.two:visited {color:#0000ff;}
color:#FFFFFF; <p><b><a class="three" href="default.asp" target="_blank">This link
a.two:hover {font-size:150%;} changes background-color</a></b></p>
background-color:#98bf21;
a.three:link {color:#ff0000;} <p><b><a class="four" href="default.asp" target="_blank">This link
width:120px;
a.three:visited {color:#0000ff;} changes font-family</a></b></p>
text-align:center;
a.three:hover {background:#66ff66;} <p><b><a class="five" href="default.asp" target="_blank">This link
padding:4px;
a.four:link {color:#ff0000;}
text-decoration:none;} changes text-decoration</a></b></p>
a.four:visited {color:#0000ff;}
a.six:hover,a.six:active <p><b><a class="six" href="../tutorial.html" target="_blank">This
a.four:hover {font-family:monospace;}
{ background-color:#7A991A;
link changes Box Color</a></b></p>
a.five:link { color:#ff0000;
text-decoration:underline;}
</body></html>
text-decoration:none;}
Dr. MAREESWARI V/ AP(Sr) / SITE </style> </head> Dr. MAREESWARI V/ AP(Sr) / SITE

<html> <head> ol.t {list-style-type:upper-

List Properties <style type="text/css"> roman;}
PropertyDescription ul.a {list-style-type:circle;} ol.u {list-style-type:none;}
 list-style-image  Specifies an image as the list-item marker ul.b {list-style-type:disc;} ol.v {list-style-image:
 list-style-position  Specifies if the list-item markers should appear ul.c {list-style-type:square;} url("sqpurple.gif");}
inside or outside the content flow </style> </head>
ol.f {list-style-type:decimal;}
 list-style-type  Specifies the type of list-item marker <body>
ol.g {list-style-type:decimal-
 list-style  Sets all the properties for a list in one declaration <ul class="a">
leading-zero;}
ol.n {list-style-type:lower-alpha;} <li>Circle type</li> </ul>
ol.q {list-style-type:lower- <ul class="b">
roman;} <li>Disc type</li> </ul>
ol.r {list-style-type:upper-alpha;}
<ul class="c"> <ol class="r">

<li>Square type</li></ul> <li>Upper-alpha type</li> Grouping Selectors
<ol class="f"> </ol> h1  To minimize the code, you can
<li>Decimal type</li></ol> <ol class="t"> { group selectors.
<ol class="g"> <li>Upper-roman type</li> color:green;  Separate each selector with a
<li>Decimal-leading-zero </ol> } comma.
type</li> <ol class="u"> h2
<li>None type</li> {
</ol> h1,h2,p
</ol> color:green;
<ol class="n"> } {
<ol class="v"> color:green;
<li>Lower-alpha type</li> p
<li>Image type</li> }
</ol> {
</ol>
<ol class="q"> color:green;
</body> </html>
<li>Lower-roman type</li> }
</ol>

Collapse Borders Table Width and Height

Table Properties  The border-collapse property sets  Width and height of a table is
Table Borders whether the table borders are defined by the width and height
collapsed into a single border or properties.
table, th, td
separated: table
{
border: 1px solid red; table {
} { width:100%;
 Notice that the table in the example above has double borders. This is border-collapse:collapse; }
because both the table and the th/td elements have separate borders. } th
 To display a single border for the table, use the border-collapse table, td, th {
property. { height:50px;
border:1px solid red; }
}
Table Padding
 To control the space between the border and content in a table, use the
padding property on td and th elements:
Table Text Alignment td
 The text in a table is aligned with the text-align and vertical-align properties. {
 The text-align property sets the horizontal alignment, like left, right, or padding:15px;
center }
td Table Color
{  The example below specifies the color of the borders, and the text and
text-align:right; background color of th elements:
} table, td, th
 The vertical-align property sets the vertical alignment, like top, bottom, or {
middle: border:1px solid green;
td }
{ th
height:50px; {
vertical-align:bottom; background-color:green;
} color:white;
}

<body>
<html> <head>
<table> BOX MODEL
<style type="text/css">
<tr> In CSS, the term "box model" is used when talking about design and
table layout. It is essentially a box that wraps around HTML elements.
<th>Student Name</th>
{ border-collapse:collapse;
<th>Seminar Topic</th>  Margin - Clears an area around the border. The margin does not have
width:50%; }
</tr> a background color, it is completely transparent .
th <tr>
{ height:50px;  Border - A border that goes around the padding and content. The
<td>Madhusuthanan P</td> border is affected by the background color of the box.
vertical-align:center; } <td>Internet, Intranet and
td WWW</td>  Padding - Clears an area around the content. The padding is affected
{ text-align:right; } </tr> by the background color of the box.
table,th,td <tr>  Content -The content of the box, where text and images appear.
{ <td>Roopa S</td>
border:1px solid red; <td>Internet Protocols</td>
} </tr>
</table> </body> </html>
</style> </head>
Width and Height of an Element

 When you set the width and height properties of an element with CSS, you
just set the width and height of the content area.
 The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left
border + right border + left margin + right margin
 The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding +
top border + bottom border + top margin + bottom margin
 Example: width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Browsers Compatibility Issue

 <meta name="viewport" content="width=device-width, initial-  The example above does not display properly in IE8 and earlier
scale=1"> versions.
 Using the meta viewport value width=device-width instructs the page  IE8 and earlier versions includes padding and border in the width, if a
to match the screen's width in device-independent pixels. This allows DOCTYPE is NOT declared.
the page to reflow content to match different screen sizes, whether  To fix this problem, just add a DOCTYPE to the first line of HTML
rendered on a small mobile phone or a large desktop monitor. page:
 Adding the attribute initial-scale=1 instructs browsers to establish a 1:1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
relationship between CSS pixels and device-independent pixels Transitional//EN"
regardless of device orientation, and allows the page to take advantage "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
of the full landscape width. transitional.dtd">
<html> <head> Border Properties

<style type="text/css"> It allows you to specify the style and color of an element's border.
div.ex
Border Style Border Color
{ width:220px;
padding:10px;  The border-style property  The border-color property is used
specifies what kind of border to to set the color of the border. The
border:5px solid gray;
display. color can be set by:
margin:0px;
 Dotted  You can also set the border color
background-color:pink;
 Dashed to "transparent".
}
 Solid  Note: The "border-color"
</style> </head><body>
 Double
property does not work if it is
<div class="ex">The line above is used alone. Use the "border-
250px wide.<br />  Groove
style" property to set the borders
Now the total width of this element is  Ridge first.
also 250px.</div>  Inset
</body> </html>
Dr. MAREESWARI V/ AP(Sr) / SITE  outset Dr. MAREESWARI V/ AP(Sr) / SITE

Border - Individual sides Example:

 border-style:dotted solid
 In CSS it is possible to specify
different borders for different double dashed;
sides.  top border is dotted
 right border is solid
p
 bottom border is double
{
border-top-style:dotted;  left border is dashed
border-right-style:solid;  border-style:dotted solid
border-bottom- double;
style:dotted;  top border is dotted
border-left-style:solid;  right and left borders are solid
}  bottom border is double
 The border-style property can  border-style:dotted solid;
have from one to four values.  top and bottom borders are dotted
 right and left borders are solid
 border-style:dotted;
Dr. MAREESWARI V/ AP(Sr) / SITE  all four borders are dotted
Margin - Shorthand property

Margin Example:
 The margin clears an area around an element (outside the border). The  margin:25px 50px 75px 100px;
margin does not have a background color, and is completely  top margin is 25px
transparent.  right margin is 50px
 bottom margin is 75px
 The top, right, bottom, and left margin can be changed independently  left margin is 100px
using separate properties. A shorthand margin property can also be  margin:25px 50px 75px;
used, to change all margins at once.  top margin is 25px
margin-top:100px;  right and left margins are 50px
margin-bottom:100px;  bottom margin is 75px
margin-right:50px;  margin:25px 50px;

margin-left:50px;  top and bottom margins are 25px
 right and left margins are 50px
 margin:25px;
 all four margins are 25px

Padding - Shorthand property

Padding Example:
 The padding clears an area around the content (inside the border) of an  padding:25px 50px 75px 100px;
element. The padding is affected by the background color of the  top padding is 25px
element.  right padding is 50px
 bottom padding is 75px
 The top, right, bottom, and left padding can be changed independently  left padding is 100px
using separate properties. A shorthand padding property can also be  padding:25px 50px 75px;
used, to change all paddings at once.  top padding is 25px
padding-top:25px;  right and left paddings are 50px
padding-bottom:25px;  bottom padding is 75px
padding-right:50px;  padding:25px 50px;
padding-left:50px;  top and bottom paddings are 25px
 right and left paddings are 50px
 padding:25px;
 all four paddings are 25px
<html> <head> <body>

Nesting Selectors <style type="text/css"> <p>This is a blue, center-aligned
paragraph.</p>
 It is possible to apply a style for a selector within a selector. p
<div class="marked">
p  style is specified for all p elements { color:blue;
{ <h1> Heading 1 </h1>
text-align:center; }
color:blue; <p>This p element should not
text-align:center; .marked be blue.</p>
} { background-color:red; </div>
.marked  style is specified for all elements with class="marked"
{ } <p>p elements inside a "marked"
background-color:red; .marked p classed element keeps the
} alignment style, but has a
.marked p  style is specified only for p elements within elements with { different text color.</p>
{ class="marked" color:white; </body>
color:white; }
} </html>
</style> </head>

HTML <span> Tag

 The <span> tag is used to group inline-elements in a document.
 The <span> tag provides no visual change by itself.
 The <span> tag provides a way to add a hook to a part of a text or
a part of a document.
 When the text is hooked in a <span> element you can add styles
to the content, or manipulate the content with for example
JavaScript.
<p>My mother has <span style="color:lightblue;font-weight:bold
" >light blue</span> eyes and my father has <span
style="color:darkolivegreen;font-weight:bold">dark green
</span> eyes.</p>

inherit <body>
 The inherit keyword specifies that a property should inherit its <div> Here is <span>a span element</span> which is
value from its parent element. blue, as span elements are set to be. </div>
 The inherit keyword can be used for any CSS property, and on any <div class="extra" style="color:green">
HTML element.
Here is <span>a span element</span> which is green,
<!DOCTYPE html> because it inherits from its parent.</div>
<html> <head> <style>
<div style="color:red"> Here is <span>a span
span {
element</span>
color: blue; border: 1px solid black; }
which is blue, as span elements are set to be. </div>
.extra span {
color: inherit;} </body ></html>
</style> </head>

<div style="font-family:serif; border:1px solid red;

padding:10px;"> This text will be in a serif font.
<p> This text is also in a serif font, because font is inherited by default. But
the border and padding properties are not inherited from the parent
div.</p></div><br>
<div style="font-family:serif; border:1px solid red;
padding:10px;"> This text will be in a serif font.
<p style="border:inherit;"> Now the paragraph also has a red border.
Border properties are not inherited by children, by default, but because I set
border to “inherit”, it is.
</p></div>
Positioning
 The CSS positioning properties allow you to position an element. It can
also place an element behind another, and specify what should happen
when an element's content is too big.
 Elements can be positioned using the top, bottom, left, and right
properties. However, these properties will not work unless the position
property is set first. They also work differently depending on the
positioning method.
 There are four different positioning methods.
1. Static
2. Fixed
3. Relative
4. Absolute

Fixed Positioning
Static Positioning  An element with fixed position is positioned relative to the browser
 HTML elements are positioned static by default. A static positioned window.
element is always positioned according to the normal flow of the page.  It will not move even if the window is scrolled:
 Static positioned elements are not affected by the top, bottom, left, and p.pos_fixed {
right properties. position:fixed;
top:30px;
right:5px;}
 Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is
specified.
 Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
 Fixed positioned elements can overlap other elements.
Relative Positioning
 A relative positioned element is positioned relative to its normal
position.
h2.pos_left {
position:relative;
left:-20px; }
 The content of relatively positioned elements can be moved and
overlap other elements, but the reserved space for the element is
still preserved in the normal flow.
h2.pos_top{
position:relative;
top:-50px;}
 Relatively positioned elements are often used as container blocks
for absolutely positioned elements.

Absolute Positioning Overlapping Elements

 An absolute position element is positioned relative to the first  When elements are positioned outside the normal flow, they can
parent element that has a position other than static. If no such overlap other elements.
element is found, the containing block is <html>:  The z-index property specifies the stack order of an element
h2 { (which element should be placed in front of, or behind, the
position:absolute; others).
left:100px;  An element can have a positive or negative stack order:
top:150px;} img {position:absolute;z-index:-1}
 Absolutely positioned elements are removed from the normal
 An element with greater stack order is always in front of an
flow. The document and other elements behave like the absolutely element with a lower stack order.
positioned element does not exist.
 Note: If two positioned elements overlap, without a z-index
 Absolutely positioned elements can overlap other elements.
specified, the element positioned last in the HTML code will be
shown on top.
<html> <head><style type = "text/css">

.bgimg { position: absolute;top: 0px; left: 0px; z-index: 1 } Revision
.fgimg { position: absolute;top: 25px; left: 100px; z-index: 2 }  To display the heading and these below 3 divisions with overlapping.
.text { position: absolute;top: 20px; left: 90px; z-index: 3;} Use CSS positioning (Z-index) concept.
</style> </head> <body>
<img src = "bgimg.gif" class = "bgimg“>  Heading1 text: "Find the bomb"
 Div1 Text: "There is a bomb." ➞ "Duck!!!"
<img src = "fgimg.gif" class = "fgimg“>
 Div2 Text: "Hey, did you think there is a bomb?" ➞ "Duck!!!"
<h1 class = "text">Positioned Text</h1>
 Div3 Text: "This goes boom!!!"➞ "There is no bomb, relax."
</body> </html>

use the CSS position property to create a

webpage
 Create a blank web page with just html, head, body, and a style tag.
 Change the background of the page to be a sky blue and have a background image of clouds.
 Create a div for the grass - position it at the bottom and give it an appropriate height.
 Create a div for the "Farm Party!" banner - position it near the top center area, and style the
text so that it's red. For a bonus, use a fun custom font (like from Google Web Fonts) and
give it the appearance of a black stroke.
 For each of the images shown, search for an appropriate image on Google Image search - it
doesn't have to be the exact same. Try searches like "sheep animated gif" and if you need to,
restrict the results to just "clip art". When you find the image, create a img for it on the
page.
 Position each of the img elements appropriately. The sheep should be around the bottom left,
the cow should be on the horizon, the dude should be dancing in the middle, the tree should
be on the front right, and the sun should be around the upper right.
 As a bonus, position a picture of your face on top of the dude, and watch yourself have a farm
party!

Topics: Cascading Style Sheet 22 February 2021

Uploaded by

Document Information

Original Description:

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

Topics: Cascading Style Sheet 22 February 2021

Uploaded by

Copyright:

Available Formats

Cascading Style Sheet 22 February 2021

Dr. MAREESWARI V/ AP(Sr) / SITE

CSS CSS Parts

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 1

Comments Three Ways to Insert CSS

Dr. MAREESWARI V/ AP(Sr) / SITE Dr. MAREESWARI V/ AP(Sr) / SITE

External Style Sheet

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 2

Dr. MAREESWARI V/ AP(Sr) / SITE Dr. MAREESWARI V/ AP(Sr) / SITE

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 3

Cascading Order CSS - Background Properties

Dr. MAREESWARI V/ AP(Sr) / SITE Dr. MAREESWARI V/ AP(Sr) / SITE

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 4

 p {background-color:#e0ffff;} body {background-image:url(“paper.gif ”);}

Dr. MAREESWARI V/ AP(Sr) / SITE Dr. MAREESWARI V/ AP(Sr) / SITE

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 5

Background - Shorthand property CSS – Text Properties

Dr. MAREESWARI V/ AP(Sr) / SITE Dr. MAREESWARI V/ AP(Sr) / SITE

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 6

Font Size - sets the size of the text.

Dr. MAREESWARI V/ AP(Sr) / SITE Dr. MAREESWARI V/ AP(Sr) / SITE

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 7

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 8

<html> <head> ol.t {list-style-type:upper-

Dr. MAREESWARI V/ AP(Sr) / SITE Dr. MAREESWARI V/ AP(Sr) / SITE

<ul class="c"> <ol class="r">

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 9

Collapse Borders Table Width and Height

Dr. MAREESWARI V/ AP(Sr) / SITE Dr. MAREESWARI V/ AP(Sr) / SITE

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 10

Width and Height of an Element

Dr. MAREESWARI V/ AP(Sr) / SITE Dr. MAREESWARI V/ AP(Sr) / SITE

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 11

Browsers Compatibility Issue

Dr. MAREESWARI V/ AP(Sr) / SITE Dr. MAREESWARI V/ AP(Sr) / SITE

<html> <head> Border Properties

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 12

Border - Individual sides Example:

Margin - Shorthand property

margin-right:50px;  margin:25px 50px;

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 13

Padding - Shorthand property

<html> <head> <body>

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 14

HTML <span> Tag

Dr. MAREESWARI V/ AP(Sr) / SITE

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 15

<div style="font-family:serif; border:1px solid red;

Dr. MAREESWARI V/ AP(Sr) / SITE Dr. MAREESWARI V/ AP(Sr) / SITE

Dr. MAREESWARI V/ AP(Sr) / SITE Dr. MAREESWARI V/ AP(Sr) / SITE

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 16

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 17

Absolute Positioning Overlapping Elements

<html> <head><style type = "text/css">

Dr. MAREESWARI V/ AP(Sr) / SITE Dr. MAREESWARI V/ AP(Sr) / SITE

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 18

use the CSS position property to create a

Dr. MAREESWARI V/ AP(Sr) / SITE

Dr. Mareeswari V/ AP(Sr) / SITE / VIT University 19

You might also like