Scribd
Upload
61 views

HTML&CSS Bells

HTML is the standard markup language used to create web pages. Key HTML elements include headings, paragraphs, links, images and lists. HTML uses tags like <h1> for headings, <p> for paragraphs and <a> for links. Attributes provide additional information about elements and are specified in the start tag. Common attributes include href for links and src for images. CSS is used to style and lay out HTML elements on the page.

Uploaded by

Olamide Kole
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
61 views

HTML&CSS Bells

HTML is the standard markup language used to create web pages. Key HTML elements include headings, paragraphs, links, images and lists. HTML uses tags like <h1> for headings, <p> for paragraphs and <a> for links. Attributes provide additional information about elements and are specified in the start tag. Common attributes include href for links and src for images. CSS is used to style and lay out HTML elements on the page.

Uploaded by

Olamide Kole
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 230

MODULE 1

HTML INTRODUCTION

• HTML stands for Hyper Text Markup Language.

• HTML is the standard markup language for creating Web pages.

• HTML describes the structure of a Web page.

• HTML consists of a series of elements as defined by Semantics

• HTML elements tell the browser how to display the content


Markup Languages
• In computer text processing, a markup language is a system for annotating a
document in a way that is visually distinguishable from the content

• It is used only to format texts, so that when a document is processed for


display, the markup language does not appear.

• Examples of Markup Languages are HTML, XML, LateX, XHTML

• HTML uses Tags for Annotation, opening Tag < > and Closing Tag </>
History
• The first version of HTML was written by Tim Berners-Lee in 1993. HTML 1.0 was
released with the intention of sharing information that can be readable and accessible
via web browsers.

• But not many of the developers were involved in creating websites. So the language
was also not growing.

• Since then, there have been many different versions of HTML.

• The most widely used version throughout the 2000's was HTML 4.01, which became
an official standard in December 1999.

• Presently HTML 5 is in use


HTML Editors
• A simple text editor is all you need to learn HTML. (Note Pad)

• However there are specialized code editors both free and


paid in the market today and they help you complete your
codes faster and readily indicate errors in your code

• Examples are Notepad++, Komodo edit, Bluefish, Atom, Text


Mate, Visual Studio Code e.t.c
HTML Elements
• The HTML element is everything from the start tag to the end tag

<tagname> Content goes here...</tagname>

For Example

<h1>This is a Heading</h1>
<p>This is a paragraph</p>
Attributes
• HTML tags are not case sensitive: <P> means the same as <p>.

• However as a matter of convention it is better to write in lower cases

• Some HTML elements have no content (like the <br> element). These
elements are called empty elements.

• Empty elements do not need an end tag!


HTML TAGS FUNCTIONS

<p> I like to build websites </p> Defines a paragraph

<a> I like to build websites </a> Defines a hyperlink

<b> I like to build websites </b> Defines bold text

<h1> I like to build websites<h1> Defines a heading


Web Browsers

• The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read


HTML documents and display them correctly.

• A browser does not display the HTML tags, but uses them to determine
how to display the document:
HTML Syntax

All Html documents generally follow the syntax displayed below:

<!DOCTYPE html>

<html>

<head> <title> </title> </head>


<body> I enjoy web design </body>

</html>
HTML Page Structure
Below is a visualization of an HTML page structure:
HTML Documents
• All HTML documents must start with a document type declaration: <!
DOCTYPE html>

• The HTML document itself begins with <html> and ends with </html>

• The visible part of the HTML document is between <body> and </body>
The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.

• It must only appear once, at the top of the page (before any HTML tags).

• The <!DOCTYPE> declaration is not case sensitive.

• The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>
• The <html> element is the root element of an HTML page

• The <html> element represents the root (top-level element) of an HTML


document, so it is also referred to as the root element. All other elements
must be descendants of this element.

• The <head> element contains meta information about the HTML page

• The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)

• The <body> element defines the document's body, and is a container for all
the visible contents, such as headings, paragraphs, images, hyperlinks, tables,
lists, etc.
Nested HTML Elements
• HTML elements can be nested (this means that elements can contain other elements).

• All HTML documents consist of nested HTML elements.

• The following example contains four HTML elements


(<html>, <body>, <h1> and <p>)

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.

• <h1> defines the most important heading. <h6> defines the least
important heading:

• Search engines use the headings to index the structure and content of your
web pages.

• Users often browse a page by its headings. It is important to use headings


to show the document structure.
Web Page Headings Class Exercise

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>
Headings Continued

• <h1> headings should be used for main headings, followed by <h2>


headings, then the less important <h3>, and so on.

• Note: Browsers automatically add some white space (a margin) before and
after a heading.

• Note: Use HTML headings for headings only. Don't use headings to make
text BIG or bold.
Bigger Headings

• Each HTML heading has a default size. However, you can specify the size for
any heading with the style attribute, using the CSS font-size property:

Example

<h1 style="font-size:60px;">Heading 1</h1>


<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:60px;">Heading 1</h1>

</body>
</html>
HTML Horizontal Rules

• The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.

• The <hr> element is used to separate content (or define a change) in an HTML
page:
<!DOCTYPE html>
<html>
<body>
<hr>this part of my text <hr>Was separated <hr> from this other text

</body>
</html>
Empty HTML Elements
• HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

<!DOCTYPE html>
<html>
<body>

<p>This is my <br> paragraph with a line break.</p>

</body>

</html>
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:

Example
• <p>This is a paragraph.</p>
• <p>This is another paragraph.</p>
HTML Attributes
• All HTML elements can have attributes

• Attributes provide additional information about elements and can be used to


define their appearance

• Attributes are always specified in the start tag i.e Links, and images

• Attributes usually come in name/value pairs like: name="value"


HTML Links

• HTML links are defined with the <a> tag:


<a href="url">link text</a>

Example
<a href="https://www.google.com">This is a link</a>

Href stands for Hypertext Reference


Html Links

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue


• A visited link is underlined and purple
• An active link is underlined and red
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
<a href="https://www.google.com/" target="_blank"> visit Google</a>

<a href="C:\Users\BANKS\Desktop\New folder (2)\nn.txt"


target="_blank">Doc Name</a>
The href Attribute
• The <a> tag defines a hyperlink. The href attribute specifies the URL of the
page the link goes to:

<a href="C:\Users\NHS_TU 02\Desktop\class\">Doc Name</a>


Exercise
The href Attribute

Use the href attribute to create a link to any website

Use the href attribute to create a link to any document on your system
MODULE 2
HTML Attributes, src for Images

HTML images are defined with the <img> tag.

• The source file (src), alternative text (alt), width, and height are provided as
attributes:

Example
<img src="image-url.jpg" alt="description of the image">

<img src= "directory.jpg" alt="This is my Image" width="104" height="142">


The width and height Attributes
• The <img> tag should also contain the width and height attributes, which
specifies the width and height of the image (in pixels):

• You can modify to control the dimensions and shape of the image

<img src= "directory.jpg" alt= "This is my Image" width="104" height="142">


HTML Display

• Large or small screens, and resized windows will create different results.

• With HTML, you cannot change the display by adding extra spaces or extra
lines in your HTML code.

• The browser will automatically remove any extra spaces and lines when the
page is displayed:
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph contains a lot of spaces in the source
code but the browser ignores it
</p>
</body>
The HTML <pre> Element
• The HTML <pre> element defines preformatted text.

• The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves
both spaces and line breaks:
Example
<pre>
My first Poem reads.

I was not happy with the rain.

until my eyes caught .

a mysterious autumn watercolor gift.


</pre>
Html CSS
• Cascading Style Sheets (CSS) is used to format the layout of a webpage.

• With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what
background images or background colors are to be used, different displays
for different devices and screen sizes, and much more
• CSS can be added to HTML documents in 3 ways:

• Inline - by using the style attribute inside HTML elements


• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file
Inline CSS

• An inline CSS is used to apply a unique style to a single HTML element.

• An inline CSS uses the style attribute of an HTML element.

• The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to
red:
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

</body>
</html>
Internal CSS
• An internal CSS is used to define a style for a single HTML page.

• An internal CSS is defined in the <head> section of an HTML page, within a


<style> element.

• The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red.

• In addition, the page will be displayed with a "powderblue" background


color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>
External CSS
• An external style sheet is used to define the style for many HTML pages.

• To use an external style sheet, add a link to it in the <head> section of each
HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>
"styles.css":The external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
The style Attribute (CSS)
• The style attribute is used to add styles to an element, such as color, font, size,
and more.

Example
<p>I am normal</p>
<p style="color:red;">I am colored red</p>
<p style="color:blue;">I am colored blue</p>
<p style="font-size:50px;">I am big</p>
Background Color

• The CSS background-color property defines the background color for


an HTML element.

<body style="background-color:papayawhip;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

Note:you can also set the rgb properties in place of the colour names
i.e <body style="background-color:rgb(255, 99, 71);">
Set background color for different elements:

<!DOCTYPE html>
<html>

<body>
<h1 style="background-color:grey;">This is a heading</h1>
<p style="background-color:powderblue;">This is a paragraph.</p>
</body>

</html>
HTML Styles Text colours

<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="MediumSeaGreen;">I am green</p>

</body>
</html>
Border Color

You can set the color of borders around your html text as follows
<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">This Text border</h1>

<h1 style="border: 1px solid DodgerBlue;">Is colored differently </h1>

<h1 style="border: 2px solid Violet;">from this </h1>

</body>
</html>
Fonts
The CSS font-family property defines the font to be used for an HTML element:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">This is a heading</h1>


<p style="font-family:courier;">This is a paragraph.</p>

</body>
</html>
Text Size
The CSS font-size property defines the text size for an HTML
element
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML
element
<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered Heading</h1>


<p style="text-align:right;">Right Aligned paragraph.</p>

</body>
</html>
HTML Text Formatting Elements
Bold Italics Subscripts and superscripts
<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>


<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>
Emphasis, Marks, Text reduction, Deletion, Quotation
<body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
<p>This is some normal text.</p>
<p>Its Friyay! don’t forget to have <mark>fun!</mark> today.</p>
<p><small>This is some smaller text.</small></p>
<p>My favorite color is <del>red</del> blue.</p>
<p>It is often said that : <q>Whatever the mind can conceive and believe, it can
also achieve.</q></p>
<p>The <abbr title="The Bells University">TBU</abbr> was founded in 2004.</p>
</body>
</html>
HTML ADDRESS TAG

• The HTML <address> tag defines the contact information for the
author/owner of a document or an article.

• The contact information can be an email address, URL, physical address,


phone number, social media handle, etc.
•
The text in the <address> element usually renders in italic, and browsers will
always add a line break before and after the <address> element
<!DOCTYPE html>
<html>
<body>
<p>The HTML address element defines contact information (author/owner) of a
document or article.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
Html Comments
<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->


<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>
MODULE 3
HTML Marqee Tag
• Marquee is one of the important tags introduced in HTML to support
such scrollable texts and images within a web page.

<marquee width="60%" direction="right" height="100px vspace =


30%">
This is a sample scrolling text that scrolls to the right.
</marquee>
Marquee Speed
• Marquee speed can be changed using the "scrollmount" attribute. For example,
if you are using scrollmount = "1" then it sets the marque to scroll very slowly,
and as you increase the "scrollmount," the scrolling speed will also increase

<marquee behavior="scroll" direction="up" scrollamount="1">Slow


Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="12">Little Fast
Scrolling</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast
Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="50">Very Fast
Scrolling</marquee>
Continuous scrolling image
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left">
<img src= ".jpg " width="120" height="80" alt= " Text here" />
</marquee>
</body>
</html>
Side Touch Margin Bounce Image
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<marquee behavior="alternate" direction="left"scrollamount="70">
<img src="me.jpg"
width="120" height="80" alt= " none" />
</marquee>
</body>
</html>
Embedding Videos
• Embedding videos in HTML based document is also an essential part of web
development. Most browsers do not have any consistent standard to define
media files that are embedded in web pages.

Video Element
• This is a new feature introduced in HTML for embedding video and is used to
incorporate movie files and video streaming, and is done using the <video>
tag, which supports three video formats currently. These are:
• MP4
• Ogg and
• WebM
Video Tag Attributes
• src: This is used to set the URL or path from where the video file will get fetched.

• autoplay: This attribute specifies that as soon as your web page gets ready, the
video embedded in your page gets played at that moment.

• controls: This tells the browser what player-controls / buttons (such as


play/pause, etc.) to be displayed on the page with the video.

• width and height: This is used to assign the player's width and height in which
the video will be shown.

• muted: This tells whether the audio part of the specified video should be kept
mute or not.
<!DOCTYPE html>
<html>
<body>

<video width="400" controls>


<source src="mov_bbb.mp4" type="video/mp4">
</video>

<p>
My WebPage Video
</p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>


<source src="movie.mp4" type="video/mp4">
</video>

</body>
</html>
• The controls attribute adds video controls, like play, pause, and
volume.

• It is a good idea to always include width and height attributes. If


height and width are not set, the page might flicker while the video
loads.

• The <source> element allows you to specify alternative video files


which the browser may choose from. The browser will use the first
recognized format.
HTML <video> Autoplay
• To start a video automatically, use the autoplay attribute:
<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" autoplay>


<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

</body>
</html>
Muted Autoplay

• Add muted after autoplay to let your video start playing automatically (but muted):

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" autoplay muted>


<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

</body>
</html>
YouTube videos

• Converting videos to different formats can be difficult and time-consuming.

• An easier solution is to let YouTube play the videos in your web page.

• YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video.

• You can use this id, and refer to your video in the HTML code by clicking on the
share and embed button and copying the corresponding code
<!DOCTYPE html>
<html>
<body>

<iframe width="560" height="315"


src="https://www.youtube.com/embed/tdW0Gv9WDP4" title="YouTube video
player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>
</body>
</html>
To autoplay and mute

<iframe width="560" height="315"

src="https://www.youtube.com/embed/tdW0Gv9WDP4?autoplay=

1&mute=1" title="YouTube video player" frameborder="0"


allow="accelerometer; autoplay; clipboard-write; encrypted-media;

gyroscope; picture-in-picture; web-share allowfullscreen "></iframe>


YouTube - Loop

<iframe width="420" height="315"


src="https://www.youtube.com/embed/tgbNymZ7vqY?
playlist=tgbNymZ7vqY&loop=1">
</iframe>
Positioning Media

• There are three easy methods you can use to center a video rendered
inside your HTML document.

• Using the <center> HTML tag

• Adding a <div> container to the video element with text-align:center style

• Applying margin: auto 0px and display:block styles to the video element
itself
<center>

<video width="400" controls>


        <source src="mov_bbb.mp4" type="video/mp4">
        <source src="mov_bbb.mp4" type="video/ogg">
         </video>

</center>
Center a video using div tag and text-align:center property
<style>
div.center {
text-align: center;
}
</style>

<body>
<div class="center">
    <video width="400" controls>
        <source src="mov_bbb.mp4" type="video/mp4">
          </video>
</div>

</body>
Centering the video element with margin and display style
<style>

video.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>

<body>
<video class="center" controls>
<source src="mov_bbb.mp4" type="video/mp4"> </video>

</body>
Favicons
Favicons are icons that are used as part of a site’s branding.

A favicon could be a brand’s logo, a character or a set of characters, part of the logo,
or even a generic image that represents the type of business or industry a brand is in.

Typically favicons are found near the address bar


To Create a Favicon
• Go to genfavicon.com
• Upload the image to use for your favicon
• Change the size to 16x16
• Capture and preview
• Download icon image

• Note there are other websites where you can create favicons i.e favicon.cc
Favicon Syntax
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon" />
</head>
<body>
</body>
</html>

Note However that favicons display is sometimes browser specific, and it may not
display on your local Microsoft Edge browsers during web development but will display
on google chrome and when viewed from the live Server.
Google Chrome is responsive to favicon display (clear cache)
• Favicons can also be jpg files altered to the right dimensions

<link rel="shortcut icon" type="image/jpg" href="arrow.jpg"/>


HTML Page Title

• Every web page should have a page title to describe the meaning of the page.
The <title> element adds a title to your page:
<!DOCTYPE html>
<html>
<head>
<title>My Own WebPage</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML <button> Tag

A clickable button is marked up as follows:


<body>
<button type="button">Click Me!</button>
</body>

To give it some functionality we can write

<body>
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
</body>
MODULE 4
Html Tables
• Tables allow web developers to arrange data into rows and columns
• Tables typically consists of cells inside rows and column
• The content of every table is enclosed with the table tags : <table></table>
• The smallest container inside a table is a table cell, each table cell is defined by
a <td> and a </td> tag. Td Stands for Table data
• Each table row starts with a <tr> and ends with a </tr> tag.
• tr stands for table row.
• Sometimes you want your cells to be headers, in those cases use the <th> tag
instead of the <td> tag:
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>TR elements define table rows</h2>
<table style="width:100%">
<tr>
<td>Helen</td>
<td>Tobias</td>
<td>Luke</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>TD elements define table cells</h2>
<table style="width:100%">
<tr>
<td>JOHN</td>
<td>OBI</td>
<td>AHMED</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
<!DOCTYPE html>
<html>

<style>
table, th, td {
border:2px solid black;
}</style>

<body>
<h2>A basic HTML table</h2>
<table style="width:30%">

<tr>
<th>Country</th>
<th>Matches Played</th>
<th>Matches won </th>
<th>Matches lost</th>
</tr>
<tr>
<td>Nigeria</td>
<td>20</td>
<td>18</td>
<td>2</td>
</tr>

<tr>
<td>Cameroon</td>
<td>20</td>
<td>10</td>
<td>10</td>
</tr>

</table>

<p>To understand the example better, we have added borders to the table.</p>

</body>
</html>
C olla ps e d T ab le Bo rde rs

To avoid having double borders like in the example above, set the CSS border-collapse
property to collapse.

This will make the borders collapse into a single border:


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
Style Table Borders

• If you set a background color of each cell, and give the border a white color
(the same as the document background), you get the impression of an
invisible border:
<style>
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
</style>
Round Table Borders

• With the border-radius property, the borders get rounded corners:


<style>
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
</style>
Skip the border around the table by leaving out table from the css selector:

<style>
th, td {
border: 1px solid black;
border-radius: 10px;
}
</style>
Dotted Border
<style>
th, td {
border-style: dotted;
}
</style>
The Following Border Styles can be used
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden
Border Colour Property
<style>
th, td {
border-style:solid;
border-color: #96D4D4;
}
</style>
To set the size of a specific column, add the style attribute on a <th> or <td> element:
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<body>

<h2>Set the first column to 70% of the table width</h2>

<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
HTML Table Row Height

<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<body>
<h2>Set the height of the second row to 200 pixels</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
HTML Lists
• HTML lists allow web developers to group a set of related items in lists.

• An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

• An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

• The list items will be marked with numbers by default

• The unordered list items will be marked with bullets (small black circles) by default:

• HTML also supports description lists.

• A description list is a list of terms, with a description of each term.

• The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
Ordered and unordered lists
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
Unordered List with Circle Bullets

<body>

<h2>Unordered List with Circle Bullets</h2>

<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
Unordered List without Bullets
<body>

<h2>Unordered List without Bullets</h2>

<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
Description lists
<body>

<h2>A Description List</h2>


<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
Nested HTML Lists: Lists can be nested (list inside list)

<body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
Horizontal List with CSS
• HTML lists can be styled in many different ways with CSS.

• One popular way is to style a list horizontally, to create a navigation menu:


<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>

</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
Linking Html Pages
<!DOCTYPE html>
<head>
 <title>First Page</title>
<style>
body{ background-color:aqua}
</style>
</head>
<body>

<h1>This is the first page</h1>

<a href="testpg2.html">Click me to link page 2</a>


</body>
</html>
<!DOCTYPE html>
<head>
<title>Second page</title>
<style>
body { background-color: chartreuse}
</style>
</head>
<body>
<h2>This is the second page</h2>

<a href="pg1.html">Click me to return to page 1</a>

</body>
</html>
MODULE 5
Block-level Elements
• A block-level element always starts on a new line, and the browsers automatically add some space (a margin)
before and after the element.

• A block-level element always takes up the full width available (stretches out to the left and right as far as it
can).

• Two commonly used block elements are: <p> and <div>.

• The <p> element defines a paragraph in an HTML document.

• The <div> element defines a division or a section in an HTML document


<!DOCTYPE html>
<html>
<body>

<p style="border: 1px solid black">Hello World</p>


<div style="border: 1px solid black">Hello World</div>

<p>The P and the DIV elements are both block elements, and they will always start on a new line
and take up the full width available (stretches out to the left and right as far as it can).</p>

</body>
</html>
Inline Elements
• An inline element does not start on a new line.

• An inline element only takes up as much width as necessary.

• This is a <span> element inside a paragraph.


<!DOCTYPE html>
<html>
<body>

<p>This is an inline span <span style="border: 1px solid black">Hello


World</span>
element inside a paragraph.</p>

<p>The SPAN element is an inline element, and will not start on a new line and
only takes up as much width as necessary.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<div style="background-color:black;color:white;padding:20px;">
<h2>Nigeria</h2>
<p>Nigeria became a British protectorate in 1901. The period of British rule lasted until 1960, when
an independence movement led to the country being granted independence.</p>
<p>Nigeria first became a republic in 1963, but succumbed to military rule three years later, after a
bloody coup d'état.</p>
</div>

<p> Nigeria first became a republic in 1963, but succumbed to military rule three years later, after a
bloody coup d'état </p>

</body>
</html>
In-line <span> element
<!DOCTYPE html>
<html>
<body>

<h1>The span element</h1>

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and


my father has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>

</body>
</html>
HTML Layout Elements and Techniques

• Websites often display content in multiple columns (like a magazine or a


newspaper).
• HTML has several semantic elements that define the different parts of a
web page:
• <header> - Defines a header for a document or a section

• <nav> - Defines a set of navigation links

• <section> - Defines a section in a document

• <article> - Defines an independent, self-contained content

• <aside> - Defines content aside from the content (like a sidebar)

• <footer> - Defines a footer for a document or a section

• <details> - Defines additional details that the user can open and close on demand

• <summary> - Defines a heading for the <details> element


<body>
<header>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</header>
</body>
<style>
body{ background-color:aqua}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
<style>
*{
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */


header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}

/* Create two columns/boxes that floats next to each other */


nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}

article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}

/* Clear floats after the columns */


section::after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each
other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
<body>
<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will
stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect</p>

<header>
<h2>Cities</h2>
</header>

<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<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>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
</section>

<footer>
<p>Footer</p>
</footer>
</body>
</html>
<section> Element

In HTML there are some semantic elements that can be used to define different parts of a web page:
The <section> element defines a section in a document.
<!DOCTYPE html>
<html>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research
and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

</body>
</html>
HTML <article> Element
The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it
independently from the rest of the web site.

Examples of where the <article> element can be used:

• Forum posts
• Blog posts
• User comments
• Product cards
• Newspaper articles
<!DOCTYPE html>
<html>
<body>
<h1>The article element</h1>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser
today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>

</body>
</html>
HTML <header> Element

• The <header> element represents a container for introductory content or a set of


navigational links.

• A <header> element typically contains:

• one or more heading elements (<h1> - <h6>)


• logo or icon
• authorship information
• Note: You can have several <header> elements in one HTML document. However,
<header> cannot be placed within a <footer>, <address> or another <header>
element.
<!DOCTYPE html>
<html>
<body>

<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in
harmony with nature.</p>
</article>

</body>
</html>
HTML <footer> Element

• The <footer> element defines a footer for a document or section.

• A <footer> element typically contains:

• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents
• You can have several <footer> elements in one document.
• <!DOCTYPE html>
• <html>
• <body>

• <footer>
• <p>Author: Hege Refsnes</p>
• <p><a href="mailto:hege@example.com">hege@example.com</a></p>
• </footer>

• </body>
• </html>
HTML <nav> Element

• The <nav> element defines a set of navigation links.

• Notice that NOT all links of a document should be inside a <nav>


element. The <nav> element is intended only for major block of
navigation links.

• Browsers, such as screen readers for disabled users, can use this
element to determine whether to omit the initial rendering of this
content.
• <!DOCTYPE html>
• <html>
• <body>

• <nav>
• <a href="/html/">HTML</a> |
• <a href="/css/">CSS</a> |
• <a href="/js/">JavaScript</a> |
• <a href="/jquery/">jQuery</a>
• </nav>

• </body>
• </html>
HTML <aside> Element

• The <aside> element defines some content aside from the content it
is placed in (like a sidebar).

• The <aside> content should be indirectly related to the surrounding


content.
<!DOCTYPE html>
<html>
<body>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was
amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

</body>
</html>
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• aside {
• width: 30%;
• padding-left: 15px;
• margin-left: 15px;
• float: right;
• font-style: italic;
• background-color: lightgray;
•}
• </style>
• </head>
• <body>

• <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

• <aside>
• <p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
• </aside>

• <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
• <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

• </body>
• </html>
HTML <figure> and <figcaption> Elements

• The <figure> tag specifies self-contained content, like illustrations,


diagrams, photos, code listings, etc.

• The <figcaption> tag defines a caption for a <figure> element. The


<figcaption> element can be placed as the first or as the last child of a
<figure> element.

• The <img> element defines the actual image/illustration.


• <!DOCTYPE html>
• <html>
• <body>

• <h2>Places to Visit</h2>

• <p>Puglia's most famous sight is the unique conical houses (Trulli) found in the area around Alberobello, a declared UNESCO World
Heritage Site.</p>

• <figure>
• <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
• <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
• </figure>

• </body>
• </html>
CSS Layout - The position Property

The position property specifies the type of positioning method used for an element
(static, relative, fixed, absolute or sticky).
The position Property
The position property specifies the type of positioning method used for an element.

There are five different position values:

• static
• relative
• fixed
• absolute
• sticky
position: static;

• Elements are then positioned using the top, bottom, left, and right properties.
However, these properties will not work unless the position property is set first.
They also work differently depending on the position value.

• HTML elements are positioned static by default.

• Static positioned elements are not affected by the top, bottom, left, and right
properties.

• An element with position: static; is not positioned in any special way; it is always
positioned according to the normal flow of the page:
This <div> element has position: static;

<!DOCTYPE html>
<html>
<head>
<style>
div.static {position: static; border: 3px solid #73AD21;}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way; it is always positioned according to the
normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
position: relative;

• An element with position: relative; is positioned relative to its normal


position.

• Setting the top, right, bottom, and left properties of a relatively-


positioned element will cause it to be adjusted away from its normal
position. Other content will not be adjusted to fit into any gap left by
the element.

• This <div> element has position: relative;


<!DOCTYPE html>
<html>
<head>
<style>
div.relative {position: relative; left: 30px;border: 3px solid #73AD21;}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>

</body>
</html>
position: fixed;

• An element with position: fixed; is positioned relative to the viewport, which


means it always stays in the same place even if the page is scrolled. The top,
right, bottom, and left properties are used to position the element.

• A fixed element does not leave a gap in the page where it would normally have
been located.
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {position: fixed;bottom: 0; right: 0; width: 300px; border: 3px solid #73AD21;}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place
even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>
position: absolute;

• An element with position: absolute; is positioned relative to the nearest


positioned ancestor (instead of positioned relative to the viewport, like
fixed).

• However; if an absolute positioned element has no positioned


ancestors, it uses the document body, and moves along with page
scrolling.

• Note: Absolute positioned elements are removed from the normal flow,
and can overlap elements.
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {position: relative; width: 400px;height: 200px;border: 3px solid #73AD21;}
div.absolute {position: absolute;top: 80px;right: 0;width: 200px;height: 100px;border: 3px solid #73AD21;}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative
to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;


<div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>
position: sticky;

• An element with position: sticky; is positioned based on the user's


scroll position.

• A sticky element toggles between relative and fixed, depending on


the scroll position. It is positioned relative until a given offset position
is met in the viewport - then it "sticks" in place (like position:fixed).
<style>
div.sticky { position: -webkit-sticky; position: sticky; top: 0;padding: 5px;background-color: #cae8ca; border: 2px solid
#4CAF50;}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut
quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut
quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
</div>
</body>
</html>
HTML SCROLL BARS
::-webkit-scrollbar — the entire scrollbar.

::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards
that scroll one line at a time).

::-webkit-scrollbar-thumb — the draggable scrolling handle.

::-webkit-scrollbar-track — the track (progress bar) of the scrollbar, where there is a gray bar on top
of a white bar.

::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle.

::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical
scrollbars meet This is often the bottom-right corner of the browser window.

::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some
elements.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* width */
::-webkit-scrollbar { width: 10px;}

/* Track */
::-webkit-scrollbar-track {background: #f1f1f1; }

/* Handle */
::-webkit-scrollbar-thumb {background: #888; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #555; }
</style>
</head>
<body>

<h2>Custom Scrollbar Example</h2>

<p><strong>Note:</strong> The -webkit-scrollbar is not supported in Firefox or in Edge, prior version 79.</p>

<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>

• </body>
• </html>
Dropdown

• A dropdown menu is a toggleable menu that allows the user to


choose one value from a predefined list:
<style>
.dropbtn { background-color: #0415aa; color: white; padding: 16px; font-
size: 16px; border: none; }
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; background-color:
#f1f1f1;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index:
1;}
.dropdown-content a { color: black; padding: 12px 16px;
text-decoration: none; display: block; }
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #8e5b3e;}
</style>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
Forms

• An HTML form is used to collect user input. The user input is most often sent to a server for processing
<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>
The <form> Element

• The HTML <form> element is used to create an HTML form for user input:
• The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.
• The <input> Element
• The HTML <input> element is the most used form element.

• An <input> element can be displayed in many ways, depending on the type


attribute.
Text Fields The <input type="text"> defines a single-line input field for text input.

<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of text input fields is 20 characters.</p>

</body>
</html>

• Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.
<!DOCTYPE html>
<html>
<body>
<head>
<title>HTML Forms</title>
</head>
<p>Add your details:</p>
<form>
Student Name:<br> <input type="text" name="name">
<br>
Student Subject:<br> <input type="text" name="subject">
<br>
Rank:<br> <input type="text" name="rank">
</form>
</body>
</html>
The <label> Element

• The <label> tag defines a label for many form elements.

• The <label> element is useful for screen-reader users, because the screen-reader will read
out loud the label when the user focus on the input element.

• The <label> element also help users who have difficulty clicking on very small regions (such
as radio buttons or checkboxes) - because when the user clicks the text within the <label>
element, it toggles the radio button/checkbox.

• The for attribute of the <label> tag should be equal to the id attribute of the <input>
element to bind them together.
Radio Buttons

• The <input type="radio"> defines a radio button.

• Radio buttons let a user select ONE of a limited number of choices.


<!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

</body>
</html>
Checkboxes

• The <input type="checkbox"> defines a checkbox.

• Checkboxes let a user select ZERO or MORE options of a limited


number of choices
<!DOCTYPE html>
<html>
<body>

<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>
The Submit Button

• The <input type="submit"> defines a button for submitting the form


data to a form-handler.

• The form-handler is typically a file on the server with a script for


processing input data.

• The form-handler is specified in the form's action attribute.


<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
</body>
</html>
The Name Attribute for <input>

• Notice that each input field must have a name attribute to be


submitted.

• If the name attribute is omitted, the value of the input field will not be
sent at all.
<!DOCTYPE html>
<html>
<body>

<h2>The name Attribute</h2>


<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
<p>Notice that the value of the "First name" field will not be submitted, because the input
element does not have a name attribute.</p>
</body>
</html>
CSS INTRODUCTION
• CSS stands for Cascading Style Sheets. It is the language for describing the
presentation of Web pages, including colors, layout, and fonts, thus
making our web pages presentable to the users.

• CSS is designed to make style sheets for the web. It is independent of


HTML and can be used with any XML-based markup language.
• CSS can also be used to style HTML documents.
• CSS can describe how HTML elements should be displayed
• CSS saves a lot of work. It can control the layout of multiple web pages all
at once
CSS History
 
• 1994: First Proposed by Hakon Wium Lie on 10th October
• 1996: CSS was published on 17th November with influencer Bert Bos
• Later he became co-author of CSS
• 1996: CSS became official with CSS was published in December
• 1997: Created CSS level 2 on 4th November 
• 1998: Published on 12th May
CSS Editors

• Some of the popular editors that are best suited to wire CSS code are as
following:
• Atom
• Visual Studio Code
• Brackets
• Espresso(For Mac OS  User)
• Notepad++(Great for HTML & CSS)
• Komodo Edit (Simple)
• Sublime Text (Best Editor)
css
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers.

Development of large websites, where fonts and color information


were added to every single page, became a long and expensive process.
CSS Syntax

• A CSS rule consists of a selector and a declaration block.

• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by


semicolons.

• Each declaration includes a CSS property name and a value, separated by a


colon.
• Multiple CSS declarations are separated with semicolons, and declaration blocks
are surrounded by curly braces.
CSS
• In this example all <p> elements will be center-aligned, with a red text color:

p{
color: red;
text-align: center;
}

*Note that the style tags are nested within the head tags
CSS Comments
• Comments are used to explain the code, and may help when you edit the
source code at a later date.
• Comments are ignored by browsers

• A CSS comment starts with /* and ends with */.


• Comments can also span multiple lines:
CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to
style.
We can divide CSS selectors into five categories:

• Simple selectors (select elements based on name, id, class)


• Combinator selectors (select elements based on a specific relationship
between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)
The CSS element Selector
• The element selector selects HTML elements based on the element name.

p { text-align: center; color: red;}

Example
Here, all <p> elements on the page will be center-aligned, with a red text color:
CSS Element Selector
<!DOCTYPE html>
<html>
<head>
<style>
p {text-align: center; color: red;}
</style>
</head>

<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>

</html>
The CSS Id Selector

• The id selector uses the id attribute of an HTML element to select a specific


element.

• The id of an element is unique within a page, so the id selector is used to select


one unique element!

• To select an element with a specific id, write a hash (#) character, followed by the
id of the element.

Example
• The CSS rule below will be applied to the HTML element with id="para1":
#para1 {text-align: center; color: blue;}
*NB An Id name cannot start with a number
CSS ID Selector

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {text-align: center; color: blue;}
</style>
</head>

<body>

<p id="para1">Hello, I was styled with css!</p>


<p>This paragraph is not affected by the style.</p>

</body>
</html>
The CSS class Selector
• The class selector selects HTML elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character, followed
by the class name.

Example
.center {text-align: center; color: red;}

In this example all HTML elements with class="center" will be red and center-
aligned:
<!DOCTYPE html>
<html>
<head>
<style>
.center {text-align: center; color: red;}
</style>
</head>

<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>

</html>
The CSS class Selector
You can also specify that only specific HTML elements should be affected by a
class.
Example
p.center {text-align: center; color: red;}

In this example only <p> elements with class="center" will be center-aligned:


The CSS class Selector

<!DOCTYPE html>
<html>
<head>
<style>
p.center {text-align: center; color: red;}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
• HTML elements can also refer to more than one class.

Example
<p class="center large">This paragraph refers to two classes.</p>

In this example the <p> element will be styled according to class="center" and to
class="large":

*A class name cannot start with a number!


<!DOCTYPE html>
<html>
<head>
<style>
p.center {text-align: center; color: red;}
p.large {font-size: 300%;}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-
size.</p>
</body>
</html>
The CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.

Example
* {text-align: center; color: blue;}

This CSS rule will affect every HTML element on the page:
CSS Universal Selector
<!DOCTYPE html>
<html>
<head>
<style>
* { text-align: center; color: blue;}
</style>
</head>

<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>

</html>
The CSS Grouping Selector

• The grouping selector selects all the HTML elements with the same style definitions.
• In the following CSS code (the h1, h2, and p elements have the same style definitions):

h1 {text-align: center; color: red;}


h2 { text-align: center; color: red;}
p {text-align: center; color: red;}

It will be better to group the selectors, to minimize the code.


To group selectors, separate each selector with a comma.
h1, h2, p {text-align: center; color: red;}
CSS Grouping Selector

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p { text-align: center; color: red;}
</style>
</head>

<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
How To Add CSS

• When a browser reads a style sheet, it will format the HTML document
according to the information in the style sheet.

There are three ways of inserting a style sheet:


• External CSS
• Internal CSS
• Inline CSS
External CSS
• With an external style sheet, you can change the look of an entire website
by changing just one file!

• Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.

Example
External styles are defined within the <link> element, inside the <head>
section of an HTML page:
<!DOCTYPE html>
<html>
<head>

<style>
body{background-color: lightblue;}
h1 {color: navy;margin-left: 20px;}
</style>

</head>

<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
External CSS
• An external style sheet can be written in any text editor, and must be
saved with a .css extension.
The external .css file should not contain any HTML tags.

Here is the "mystyle.css" file :


body { background-color: lightblue;}
h1 {color: navy;margin-left: 20px;}

Note: Do not add a space between the property value and the unit (such
as margin-left: 20 px;). The correct way is: margin-left: 20px;
• href points to the location of the external style sheet
• rel must be set to "stylesheet" for linking style sheets
• type must be set to "text/css" for linking to cascading style sheets
Internal CSS

• An internal style sheet may be used if one single HTML page has a
unique style.
• The internal style is defined inside the <style> element, inside the
head section.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Inline CSS

• An inline style may be used to apply a unique style for a single element.
• To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.

*An inline style loses many of the advantages of a style sheet (by mixing
content with presentation). Use this method sparingly.
Multiple Style Sheets
If some properties have been defined for the same selector (element) in different
style sheets, the value from the last read style sheet will be used.
Assume that an external style sheet has the following style for the <h1> element:
h1 {
color: navy;
}
Then, assume that an internal style sheet also has the following style for the <h1>
element:
h1 {
color: orange;
}
Example
If the internal style is defined after the link to the external style sheet,
the <h1> elements will be "orange":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Example
If the internal style is defined after the link to the external style sheet,
the <h1> elements will be "orange":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
CSS Colors
• Colors are specified using predefined color names, or RGB, HEX, HSL,
RGBA (Red-green-blue-alpha), HSLA (Hue-saturation-lightness-alpha )
• CSS/HTML support 140 standard color names.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
CSS Background Color

• You can set the background color for HTML elements:


<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
</p>

</body>
</html>
CSS Text Color

• You can set the color of text:


<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci


tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>
CSS Border Color
• You can set the color of borders:
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>
CSS Color Values
• In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Tomato":</p>


<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>


<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using
RGBA or HSLA color values.</p>

</body>
</html>
CSS RGB Colors

• An RGB color value represents RED, GREEN, and BLUE light sources.

• RGB Value
• In CSS, a color can be specified as an RGB value, using this formula:

• rgb(red, green, blue)

• Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

• For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the
others are set to 0.

• To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

• To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using RGB values</h1>
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>
</body>
</html>
RGBA Value

• RGBA color values are an extension of RGB color values with an alpha
channel - which specifies the opacity for a color.

• An RGBA color value is specified with:

• rgba(red, green, blue, alpha)

• The alpha parameter is a number between 0.0 (fully transparent) and


1.0 (not transparent at all):
• <!DOCTYPE html>
• <html>
• <body>

• <h1>Make transparent colors with RGBA</h1>

• <h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>


• <h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
• <h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
• <h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
• <h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
• <h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>

• </body>
• </html>
CSS HEX Colors

• A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the
components of the color.

• HEX Value
• In CSS, a color can be specified using a hexadecimal value in the form:

• #rrggbb

• Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

• For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

• To display black, set all values to 00, like this: #000000.

• To display white, set all values to ff, like this: #ffffff.


• <!DOCTYPE html>
• <html>
• <body>

• <h1>Specify colors using HEX values</h1>

• <h2 style="background-color:#ff0000;">#ff0000</h2>
• <h2 style="background-color:#0000ff;">#0000ff</h2>
• <h2 style="background-color:#3cb371;">#3cb371</h2>
• <h2 style="background-color:#ee82ee;">#ee82ee</h2>
• <h2 style="background-color:#ffa500;">#ffa500</h2>
• <h2 style="background-color:#6a5acd;">#6a5acd</h2>

• </body>
• </html>
3 Digit HEX Value

• Sometimes you will see a 3-digit hex code in the CSS source.

• The 3-digit hex code is a shorthand for some 6-digit hex codes.

• The 3-digit hex code has the following form:

• #rgb

• Where r, g, and b represents the red, green, and blue components with values between 0 and f.

• The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for
each components. So, if we have #ff00cc, it can be written like this: #f0c.
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• background-color: #fc9; /* same as #ffcc99 */
•}

• h1 {
• color: #f0f; /* same as #ff00ff */
•}

•p{
• color: #b58; /* same as #bb5588 */
•}
• </style>
• </head>
• <body>

• <h1>CSS 3-digit Hex Code</h1>


• <p>This is a paragraph.</p>

• </body>
• </html>
CSS HSL Colors

• HSL stands for hue, saturation, and lightness.

• HSL Value
• In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:

• hsl(hue, saturation, lightness)

• Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

• Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.

• Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
• <!DOCTYPE html>
• <html>
• <body>

• <h1>Specify colors using HSL values</h1>

• <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>


• <h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
• <h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
• <h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
• <h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
• <h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>

• </body>
• </html>
CSS Backgrounds
• CSS Backgrounds
• The CSS background properties are used to add background effects for
elements.
• CSS background-color
• The background-color property specifies the background color of an
element.
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• background-color: lightblue;
•}
• </style>
• </head>
• <body>

• <h1>Hello World!</h1>

• <p>This page has a light blue background color!</p>

• </body>
• </html>
Other Elements

• You can set the background color for any HTML elements:
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• h1 {
• background-color: green;
•}

• div {
• background-color: lightblue;
•}

• p{
• background-color: yellow;
•}
• </style>
• </head>
• <body>

• <h1>CSS background-color example!</h1>


• <div>
• This is a text inside a div element.
• <p>This paragraph has its own background color.</p>
• We are still in the div element.
• </div>

• </body>
• </html>
Opacity / Transparency

• The opacity property specifies the opacity/transparency of an


element. It can take a value from 0.0 - 1.0. The lower value, the more
transparent:
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• div {
• background-color: green;
•}

• div.first {
• opacity: 0.1;
•}

• div.second {
• opacity: 0.3;
•}

• div.third {
• opacity: 0.6;
•}
• </style>
• </head>
• <body>
• <h1>Transparent Boxes</h1>

• <p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This
can make the text inside a fully transparent element hard to read:</p>

• <div class="first">
• <h1>opacity 0.1</h1>
• </div>

• <div class="second">
• <h1>opacity 0.3</h1>
• </div>

• <div class="third">
• <h1>opacity 0.6</h1>
• </div>

• <div>
• <h1>opacity 1 (default)</h1>
• </div>

• </body>
• </html>

You might also like