Scribd
Upload
26 views66 pages

Cascading Style Sheets (CSS) Is A Style Sheet Language Used

The document discusses Cascading Style Sheets (CSS), which is a style sheet language used to describe the presentation of structured documents (such as HTML pages). CSS is designed to enable separation of document content from document presentation and formatting. It has several ways to insert styles including external style sheets, internal style sheets and inline styles. The document also covers various CSS properties for styling text, backgrounds and other elements.

Uploaded by

Saji Joseph
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
26 views66 pages

Cascading Style Sheets (CSS) Is A Style Sheet Language Used

The document discusses Cascading Style Sheets (CSS), which is a style sheet language used to describe the presentation of structured documents (such as HTML pages). CSS is designed to enable separation of document content from document presentation and formatting. It has several ways to insert styles including external style sheets, internal style sheets and inline styles. The document also covers various CSS properties for styling text, backgrounds and other elements.

Uploaded by

Saji Joseph
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/ 66

CS

S is a style sheet language used


Cascading Style Sheets (CSS)
for describing the look and formatting of a document written in
a markup 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)
created CSS in December 17, 1996.
CSS is designed primarily to enable the separation of document
content from document presentation, including elements such as
the layout, colors, and fonts.
CSS has 4 levels of variations ( CSS1,CSS2,CSS3 and CSS4)
CSS Parts
A CSS rule has two main parts: a selector, and one or
more declarations:

The selector is normally the HTML element you want to style.


Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each
property has a value.
A CSS declarationalwaysends with a semicolon,and
declaration groups are surrounded by curly brackets.
Comments
Comments are ignored by
browsers. p
{
text-align:center;
/*This is a
comment*/
color:black;
font-family:arial;
}
Three Ways to Insert CSS
External style
sheet
Internal style
sheet
Inline style
External Style Sheet
An external style sheet is ideal when the style is applied to many
pages. With an external style sheet, you can change the look of
an entire Web site by changing one file. Each page must link to
the style sheet using the <link> tag.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
An external style sheet can be written in any text editor. The file
should not contain any html tags. Your style sheet should be
saved with a .css extension.
hr{color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Note: Do not leave spaces between the property value and the
units! "margin-left:20 px"
Internal Style Sheet
An internal style sheet should be used when a single document
has a unique style.You define internal styles in the head section
of an HTML page, by using the <style> tag, like this:
<head>
<style
type="text/css"
> hr
{color:red;}
p {margin-left:20px;}
body {background-
image:url("ima
ges/back40.gif"
);}
</style>
</head>
Inline Styles
An inline style loses many of the advantages of style sheets
by mixing content with presentation.
To use inline styles you use the style attribute in the relevant
tag. The style attribute can contain any CSS property.
<p style="color:red;margin-left:20px">This is a
paragraph.</p>
CSS Demo
<html> <body>
<head> <h1>CSS example!</h1>
<style type="text/css"> <p>This is a paragraph.</p>
body </body>
{ background-color:#d0e4fe; } </html>
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.
<html> <body>
<head> <p id="para1">Hello World!</p>
<style <p>This paragraph is not affected by
type="text/css"> the style.</p>
#para1
{ text- <p id="para2"> The id selector uses
align:center; the id attribute of the HTML
element, and is defined with a
color:red; }
#para2
"#".The style rule below will be
{ text- applied to the element with
align:right; id="para2" </p>
color:blue; </body>
} </html>
</style>
</head>
The class Selector
 It is used to specifya style <html>
for a group of elements. <head>
 It uses the HTML class
<style type="text/css">
attribute, and is defined with a .redcenter
".“
 Eg: .center {text-align:center;} { text-
 You can also specify that only align:center;
specific HTML elements should color:red; }
be affected by a class. </style></head>
 Eg: p.center {text-align:center;} <body>
<h1
class="redcenter">Center-
aligned heading</h1>
<p
class="redcenter">Center-
aligned paragraph.</p>
Difference
ID's are Classes are NOT
unique
Each element can have only unique
You can use the same
one ID class on multiple
Each page can have only elements.
one element with that ID You can use multiple
classes on the same
element.
 Information that is reusable should be kept in a class
and 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>
Multiple Style Sheets
If some properties have been set for the same selector in
different style sheets, the values will be inherited from the
more specific style sheet.
For example, properties for the h3 selector:

External style Internal style sheet internal style


h3
sheet h3 sheet also links
{ { to the external
color:red; text- style sheet as
text- align:right; final:
align:left; font-size:20pt; color:red;
font- } text-
size:8pt; align:right;
} font-size:20pt;
Cascading Order
Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest
priority, which means that it will override a style defined inside
the <head> tag, or in an external style sheet, or in a browser (a
default value).
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 internal style sheet!
CSS - Background Properties
CSS background properties are used to define the background
effects of an element.
CSS properties used for background effects:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
background-color
body {background-color:#b0c4de;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
h4 { background-color: white; }
ul { background-color: rgb( 149, 206,
145); }
background-image
 By default, the image is repeated so it covers the entire
element body {background-image:url(“paper.gif ”);}
 You can have a background image repeat vertically (y-axis),
horizontally (x- axis), in both directions, or in neither direction.
p { background-image:
url(“smallPic.jpg”); 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-
Background-attachment
You may choose to have your background scroll naturally, or to
have it in a fixed position.
body {
background-image:
url(smallPic.jpg); background-
attachment: fixed; }
body {
background-image:
url(smallPic.jpg); background-
attachment: scroll;}
background-position
If you would like to define where exactly an image appears
within an HTML element, you may use CSS's background-
position.
Three different ways of defining position:
length, percentages, and keywords.
p { background-image:
url(smallPic.jpg); background-
position: 20px 10px; }
h4 { background-image:
url(smallPic.jpg);
background-position: 30%
30%; } ol { background-image:
url(smallPic.jpg);
background-position: top
Background - Shorthand property
To shorten the code, it is also possible to specify all the
properties in one single property. This is called a shorthand
property.
body {background: url(“img_tree.png”) no-repeat right top;}
When using the shorthand property the order of the property
values are:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as
long as the ones that are present are in this order.
CSS – Text Properties
Text Color
 The color property is used to set the color of the
text. body{color:blue;}
h1{color:#00ff00;}
h2 {color:rgb(255,0,0);}
Text Alignment
 The text-align property is used to set the
horizontal alignment of a text.
 Text can be centered, or aligned to the left or
right, or justified.
 When text-align is set to "justify", each line is stretched so that every
line has equal width, and the left and right margins are straight (like
in magazines and newspapers).
h1 {text-align:center;}
p.main {text-
align:justify;}
Text Decoration
The text-decoration property is used to set or remove
decorations from text.
h1 {text-decoration:overline;}
h2 {text-decoration:line-
through;} h3 {text-
decoration:underline;} h4
{text-decoration:blink;}
a {text-decoration:none;} 
remove underlines from links
Note: The "blink" value is not
supported in IE, Chrome, or
Safari.
Text Transformation
It can be used to turn everything into uppercase or lowercase
letters, or capitalize the first letter of each word.
p {text-transform:uppercase;}  lowercase or capitalize
Text Indentation
It is used to specify the indentation of the first line of
a text. p {text-indent:50px;}
Word Spacing
It is used to specify the exact value of the spacing between your
words. 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 Properties
Font Family
If the name of a font family is more than one word, it
must be in quotation marks, like font-family: "Times
New Roman".
More than one font family is specified in a comma-
separated list: p{font-family:"Times New Roman“;}
Font Style
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic,
but less supported)
p{font-style:normal;}
Font Size - sets the size of the
text. p {font-size:14px;}
p {font-
size:0.875em;} /*
 The default text size in browsers
14px/16=0.875em */ p { is 16px. So, the default size of 1em is
16px.font-size: 20%; }
Font Color
h4 { color: red; }
Font Weight
 If you want to control the weight of your font (its thickness), using
font weight is the best way to go about it.
 You only use font-weight in multiples of 100 (e.g. 200, 300, etc)
.The values range from 100 (thin)-900 (thick).
p { font-weight: 100; }
ul{ font-weight:
bolder; }
 Available key terms for font-
26
weight: bold or bolder,
lighter and normal.
Link Properties
The four links states are:
1. a:link - a normal, unvisited link
2. a:visited - a link the user has visited
3. a:hover - a link when the user mouses over it
4. a:active - a link the moment it is clicked
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 */
When setting the style for several link states, there are some
order rules:
a:hover MUST come after a:link and
2 5 a:visited a:active MUST come after
a:hover
Text Decoration
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-
decoration:underline;} a:active
{text-decoration:underline;}
Background Color
The background-color property specifies the background color
for links: a:link {background-color:#B2FF99;}

26
<html> <head>
a.five:visited
<style type="text/css">
{color:#0000ff; text-
a.one:link {color:#ff0000;}
decoration:none;}
a.one:visited
a.five:hover{text-
{color:#0000ff;} a.one:hover
decoration:underline;}
{color:#ffcc00;} a.two:link
a.six:link,a.six:visited
{color:#ff0000;}
{ display:block;
a.two:visited
font-
{color:#0000ff;} a.two:hover
weight:bold;
{font-size:150%;}
color:#FFFFFF;
a.three:link {color:#ff0000;}
background-
a.three:visited
color:#98bf21;
{color:#0000ff;}
width:120px;
a.three:hover
text-
{background:#66ff66;} a.four:link
align:center;
{color:#ff0000;} a.four:visited
</style> </head>
padding:4px;
{color:#0000ff;} a.four:hover
text-
<body>
<p>Mouse over the links to see them change layout.</p>
<p><b><a class="one" href="default.asp" target="_blank">This
link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This
link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This
link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This
link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This
link changes text-decoration</a></b></p>
<p><b><a class="six" href="../tutorial.html"
target="_blank">This link changes Box Color</a></b></p>
</body></html>
List Properties
PropertyDescription
list-style-image  Specifies an image as the list-item marker
list-style-position  Specifies if the list-item markers should
appear inside or outside the content flow
list-style-type  Specifies the type of list-item marker
list-style  Sets all the properties for a list in one declaration
ol.t {list-style-
type:upper- roman;}
ol.u {list-style-
type:none;} ol.v {list-
style-image:
url("sqpurple.gif");}
</style> </head>
<body>
<ul class="a">
<li>Circle type</li>
</ul>
<ul class="b">
<li>Disc type</li> </ul>
<ul class="c"> <ol class="r">
<li>Square type</li></ul> <li>Upper-alpha type</li>
<ol class="f"> </ol>
<li>Decimal type</li></ol> <ol class="t">
<ol class="g"> <li>Upper-roman
type</li>
<li>Decimal-leading-
zero type</li> </ol>
<ol class="u">
</ol>
<li>None type</li>
<ol class="n">
</ol>
<li>Lower-alpha <ol class="v">
type</li>
<li>Image type</li>
</ol>
</ol>
<ol class="q">
</body> </html>
<li>Lower-roman
type</li>
Table Properties
Table
Borders
table, th, td
{
border: 1px

solid

red;
}
Notice that the table in the example above has double borders.
This is because both the table and the th/td elements have
separate borders.
To display a single border for the table, use the border-
Collapse Table Width and Height
Borders
The border-collapse property Width and height of a table
sets whether the table borders is defined by the width and
are collapsed into a single height properties.
border or separated: table
table {
{ width:100%;
border-collapse:collapse; }
} th
table, td, th {
{ height:50px;
border:1px solid red; }
}
Table Text Alignment
 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 center
td
{
text-align:right;
}
 The vertical-align property sets the vertical alignment, like top,
bottom, or middle:
td
{
height:50px;
vertical-align:bottom;
}
Table Padding
 To control the space between the border and content in a table,
use the padding property on td and th elements:
td
{
padding:15px;
}
Table Color
 The example below specifies the color of the borders, and the
text and background color of th elements:
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
<html> <head> <body>
<style <table>
type="text/css"> table <tr>
<th>Student Name</th>
{ border-
<th>Seminar Topic</th>
collapse:collapse;
</tr>
t width:50%; } <tr>
h height:50px; <td>Madhusuthanan P</td>
{ vertical-align:center; <td>Internet, Intranet
td } and WWW</td>
{ text- } </tr>
align:right; <tr>
table,th,td <td>Roopa S</td>
{ <td>Internet
border:1px Protocols</td>
</tr>
solid red;
</table> </body> </html>
}
</style> </head>
BOX
layout. It is essentially MODEL
In CSS, the term "box model" is used when talking about design and
a box that wraps around HTML elements.
Margin - Clears an area around the border. The margin does not
have a background color, it is completely transparent .
Border - A border that goes around the paddingand content.
The border is affected by the background color of the box.
Padding - Clears an area around the content. The padding is
affected by the background color of the box.
Content - The content of the box, where text and images appear.

39 T
E
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
 Exampl width:250px;
e: padding:10px;
border:5px solid
gray; margin:10px;

38
Browsers Compatibility Issue
The example above does not display properly in IE8 and
earlier versions.
IE8 and earlier versions includes padding and border in
the width, if a
DOCTYPE is NOT declared.
To fix this problem, just add a DOCTYPE to the first line of
HTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtm
l1/DTD/xhtml1- transitional.dtd">

39
<html> <head>
<style
type="text/css">
{div.ex width:220px;
padding:10px;
border:5px solid
gray; margin:0px;
background-
} color:pink;
</style> </head><body>
<div class="ex">The line
above is 250px wide.<br />
Now the total width of this
element is also 250px.</div>
</body> </html>
40
Border Properties
It allows you to specify the style and color of an element's
border.
Border Style Border Color
The border-style property The border-color property is
specifies what kind of used to set the color of the
border to display. border. The color can be set
 Dotted by:
 Dashed You can also set the border

 Solid color to "transparent".


 Double Note: The
property "border-color"
does not work if it is
used alone. Use the "border-
 Groove
style" property to set the
 Ridge borders first.
 Inset
4
outse
 t
44
Border - Individual sides Example
In CSS it is possible to : border-style:dotted solid

specify different borders double dashed;
top border is dotted
for different sides.
right border is solid
p
bottom border is double
{
left border is dashed
border-top-style:dotted;
border-right-  border-style:dotted solid
style:solid; border- double;
bottom- style:dotted; top border is dotted
border-left-style:solid; right and left borders are
} solid
The border-style property bottom border is double
can have from one to four  border-style:dotted
values. solid;
top and bottom borders
45 are dotted
right and left borders are
M argin
The margin clears an area around an element (outside the
border). The margin does not have a background color, and is
completely transparent.
The top, right, bottom, and left margin can be changed
independently using separate properties. A shorthand margin
property can also be used, to change all margins at once.
margin-top:100px;
margin-
bottom:100px;
margin-right:50px;
margin-left:50px;
Margin - Shorthand property
Example:
 margin:25px 50px 75px
100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
 margin:25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
 margin:25px 50px;
top and bottom margins are
25px
right and left margins are 50px
 margin:25px;
all four margins are 25px
Padding
The padding clears an area around the content (inside the
border) of an element. The padding is affected by the
background color of the element.
The top, right, bottom, and left padding can be changed
independently using separate properties. A shorthand padding
property can also be used, to change all paddings at once.
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
Padding - Shorthand property
Example:
 padding:25px 50px 75px
100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
 padding:25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px
 padding:25px 50px;
top and bottom paddings are
25px
right and left paddings are 50px
 padding:25px;
all four paddings are 25px
Grouping Selectors
h1 To minimize the code, you
{ can group selectors.
color:green Separate each selector
; with a comma.
}
h2
h1,h2,p
{
{
color:green
color:green;
;
}
}
p
{
color:green
;
}
Nesting Selectors
 It is possible to apply a style for a selector within a selector.
p  style is specified for all p elements
{
color:blue;
text-align:center;
}
.marked  style is specified for all elements with
class="marked"
{
background-color:red;
}
{
.marked p  style class="marke
is specified only for p elements within
color:white;
elements with d"
}
<html> <head> <body>
<style <p>This is a blue, center-
aligned paragraph.</p>
type="text/css"> p
<div class="marked">
{ color:blue;
<h1> Heading 1 </h1>
text-align:center; }
<p>This p element should not
. be blue.</p>
marked
{ background- </div>
color:red; <p>p elements inside a
}.marked p "marked" classed element
keeps the alignment style,
{ but has a different text
color:white; color.</p>
} </body>
</style> </head> </html>
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
Static Positioning
HTML elementsare positioned static by
default. A static positioned element is always
positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom,
left, and right properties.
Fixed Positioning
An element with fixed position is positioned relative to the
browser window.
It will not move even if the window is scrolled:
p.pos_fixed
{ position:fixe
d; 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:relati
ve; 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{ pos
ition:relative;
top:-50px;}
Relatively positioned elements are often used as container
blocks for absolutely positioned elements.
Absolute Positioning
An absolute position element is positioned relative to the
first parent element that has a position other than static. If
no such element is found, the containing block is <html>:
h2
{ position:abso
lute;
left:100px;
top:150px;}
Absolutely positioned elements are removed from the
normal flow. The document and other elements behave like
the absolutely positioned element does not exist.
Absolutely positioned elements can overlap other elements.
Overlapping Elements
When elements are positioned outside the normal flow, they
can overlap other elements.
The z-index property specifies the stack order of an
element (which element should be placed in front of, or
behind, the others).
An element can have a positive or negative stack
order: img {position:absolute;z-index:-1}
An element with greater stack order is always in front of an
element with a lower stack order.
Note: If two positioned elements overlap, without a z-index
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}
.fgimg { position: absolute;top: 25px; left: 100px; z-
index: 2 }
.text { position: absolute;top: 20px; left: 90px; z-index:
3;}
</style> </head> <body>
<img src = "bgimg.gif" class = "bgimg“>
<img src = "fgimg.gif" class = "fgimg“>
<h1 class = "text">Positioned Text</h1>
</body> </html>

8 August
2019
HTML <span>
The <span> Tag
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
The inherit keywordspecifies that a
property should inherit its value from its parent
element.
The inherit keyword can be used for any CSS property, and
on any HTML element.
<!DOCTYPE html>
<html> <head> <style>
span {
color: blue; border:
1px solid black; }
.extra span
{ color:
inherit;}
<body>
<div> Here is <span>a span element</span>
which is blue, as span elements are set to be.
</div>
<div class="extra" style="color:green">
Here is <span>a span element</span> which is
green, because it inherits from its parent.</div>
<div style="color:red"> Here is <span>a
span element</span>
which is blue, as span elements are set to
be. </div>
</body ></html>
65 V.MAREESWARI / AP(Sr) /
SITE
<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
<div style="font-family:serif; fromsolid
border:1px the
parent div.</p></div><br>
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>

66
67 V.MAREESWARI / AP(Sr) /
SITE
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!

68

You might also like