• Abstract and Figures
• Public Full-text

College of the management, economics and information technology Department of Information systems Fall Semester, Academic Year 2015/2016 INTERNET TECHNOLOGY LAB Lab 06: 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 ul ul { font-size: .8em } Change the font size for any ul inside ul font-size: 1.5em To set an element to display text at 150 or percent of its default text size, the author font-size: 150% could use the syntax specify a relationship between the current document and another document. In this case, we declare the linked document to be a stylesheet for this document. The type attribute specifies the MIME type of the related document as text/css. The href attribute provides the 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; To chage the order of rendering the image. z-index: 1 } we position the element to be 0 pixels away from both 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 is a

1 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 results from combining styles defined in several ways. Styles defined by the user take precedence over styles defined by the user agent, and styles defined by authors take precedence over styles 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 properties that we don’t want to be inherited. Consider for example the background-image property, 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 be in the background of every element in the body of our page. Instead, the background image property 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 styles inherited from parent and ancestor elements.

Step 1: Open Yourname_NFS230 folder a. Inside the folder create “Lab06” folder b. Inside the folder create a new notepad file with the name “Lab06_S1.html” c.Write your code in the notepad (by following the below steps) and save the file. d. Click on the file name you will get your first webpage

Step 2: Write the code as shown below

2

Shopping list for Monday:

• Milk
• Bread

  • White bread
  • Rye bread
  • Whole wheat bread

• Rice
• Potatoes
• Pizza with mushrooms

Go to the

Grocery store

The result will be as follow:

3 Section 02: Linking External Style Sheets (10 minutes) Introduction Style sheets are a convenient way to create a document with a uniform theme. With external style sheets (i.e., separate documents that contain only CSS rules), you can provide a uniform look and feel to an entire website. Different pages on a site can all use the same style sheet. When changes to the styles are required, the author needs to modify only a single CSS file to make style changes across the entire website. Note that while embedded style sheets separate content from presentation, both are still contained in a single file, preventing a web designer and a content author from working in parallel. External style sheets solve this problem by separating the content and style into separate files..

Step 1: Open a Yourname_NFS230 folder a. Go to your desktop. Open an Yourname_INFS230 folder b. Go to folder “Lab06” folder c. Inside the Lab06 create a notepad file write the style sheet in the notepad and save as Styles.css. d. In the same folder and Inside the Lab06 folder create a new notepad file with the name “Lab06_S2.html” e. Write your code in the notepad (by following the below steps) and save the file and exit from the file. f. Click on the file name you will get your webpage.

Step 2: Write the code as shown below \ 4 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 } li em { font-weight: bold } h1, em { text-decoration: underline } ul { margin-left: 20px } ul ul { font-size: .8em; }

Inside the Lab06_S2 write

Shopping list for Monday:

• Milk
• Bread

  • White bread
  • Rye bread
  • Whole wheat bread

  5

• Rice
• Potatoes
• Pizza with mushrooms

Go to the Grocery store

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 a capability called

6 absolute positioning, which gives authors greater control over how document elements are displayed. To set the position of the image you have many ways such as fixed , absolute and relative positioning,. We use absolute to control over the elements in the webpage.

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

Step 2: Write the code as shown below

Positioned Text

7 The result will be as follow:

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

8

Load more

  8

Copy Link