Web Development: HTML & Css

Web Development
HTML & CSS
Shermeen Adnan
Classes & IDs
• Parameter Details
• Class Indicates the Class of the element (non-unique)
• Id Indicates the ID of the element (unique in the same
context)
• Classes and IDs make referencing HTML elements from
scripts and stylesheets easier.
– The class attribute can be used on one or more tags and is used by
CSS for styling.
– IDs however are intended to refer to a single element, meaning the
same ID should never be used twice. IDs are generally used with
JavaScript and internal document links, and are discouraged in CSS.
HTML The class Attribute
• Classes are identifiers for the elements that they are
assigned to. Use the class attribute to assign a class to an
element.
– <div class=“class1”>………….</div>
• To assign multiple classes to an element, separate the
class names with spaces.
– <div class=“class1 class2”>………….</div>
• The class attribute can be used on any HTML element.
• Note: The class name is case sensitive!
• Class usage example
• Classes of the same name can be given to any number of elements on
a page and they will all receive the styling associated with that class.
This will always be true unless you specify the element within the CSS.
For example, we have two elements, both with the class highlight:
– <div class=“highlight”>block level element</div>
– <span class=“highlight”>inline element</span>
• If our CSS is as below, then the color green will be applied to the text
within both elements:
– .highlight { color: green; }
• However, if we only want to target div's with the class highlight then
we can add specificity like below:
– div.highlight { color: green; }
• Nevertheless, when styling with CSS, it is generally recommended that
only classes (e.g. .highlight) be used rather than elements with classes
(e.g. div.highlight).
• As with any other selector, classes can can be nested:
– .main .highlight { color: red; } /* Descendant combinator
*/
– .footer > .highlight { color: blue; } /* Child combinator */
• You can also chain the class selector to only select
elements that have a combination of several classes.
• For example, if this is our HTML:
– <div class=“special left menu”>this text will be pink</div>
• And we want to colour this specific piece of text pink,
we can do the following in our CSS:
– .special.left.menu { color: pink; }
• Using The class Attribute in JavaScript
– The class name can also be used by JavaScript to perform certain tasks
for elements with the specified class name.
– JavaScript can access elements with a specified class name by using the
• getElementsByClassName()method
– Example
– When a user clicks on a button, hide all elements with the class name
"city"
• <script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
• The class Attribute can be used on block level
and Inline Elements both
• to select elements with a specific class, write a
period (.) character, followed by the name of
the class
• HTML elements can have multiple classes, each
class name must be separated by a space.
• Different Tags Can Share Same Class
HTML The id Attribute
• The ID attribute of an element is an identifier which must be unique in
the whole document. Its purpose is to uniquely identify the element
when linking (using an anchor), scripting, or styling (with CSS).
– <div id=“example-id”></div>
• You should not have two elements with the same ID in the same
document, even if the attributes are attached to two different kinds of
elements. For example, the following code is incorrect:
– <div id=“example-id”></div>
– <span id=“example-id”></span>
• Browsers will do their best to render this code, but unexpected
behavior may occur when styling with CSS or adding functionality with
JavaScript.
• To reference elements by their ID in CSS, prefix
the ID with #.
– #example-id { color: green; }
• To jump to an element with an ID on a given page,
append # with the element name in the URL.
– http://example.com/about#example-id
• This feature is supported in most browsers and
does not require additional JavaScript or CSS to
work.
• For an ID
– Version ≥ 5
– The only restrictions on the value of an id are
• it must be unique in the document
• it must not contain any space characters
• it must contain at least one character
– So the value can be all digits, just one digit, just punctuation
characters, include special characters, whatever. Just no
whitespace.
– An id value must begin with a letter, which can then be
followed only by
• letters (A-Z/a-z) digits (0-9)
• hyphens ("-") underscores ("_")
• colons (":") periods (".")
HTML The id Attribute: Example
• <!DOCTYPE html> • <body>
• <html>
• <head> • <h2>The id Attribute</h2>
• <style> • <p>Use CSS to style an element
• #myHeader { with the id "myHeader":</p>
• background-color: lightblue;
• color: black; • <h1 id="myHeader">My
• padding: 40px; Header</h1>
• text-align: center;
• } • </body>
• </style> • </html>
• </head>
• Bookmarks with ID and Links
– HTML bookmarks are used to allow readers to
jump to specific parts of a Web page.
– Bookmarks can be useful if your webpage is very
long.
• To make a bookmark, you must first create the
bookmark,
– <h2 id="C4">Chapter 4</h2>
• and then add a link to it
– <a href="#C4">Jump to Chapter 4</a>.
– When the link is clicked, the page will scroll to the
location with the bookmark.
• Using The id Attribute in JavaScript
• JavaScript can access an element with a specified id by using
the getElementById() method:
• Example
• Use the id attribute to manipulate text with JavaScript:
• <script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Hav
e a nice day!";
}
</script>
Exercise: HTML attributes
• Add a "tooltip" to the paragraph below with
the text "About W3Schools".
– <p _______="About W3Schools">W3Schools is a
web developer's site.</p>
• Set the size of the image to 250 pixels wide
and 400 pixels tall.
– <img src="w3schools.jpg" width="______"
height="______">
Exercise: HTML attributes
• Make the element below into a link that goes to
"https://www.w3schools.com".
– <a _______"https://www.w3schools.com">This is a
link</a>
• Specify an alternate text for the image.
• Alternate text is useful when the image cannot be
displayed, like when the page is read by a screen
reader.
– <img src="w3schools.png" _______="w3schools Logo">
Exercise: HTML headings
• Use the correct HTML tag to add a heading with the text "London".
– _____________________
– <p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
• Add six headings to the document with the text "Hello“.
• Start with the most important heading (the largest) and end with the least important
heading (the smallest).
– <html>
<body>
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
_________________________________
</body>
</html>
Exercise: HTML headings
• Add a horizontal rule between the heading
and the paragraph.
– <h1>London</h1>
_______________
<p>London is the capital city of England. It is the
most populous city in the United Kingdom, with a
metropolitan area of over 13 million
inhabitants.</p>
Exercise: HTML paragraphs
• Use the correct HTML tag to add a paragraph with the text "Hello
World!".
– <html>
<body>
________________
</body>
</html>
• Clean up this document with proper end tags.
– <h1>This is a Heading _________
<p>This is a paragraph. _________

• Add a line break in the middle of the paragraph:
– <p>My Bonnie lies _________ over the ocean.</p>
Exercise: HTML paragraphs
• Wrap this poem around HTML tags that will preserve all
spaces and linebreaks when the element is displayed.
_________
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.

_________
Exercise: HTML styles
• Use the correct HTML attribute, and CSS, to set the
color of the paragraph to "blue".
– <p _________________>This is a paragraph.</p>
• Use CSS to set the font of the paragraph to
"courier".
– <p style="___________:courier">This is a
paragraph.</p>
• Use CSS to center align the paragraph.
– <p style="___________:center">This is a
paragraph.</p>
• Use CSS to set the text size to 50 pixels.
– <p style="___________:50px">This is a paragraph.</p>
• Use CSS to set the background-color of the document to yellow.
– <html>
<body style=":yellow">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
• Use CSS to center align the document.
– <html>
<body _________________>
<h1>This is a heading</h1>
</body>
</html>
Exercise: HTML formatting
• Add extra importance to the word "degradation" in the paragraph
below.
– <p>
WWF's mission is to stop the ________ degradation ________ of our
planet's natural environment.
</p>
• Emphasize the word "metropolitan" in the text below.
– <h1>Tokyo</h1>
<p>
Tokyo is the capital of Japan, the most populous ________ metropolitan
________ area in the world.
</p>
• Highlight the word "FUN" in the text below.
– <p>
HTML is ________ FUN ________ to learn!
</p>
Exercise: HTML formatting
• Apply subscript formatting to the number "2" in the
text below.
– <p>
H ________ 2 ________ O is the scientific term for water.
</p>
• Add a line through (strikeout) the letters "blue" in the
text below.
• <p>
My favorite color is ________ blue ________ red.
</p>
Exercise: HTML quotation
• Use an HTML element to add quotation marks around the letters "cool".
– <p>
I am so ________ cool ________.
</p>
• The text below should be a quoted section.
Add the proper HTML element to it, and specify that it is quoted from
the following URL:
http://www.worldwildlife.org/who/index.html
– ________________="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's
leading conservation organization, WWF works in 100 countries and is
supported by 1.2 million members in the United States and close to 5 million
globally.
________________
Exercise: HTML quotation
• Change text direction.
• Make the text below go right-to-left.
– ________What a beautiful day! ________
• The letters "WHO" in the text below is an abbreviation of
"World Health Organization".
• Use an HTML element to provide the specified
abbreviation of "WHO".
– <p>
The < _____________ "World Health Organization">
WHO</________> was founded in 1948.
</p>
Exercise: HTML comments
• Use the HTML comment tag to make a
comment out of the "This is a comment" text.
– <h1>This is a heading</h1>
__________ This is a comment __________
• Add comment tags around the paragraph:
– __________ <p>This is a paragraph.</p>
__________
Exercise: HTML CSS
• Use CSS to set the background color of the document (body) to yellow.
– <!DOCTYPE html>
<html>
<head>
<style>
_______________
_______________ :yellow;
_______________
</style>
</head>
<body>
<h1>My Home Page</h1>
</body>
</html>
Exercise: HTML CSS
• Use CSS to set the font of the document to "courier".
– <!DOCTYPE html>
<html>
<head>
<style>
body {_____________:courier;}
</style>
</head>
<body>
</body>
</html>
Exercise: HTML CSS
• Use CSS to set the text color of the document to red.
– <!DOCTYPE html>
<html>
<head>
<style>
body { _________:red;}
</style>
</head>
<body>
</body>
</html>
Exercise: HTML CSS
• Use CSS to make a yellow, 1 pixel thick, border around all paragraphs.
– <!DOCTYPE html>
<html>
<head>
<style>
________ { ________:________ solid ________;}
</style>
</head>
<body>
</body>
</html>
Exercise: HTML CSS
• Use the correct attribute to make sure that the last paragraph gets the styling as
described in the style element.
– <!DOCTYPE html>
<html>
<head>
<style>
#special {
color:grey;
background-color:lightblue;
}
</style>
</head>
<body>
<p __________________>This is a paragraph.</p>
</body>
</html>
Exercise: HTML CSS
• Use the correct attribute to make sure that the last paragraph gets the styling as
described in the style element.
– <!DOCTYPE html>
<html>
<head>
<style>
.intro {
font-size:20px;
color:grey;
background-color:lightblue;
}
</style>
</head>
<body>
<p _______________>This is a paragraph.</p>
</body>
</html>
Exercise: HTML links
• Use the correct HTML to make the text below into a
link to "default.html".
– ____________ Visit our HTML tutorial. ______
• Use CSS to remove the underline from the link.
– <a href="html_images.asp" style= "____________
">HTML Images</a>
• Use the correct HTML attribute to make the link
open in a new window.
– <a href="html_images.asp "____________>HTML
Images</a>
Exercise: HTML links
• Use the correct HTML to make the image
become a link to "default.html".
– __________________
<img src="smiley.gif">
________
• Add a "tooltip" to the link.
• The "tooltip" should say "Home".
– <a href="default.html" __________________ >
Back to Home</a>
Exercise: HTML images
• Use the HTML image attributes to set the size of
the image to 250 pixels wide and 400 pixels tall.
– <img src="scream.png" _____="250" _____="400">
• Use CSS to set the size of the image to 250 pixels
wide and 400 pixels tall.
– <img src="scream.png" style="_____________;">
• Use the correct HTML to make the image become
a link to "default.html".
– __________________
<img src="smiley.gif">
________
Exercise: HTML images
• Make the image below float to the right of the paragraph.
– <p>
<img src="smiley.gif" style=“___________;">
This is a paragraph.
This paragraph contains an image
</p>
• Add the correct HTML attribute to display the "smiley.gif"
image.
– <img _________________>
• Specify an alternate text for the image.
• The alternate text should say "Smiley".
• Alternate text is useful when the image cannot be
displayed, like when the page is read by a screen reader.
– <img src="smiley.gif" _________________>
Exercise: HTML tables
• Add a table row with two • Add a table caption that
table headers. says "Names".
• The two table headers – <table>
should have the value _________________
"Name" and "Age". <tr>
– <table> <th>First Name</th>
_________ <th>Last Name</th>
_________ <th>Points</th>
_________ </tr>
_________ <tr>
<tr> <td>Jill</td>
<td>Jill Smith</td> <td>Smith</td>
<td>50</td> <td>50</td>
</tr> </tr>
</table> </table>
• Add a table row at the end of
the table, with two table cells.
• Use CSS styles to make the
• The two table cells should have
table 300 pixels wide. the value "Eve Jackson" and
– <table ______________> "94".
<tr> – <table>
<th>First Name</th> <tr>
<th>Last Name</th> <th>Name</th>
<th>Points</th> <th>Age</th>
</tr>
</tr>
<tr>
<tr> <td>Jill Smith</td>
<td>Jill</td> <td>50</td>
<td>Smith</td> </tr>
<td>50</td> ______
__________________
</tr>
__________________
</table> ______
</table>
• Use the correct HTML attribute to • Use the correct HTML attribute
make the first TH element span to make the second TH
two columns. element span two rows.
– <table>
– <table>
<tr>
<th _____________>Name</th> <tr>
<th>Age</th> <th>Name</th>
</tr> <td>Jill Smith</td>
<tr> </tr>
<td>Jill</td> <tr>
<td>Smith</td> <th
<td>50</td> ___________>Phone</td>
</tr> <td>555-77854</td>
<tr>
</tr>
<td>Eve</td>
<td>Jackson</td> <tr>
<td>94</td> <td>555-77854</td>
</tr> </tr>
</table> </table>
Exercise: HTML lists
• Add a list item with the text "Coffee" inside the <ul>.
– <ul>
______Coffee ______
</ul>
• Finish the HTML code to make an ordered list.
– ______
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
______
• Use CSS to display squares instead of bullets.
– <ul style="__________________;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Exercise: HTML lists
• Use the correct HTML attribute to display letters (uppercase ABC) instead of
numbers.
– <ol _______________>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
• Use the correct HTML attribute to display uppercase roman numbers.
– <ol _______________>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
• Use the correct HTML elements to make a description of each term in the
description list.
– <dl>
<dt>Coffee</dt>
_____- black hot drink _____
<dt>Milk</dt>
_____- white cold drink _____
</dl>
Exercise: HTML classes
• Create a class selector named
"special". • Add the correct class to make
• Add a color property with the the H1 element red.
value "blue" inside the "special" – <!DOCTYPE html>
class. <html>
– <!DOCTYPE html> <head>
<html> <style>
<head> .mystyle {color:red;}
<style> </style>
_________
</head>
___________;
_________ <body>
</style> <h1 _______________>My
</head> Home Page</h1>
<body> </body>
<p class="special">My </html>
paragraph</p>
</body>
</html>
Exercise: HTML classes
• Add two classes to the H1 element, to make the background pink and the
color red.
– <!DOCTYPE html>
<html>
<head>
<style>
.intro {background:pink;}
.special {color:red;}
</style>
</head>
<body>
<h1 ____________________________>My Home Page</h1>
</body>
</html>
Exercise: HTML IDs
• Create an id selector named
• Add the correct HTML "special".
attribute to make the H1 • Add a color property with the
value "blue" inside the "special"
element red.
class.
– <!DOCTYPE html> – <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
#myheader {color:red;} _________
___________;
</style>
_________
</head> </style>
<body> </head>
<h1 ____________>My <body>
Home Page</h1> <p id="special">My
</body> paragraph</p>
</html> </body>
</html>

Web Development: HTML & Css

Uploaded by

Web Development: HTML & Css

Uploaded by

Web Development

HTML & CSS

<p>This is a paragraph. _________

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

<h1>My Home Page</h1>

<h1>My Home Page</h1>

<h1>My Home Page</h1>

<h1 ____________________________>My Home Page</h1>

You might also like