Scribd
Upload
36 views11 pages

Lecture5 B

This document provides an overview of URLs and CSS selectors. It explains that URLs specify the location of files and links. It demonstrates how to write URLs to reference files in different folders. It also describes different types of CSS selectors including type, class, ID, grouping, universal, and descendant selectors. It provides examples of when to use each selector type and recommends practicing inserting images and links using URLs and applying styles with different CSS selectors.

Uploaded by

Usman AziZ
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
36 views11 pages

Lecture5 B

This document provides an overview of URLs and CSS selectors. It explains that URLs specify the location of files and links. It demonstrates how to write URLs to reference files in different folders. It also describes different types of CSS selectors including type, class, ID, grouping, universal, and descendant selectors. It provides examples of when to use each selector type and recommends practicing inserting images and links using URLs and applying styles with different CSS selectors.

Uploaded by

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

Web Design & Development

Understanding URL &


Learn How to Use Different CSS Selector
Type
Understanding URL

• When we have html code like following:


<img src=“SOME URL“ />
<a href=“SOME URL"> </a>
• Or CSS code like:
background: url(../img/pdf.png) no-repeat;
list-style: url(./img/bullet2.png) inside;
• We need to specify the URL.
• How do we know the URL of an object (a file, or
a link)?
Understanding URL

• Assume we have following folders and


files
Understanding URL

• If we want to insert "image1.jpg“ in the


"assign2.html" file, then the html code will
be:
<img src="../images/image1.jpg" />
Understanding URL

• Practice:
– download the "c8_e1.zip“ file from the
following address:
http://www.cs.pitt.edu/~mehmud/cs134-2084/
files/c8_e1.zip
– 1) Insert "image2.jpg" in "about.html" file;
2) Insert "image3.jpg" in "index.html" and
also in "assign1.html";
3) Make a link to "about.html",
"assign1.html", "assign2.html" files in the
"index.html" file.
Using Different CSS Selectors

• Type Selector
– redefines the look of a specific tag
– A type selector matches every instance of the element
type in the document tree
E.g. body {background-color: #000000;}
• Class Selector
– can apply to any tag
E.g. .indent{margin-right:5%;margin-left: 5%;}
In HTML, <p class=“indent”>
• ID Selector
E.g. #myId {color: #38608A;}
In HTML, <h1 id="myId">some text..</h1>
Using Different CSS Selectors

• Grouping
– When several selectors share the same
declarations, they may be grouped into a
comma-separated list.
e.g. h1, h2, h3 {font-family: Georgia;}
• Universal selector
– The universal selector, written "*", matches
the name of any element type.
– e.g. * {border: 2px;}
Using Different CSS Selectors

• Descendant selector
– Sometimes, you want selectors to match an
element that is the descendant of another
element in the document tree
(e.g., "Match those EM elements that are
contained by an H1 element").
– Descendant selectors express such a
relationship in a pattern.
– A descendant selector is made up of two or
more selectors separated by whitespace.
e.g. h1 em {color: blue;}
Using Different CSS Selectors

• When to use which?


– Use “type selector” when you want to apply
certain style for all occurrences of a certain
tag
– Use “ID selector” if you want to apply the
style for only one occurrence of a certain tag
– Use “class selector” if you want to apply the
style for many (but not all) occurrences of a
certain tag; OR if you want to apply the style
for more than one type of tags
Using Different CSS Selectors

• When to use which? (cont.)


– Use “Grouping” When several selectors
share the same declarations
– Use “Universal selector” if you want all the
tags in your web documents have some
common style (for example, all tags don’t
have any margin)
– Use “Descendant selectors” if you want
selectors to match an element that is the
descendant of another element
Using Different CSS Selectors

• Practice
– Save the HTML file at the following address
to your local hard drive:
http://www.cs.pitt.edu/~mehmud/cs134-
2084/exercise/orion.html
– Add following CSS rules into orion.html as
internal stylesheet:
*, h1, h2, h6,
h1, h2, h6
, p, .yellowBG, #topcontent, ul li a, #selectedli
– I explain how you should add them

You might also like