HTML&CSS Bells
HTML&CSS Bells
HTML INTRODUCTION
• 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.
• The most widely used version throughout the 2000's was HTML 4.01, which became
an official standard in December 1999.
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>.
• Some HTML elements have no content (like the <br> element). These
elements are called empty elements.
• A browser does not display the HTML tags, but uses them to determine
how to display the document:
HTML Syntax
<!DOCTYPE html>
<html>
</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).
<!DOCTYPE html>
• The <html> element is the root element of an HTML page
• 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).
<!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.
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Headings Continued
• 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
</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>
</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 are always specified in the start tag i.e Links, and images
Example
<a href="https://www.google.com">This is a link</a>
_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>
Use the href attribute to create a link to any document on your system
MODULE 2
HTML Attributes, src for Images
• 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">
• You can modify to control the dimensions and shape of the image
• 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.
• 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:
• 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>
</body>
</html>
Internal CSS
• An internal CSS is used to define a style for a single HTML page.
• 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.
<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
<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>
</body>
</html>
Fonts
The CSS font-family property defines the font to be used for an HTML element:
<!DOCTYPE html>
<html>
<body>
</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>
</body>
</html>
HTML Text Formatting Elements
Bold Italics Subscripts and superscripts
<!DOCTYPE html>
<html>
<body>
</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.
</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.
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.
• 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>
<p>
My WebPage Video
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
</body>
</html>
• The controls attribute adds video controls, like play, pause, and
volume.
</body>
</html>
Muted Autoplay
• Add muted after autoplay to let your video start playing automatically (but muted):
<!DOCTYPE html>
<html>
<body>
</body>
</html>
YouTube videos
• 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>
src="https://www.youtube.com/embed/tdW0Gv9WDP4?autoplay=
• There are three easy methods you can use to center a video rendered
inside your HTML document.
• Applying margin: auto 0px and display:block styles to the video element
itself
<center>
</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.
• 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
• 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
<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.
• 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
<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>
<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 unordered list items will be marked with bullets (small black circles) by default:
• 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>
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
Unordered List without Bullets
<body>
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
Description lists
<body>
</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.
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>
</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).
<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.
<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>
</body>
</html>
HTML Layout Elements and Techniques
• <details> - Defines additional details that the user can open and close on demand
<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;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* 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.
• 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
<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
• 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
• 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).
<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
• <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.
• 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.
• 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;
</body>
</html>
position: fixed;
• 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;
• 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>
</body>
</html>
position: sticky;
::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards
that scroll one line at a time).
::-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>
<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
<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.
<!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> 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
<h2>Radio Buttons</h2>
<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
<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
• If the name attribute is omitted, the value of the input field will not be
sent at all.
<!DOCTYPE html>
<html>
<body>
• 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.
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
CSS selectors are used to "find" (or select) the HTML elements you want to
style.
We can divide CSS selectors into five categories:
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
• 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>
</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;}
<!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":
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):
<!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.
• 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.
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
</body>
</html>
CSS Text Color
</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>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:
• 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.
• </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).
• <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.
• #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>
• </body>
• </html>
CSS HSL Colors
• HSL Value
• In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:
• 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>
• </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>
• </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>
• </body>
• </html>
Opacity / Transparency
• 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>