College of the management, economics and information technology

Department of Information systems

Fall Semester, Academic Year 2015/2016

INTERNET TECHNOLOGY LAB

Lab06: Conflicting Styles, Linking External Style Sheets and Positioning Elements

Table of Tags

The commands that we will use our codes:

Tags / Description / the output
a.nodec { text-decoration: none } / Determine what to do if there is no mouse over the hyperlink
a:hover { text-decoration: underline } / Determine what to do if there is a mouse over the hyperlink
li em { font-weight: bold } / Any em inside li will have a bold font weight
h1, em { text-decoration: underline } / Set the default text-decoration for the em and h1
ulul { font-size: .8em } / Change the font size for any ul inside ul
font-size: 1.5em
or
font-size: 150% / To set an element to display text at 150 percent of its default text size, the author coulduse the syntax
<link rel = "stylesheet" type = "text/css" href = "styles.css" /> / linkelement that uses the relattribute to specifya relationship between the current document and another document. In this case, wedeclare the linked document to be a stylesheetfor this document. The type attributespecifies the MIME type of the related document as text/css. The href attribute providesthe URL for the document containing the style sheet. In this case, styles.css is in the same directory as the webpages.
.bgimg { position: absolute;top: 0px;left: 0px;
z-index: 1 } / To chage the order of rendering the image.
we position the element to be 0 pixels away fromboth the top and left margins of its containing element and z-index to allow overlapping elements properly

Section01: Using internal linking (40 minutes)

Introduction

Styles may be defined by a user, an author or a user agent (e.g., a web browser). A user isa person viewing your web page, you are the author—the person who writes the document—and the user agent is the program used to render and display the document. Styles“cascade,” or flow together, such that the ultimate appearance of elements on a page resultsfrom combining styles defined in several ways. Styles defined by the user take precedenceover styles defined by the user agent, and styles defined by authors take precedence overstyles defined by the user.

Most styles defined for parent elements are also inherited by child (nested) elements.While it makes sense to inherit most styles, such as font properties, there are certain propertiesthat we don’t want to be inherited. Consider for example the background-imageproperty, which allows the programmer to set an image as the background of an element.If the body element is assigned a background image, we don’t want the same image to bein the background of every element in the body of our page. Instead, the backgroundimageproperty of all child elements retains its default value of none. In this section, we

discuss the rules for resolving conflicts between styles defined for elements and stylesinherited from parent and ancestor elements.

Step 1: OpenYourname_NFS230 folder

  1. Inside the folder create “Lab06” folder
  2. Inside the folder create a new notepad file with the name “Lab06_S1.html”
  3. Write your code in the notepad (by following the below steps) and save the file.
  4. Click on the file name you will get your first webpage

Step 2: Write the code as shown below

<html xmlns = "

head>

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 }

liem { font-weight: bold }

h1, em { text-decoration: underline }

ul { margin-left: 20px }

ulul { 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>Rice</li>

<li>Potatoes</li>

<li>Pizza <em>with mushrooms</em</li>

</ul

<p<em>Go to the</em <a class = "nodec" href = "

Grocery store</a>

</p>

</body>

</html>

The result will be as follow:

Section 02: Linking External Style Sheets(10 minutes)

Introduction

Style sheets are a convenient way to create a document with a uniform theme. With externalstyle sheets (i.e., separate documents that contain only CSS rules), you can provide auniform look and feel to an entire website. Different pages on a site can all use the samestyle sheet.When changes to the styles are required, the author needs to modify only a singleCSS file to make style changes across the entire website. Note that while embeddedstyle sheets separate content from presentation, both are still contained in a single file, preventinga web designer and a content author from working in parallel. External style sheetssolve this problem by separating the content and style into separate files..

Step 1: Open aYourname_NFS230 folder

  1. Go to your desktop. Open an Yourname_INFS230 folder
  2. Go to folder “Lab06” folder
  3. Inside the Lab06 create a notepad file write the style sheet in the notepad and save as Styles.css.
  4. In the same folder and Inside the Lab06 folder create a new notepad file with the name “Lab06_S2.html”
  5. Write your code in the notepad (by following the below steps) and save the file and exit from the file.
  6. Click on the file name you will get your webpage.

Step 2: Write the code as shown below \

Inside Styles.css file write

/* styles.css */

/* External stylesheet */

body { font-family: arial, helvetica, sans-serif }

a.nodec { text-decoration: none }

a:hover { text-decoration: underline }

liem { font-weight: bold }

h1, em { text-decoration: underline }

ul { margin-left: 20px }

ulul { font-size: .8em; }

Inside the Lab06_S2 write

<html xmlns = "

<head> <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>Rice</li>

<li>Potatoes</li>

<li>Pizza <em>with mushrooms</em</li>

</ul

<p<em>Go to the</em> <a class = "nodec" href = " Grocery store</a>

</p>

</body>

</html>

The result will be as follow:

Section 03:Positioning Elements (30 minutes)

Introduction

Before CSS, controlling the positioning of elements in an XHTML document was difficult—the browser determined positioning. CSS introduced the position property and acapability called absolute positioning, which gives authors greater control over how documentelements are displayed.

To set the position of the image you have many ways such asfixed, absolute and relative positioning,. We use absolute to control over the elements in the webpage.

Step 1: Open a Yourname_INFS230 folder

  1. Go to your desktop. Open an Yourname_INFS230 folder
  2. Go to folder “Lab06” folder
  3. Inside the Lab06 folder create a new notepad file with the name “Lab06_S3.html”
  4. Add two images to the folder with the following names : bgimg.gif and fgimg.gif
  5. Write your code in the notepad (by following the below steps) and save the file and exit from the file.
  6. Click on the file name you will get your webpage.

Step 2: Write the code as shown below

<html xmlns = "

<head

<title>Absolute Positioning</title>

<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: 25px; left: 100px; z-index: 3;

font-size: 20pt; font-family: tahoma, geneva, sans-serif }

</style>

</head>

<body

<p<imgsrc = "bgimg.gif" class = "bgimg" alt = "First positioned image" /</p>

<p<imgsrc = "fgimg.gif" class = "fgimg" alt = "Second positioned image" /</p>

<p class = "text">Positioned Text</p>

</body>

</html>

The result will be as follow:

References:

1-Internet and World Wide Web How to Program: 4/e.

1