Scribd
Upload
66 views4 pages

Practica 2

The document discusses different techniques for styling HTML documents including inline styles, embedded style sheets, external style sheets, and inheritance in style sheets. It provides examples of each technique using code snippets and short descriptions. Absolute positioning of elements is also demonstrated with an example using the position, top, left, and z-index properties in CSS.

Uploaded by

Hubner Janampa Patilla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
66 views4 pages

Practica 2

The document discusses different techniques for styling HTML documents including inline styles, embedded style sheets, external style sheets, and inheritance in style sheets. It provides examples of each technique using code snippets and short descriptions. Absolute positioning of elements is also demonstrated with an example using the position, top, left, and z-index properties in CSS.

Uploaded by

Hubner Janampa Patilla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

DESARROLLO WEB HOJAS DE ESTILO

PRACTICA 2
<!DOCTYPE html>
<!-- Fig. 4.1: inline.html -->
<!-- Using inline styles -->
<html>
<head>
<meta charset = "utf-8">
<title>Inline Styles</title>
</head>
<body>
<p>This text does not have any style applied to it.</p>
<!-- The style attribute allows you to declare -->
<!-- inline styles. You should separate multiple -->
<!-- style properties with a semicolon. -->
<p style = "font-size: 20pt;">This text has the
<em>font-size</em> style applied to it, making it 20pt.
</p>
<p style = "font-size: 20pt; color: deepskyblue;">
This text has the <em>font-size</em> and
<em>color</em> styles applied to it, making it
20pt and deep sky blue.</p>
</body>
</html>
<!DOCTYPE html>
<!-- Fig. 4.3: embedded.html -->
<!-- Embedded style sheets. -->
<html>
<head>
<meta charset = "utf-8">
<title>Embedded Style Sheet</title>
<!-- this begins the style sheet section -->
<style type = "text/css">
em
{ font-weight: bold;
color: black; }
h1
{ font-family: tahoma, helvetica, sans-serif; }
p
{ font-size: 12pt;
font-family: arial, sans-serif; }
.special { color: purple; }
</style>
</head>
<body>
<!-- this attribute applies the .special style class -->
<h1 class = "special">Deitel & Associates, Inc.</h1>
1

<p>Deitel & Associates, Inc. is an authoring and


corporate training organization specializing in
programming languages, Internet and web technology,
iPhone and Android app development, and object
technology education.</p>
<h1>Clients</h1>
<p class = "special"> The company's clients include many
<em>Fortune 1000 companies</em>, government agencies,
branches of the military and business organizations.</p>
</body>
</html>
<!DOCTYPE html>
<!-- Fig 4.6: advanced.html -->
<!-- Inheritance in style sheets. -->
<html>
<head>
<meta charset = "utf-8">
<title>More Styles</title>
<style type = "text/css">
body
{ font-family: arial, helvetica, sans-serif; }
a.nodec { text-decoration: none; }
a:hover { text-decoration: underline; }
li em { font-weight: bold; }
h1, em { text-decoration: underline; }
ul
{ margin-left: 20px; }
ul ul { font-size: .8em; }
</style>
</head>
<body>
<h1>Shopping list for Monday:</h1>
<ul>
<li>Milk</li>
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Carrots</li>
<li>Yogurt</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<p><em>Go to the</em>
<a class = "nodec" href = "http://www.deitel.com">
2

Grocery store</a>
</p>
</body>
</html>
<!DOCTYPE html>
<!-- Fig. 4.8: external.html -->
<!-- Linking an external style sheet. -->
<html>
<head>
<meta charset="utf-8">
<title>Linking External Style Sheets</title>
<link rel = "stylesheet" type = "text/css"
href = "styles.css">
</head>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<ul>
<li>Milk</li>
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Carrots</li>
<li>Yogurt</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<p><em>Go to the</em>
<a class = "nodec" href = "http://www.deitel.com">
Grocery store</a>
</p>
</body>
</html>
/* Fig. 4.7: styles.css */
/* External style sheet */
body
{ font-family: arial, helvetica, sans-serif; }
a.nodec { text-decoration: none; }
a:hover { text-decoration: underline; }
li em { font-weight: bold; }
h1, em { text-decoration: underline; }
ul
{ margin-left: 20px; }
ul ul { font-size: .8em; }
<!DOCTYPE html>
3

<!-- Fig 4.9: positioning.html -->


<!-- Absolute positioning of elements. -->
<html>
<head>
<meta charset = "utf-8">
<title>Absolute Positioning</title>
<style type = "text/css">
.background_image { position: absolute;
top: 0px;
left: 0px;
z-index: 1; }
.foreground_image { position: absolute;
top: 25px;
left: 100px;
z-index: 2; }
.text { position: absolute;
top: 25px;
left: 100px;
z-index: 3;
font-size: 20pt;
font-family: tahoma, geneva, sans-serif; }
</style>
</head>
<body>
<p><img src = "background_image.png" class = "background_image"
alt = "First positioned image" /></p>
<p><img src = "foreground_image.png" class = "foreground_image"
alt = "Second positioned image" /></p>
<p class = "text">Positioned Text</p>
</body>
</html>

You might also like