CHAPTER 2: MARKUP LANGUAGE HTML & CSS

CHAPTER 2 MARKUP LANGUAGE HTML & CSS

Content :
2.1. Introduction
2.2. HTML history
2.3. HTML editors
2.4. HTML elements
2.5. HTML attributs
2.6. Structure of an HTML document
2.7. Basic elements of an HTML document
2.8. HTML tables
2.9. HTML styles - CSS
2.10. HTML Iframes
2.11. HTML Forms
2.12. Exercises

2.1. INTRODUCTION
HTML (Hypertext Markup Language) is a fundamental language used for creating and structuring the content of
web pages. It forms the backbone of the World Wide Web, providing a standardized way to describe the structure
and presentation of information on the internet. HTML uses a set of markup tags to define elements within a
document, allowing browsers to interpret and display the content accordingly.
HTML offers a wide range of elements and attributes to structure and present content on the web. It also allows
you to create links, forms, tables, lists, and much more. We should also note that HTML is a markup language,
not a programming language, as it focuses on describing the structure and presentation of content rather than
performing calculations or operations.
In this chapter, we will help students to master the basics of the HTML because understanding HTML is essential
for anyone involved in web development, as it forms the foundation for building modern and engaging websites.

2.2. HTML HISTORY

HTML has a rich history that dates back to the early days of the World Wide Web. In this section we give a brief
overview of the history of HTML:
Key events Description
Development of HTML In the late 1980s, Tim Berners-Lee, a British
scientist, invented the World Wide Web
while working at CERN (European
Organization for Nuclear Research). As part
of his work, he developed the first version
of HTML to create and structure web pages.
The initial HTML was a simple language with limited formatting capabilities.
HTML 2.0 In 1995, HTML 2.0 was released as an official specification by the Internet
Engineering Task Force (IETF)1. This version introduced new features like tables,
image maps, and form elements, which enhanced the capabilities of web pages.
HTML 3.2 HTML 3.2, released in 1997, added more features such as improved table support,
text formatting options, and the ability to include background images. This

1
https://www.ietf.org/

1|Page
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

version played a significant role in the popularization of the web and the growth
of the early web industry.
HTML 4.01 HTML 4.01, released in 1999, introduced even more features and improvements,
including support for frames, scripting languages like JavaScript, and cascading
style sheets (CSS). This version remained widely used for many years and formed
the foundation of many websites.
XHTML Extensible HyperText Markup Language (XHTML) was introduced in 2000 as a
reformulation of HTML 4.01 using the stricter rules of XML (eXtensible Markup
Language). XHTML aimed to bring the structure of XML to HTML, making it
more compatible with other XML-based technologies. XHTML 1.0 was a bridge
between HTML and XML, but its adoption was very limited.
HTML5 HTML5 is the latest major version of HTML, introduced in 2014. It is a significant
advancement that includes new semantic elements, multimedia support (video and
audio), canvas for graphics, local storage capabilities, and improved form
handling. HTML5 also supports mobile devices, making it suitable for creating
responsive and mobile-friendly websites.
HTML5 brought a shift in web development by reducing the reliance on browser
plugins, such as Adobe Flash, for multimedia content and introducing native
support for various media types.

Table 2.1: Key events in the HTML development

Since its inception, HTML has evolved to meet the demands of an ever-changing web landscape. The latest
version, HTML5, continues to be widely used and serves as the foundation for building modern web applications
and websites. Figure 2.1 shows the key HTLM release years.

Figure 2.1: HTLM release years

2.3. HTML EDITORS

A simple text editor is all you need to learn HTML. In particular, for learning HTML, I recommend a simple text
editor like Notepad (PC) or TextEdit (Mac). Because using a simple text editor is a good way to learn HTML. In
this manuscript, I recommend students to use Notepad++, or Sublime.
▪ Notepad++2 : Notepad++ (made by notepad-plus-plus.org) is a free text and
source code editor for use with Microsoft Windows. It supports tabbed editing,
which allows working with multiple open files in a single window. Notepad++
can be used for an extensive range of things, most notably it can be used to open
code files written for programming languages such as Python, JavaScript, PHP,
etc. It keeps the layout and structure of the code when you open or edit it, making
it easy to save and run.
Link for download: https://notepad-plus-plus.org/downloads/

▪ Sublime text3: Sublime Text is a popular and versatile text editor used for coding and programming. It
is known for its speed, simplicity, and powerful features that enhance the coding experience. Sublime
Text is available for Windows, macOS, and Linux, making it accessible to developers on different

2
https://notepad-plus-plus.org/downloads/
3
https://www.sublimetext.com/

2|Page
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

operating systems. Its combination of a clean interface, powerful features, and a vibrant community of
users and plugin developers has made it a preferred choice for many programmers.
Link for download: https://www.sublimetext.com/
The following steps describe how to create your first web page with Notepad++ or sublime.
To start a new HTML page, first create a new file in Sublime Text and save it with the .html extension. This will
set the syntax of your document to HTML. Then write or copy the following HTML code into sublime .

Figure 2.2: Code HTML of the new file in Sublime Text

In this step, open the saved HTML file in your favourite browser (double click on the file, or right-click - and
choose "Open with"), then select the browser.

Figure 2.3: Saved HTML file in the Firefox browser

2.4. HTML ELEMENTS

An HTML file is made of elements. These elements are responsible for creating web pages and define content in
that webpage. An element in HTML usually consists of a start tag, close tag and content inserted between them.
Technically, an element is a collection of start tag, attributes, end tag, content between them.

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

The HTML element is everything from the start tag to the end tag, as shown in the following examples:

3|Page
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

Figure 2.4: The structure on a HTML element

Note: It is worth to mention that some HTML elements have no content (like the <br> element). These elements
are called empty elements. Empty elements do not have an end tag. The table below shows the basic structure of
an HTML element.

Start Tag Element content End Tag

<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none

2.5. HTML ATTRIBUTES

HTML attributes provide additional information about HTML elements.
▪ All HTML elements can have attributes
▪ Attributes provide additional information about elements
▪ Attributes are always specified in the start tag
▪ Attributes usually come in name/value pairs like: name="value"
Examples of some important attributes:
1) Language attribute (lang): You should always include the lang attribute inside the <html> tag, to
declare the language of the Web page. This is meant to assist search engines and browsers. The following
example specifies English as the language:
2) Title attribute (title): The title attribute defines some extra information about an element. The value of
the title attribute will be displayed as a tooltip when you mouse over the element. Below is an example
of a title of a paragraph in the html document.
3) Background colour attribute (bgcolor): This attribute specifies the background colour of the element.
In this example, the background colour of the web page is set to red:
4) Hyperlink attribute (href): In the <a> tag that defines a hyperlink, the href attribute specifies the
URL of the page the link goes to, as shown in the example bellow.
<html lang="en"> --> Language attribute
<p title="I'm a tooltip">This is a paragraph.</p> --> title attribute
<body bgcolor="red"> --> background attribute
< a href="https://www.google.com">Google website</a> --> Hyperlink attribute
<table width=50%> --> Width of an html table attribute

2.6. STRUCTURE OF AN HTML DOCUMENT

An HTML Document is mainly divided into two parts:

▪ HEAD: The <head> element is a container for metadata (data about data) and is placed between the
<html> tag and the <body> tag. Metadata typically define the document title <title>, character set
<meta>, styles <style>, scripts <script>, and other meta information.
Data stored in the <head> tag is not displayed to the user; it is just written for reference purposes and as
a watermark of the owner.

4|Page
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

▪ BODY: This contains everything you want to display on the Web Page. A body tag <body> is used to
enclose all the data which a web page has from texts to links. All the content that you see rendered in the
browser is contained within this element.
The example below shows the basic structure of a simple HTML Document.

<!DOCTYPE html> <!--Tell the document type -->

<html lang="en"> <!--The root element -->
<head> <!--contain headers information -->
<title>Page Title</title> <!--define the title of the page -->
</head>
<body bgcolor= "Pink"> <!--holds the content of the page -->

<h1>My First Heading</h1>

<p> My first paragraph.</p>

</body>
</html> <!--end of the HTML document -->

Example Explained
▪ The <!DOCTYPE html> declaration defines that this document is an HTML5 document. All HTML
documents must start with a document type declaration. It must only appear once, at the top of the page
(before any HTML tags). This declaration represents the document type, and helps browsers to display
web pages correctly. In addition, it is not case sensitive.
▪ The <html> element is the root element of an HTML page. In fact, the HTML document itself begins
with <html> and ends with </html>.
▪ The <head> element contains meta information about the HTML page. In another word, it contains
machine-readable information (metadata) about the document, like its title, scripts, and style sheets. It is
always placed between the <html> tag and the <body> tag.
▪ 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 title must be text-only, and must be the precise description of a page's content.
▪ 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. It must be the second element of the <html>
element and follows the head element.
▪ The <h1> element defines a large heading (titles or subtitles that you want to display on a webpage).
▪ The <p> element defines a paragraph. A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and after a paragraph.

Note (HTML COMMENT TAG): HTML comments are not displayed in the browser, but they can help
document your HTML source code. You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

Exercise: Write an HTML program to create a webpage to print your first name, last name, and city name in red
colour. The web page should have a green background. The <font> tag was used in HTML 4 to specify the font
face, font size, and colour of text.

5|Page
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Page</title>
</head>

<body bgcolor= "green">

<h1>Personal information</h1>
<font color="black">My name is :</font>
<font color="red">Ali Mohammed</font><br>
<font color="black">My city is: </font>
<font color="red">Constantine </font>

</body>
</html>

2.7. BASIC ELEMENTS OF AN HTML DOCUMENT

In this section, we will cover the most important elements that can be used in a basic HTML web page.
1) The meta element: The <meta> element is typically used in the head section to specify the character set
page description, keywords, author of the document, and viewport settings.

<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8", http-equiv="content-type", content="text/html">
character set used
<meta name="description" content="Tutorials"> Description of the web page
<meta name="author" content="John Doe"> The author of a page
<meta name="keywords" content="HTML, CSS"> Keywords for search engines
<meta http-equiv="refresh" content="30"> Refresh document every 30 seconds
<title>My First Page</title>
</head>

<body>
<h1>This is an html document</h1>

</body>
</html>

Note: utf-8 has the advantage of being able to represent all the characters of Unicode in a manner
compatible with the old ASCII encoding.
2) HTML Headings: HTML headings are titles or subtitles that you want to display on a webpage. They
are defined with the <h1> to <h6> tags. <h1> defines the most important heading, while <h6> defines
the least important heading. Search engines use the headings to index the structure and content of your
web pages. Thus, it is important to use headings to show the document structure.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

6|Page
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

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:
<h1 style="font-size:60px;">Heading 1</h1>

3) HTML paragraph: A paragraph always starts on a new line, and is usually a block of text. Browsers
automatically add some white space (a margin) before and after a paragraph. The HTML <p> element is
used to define a paragraph.

<p>A courses about web technologies for master students.</p>

<p>It contains well written, well thought chapters.</p>

4) HTML Horizontal Rules: The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule. It is usually used to separate content (or define a change) in an HTML
page. The <hr> tag is an empty tag, which means that it has no end tag, as shown in the example bellow.
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>

<body bgcolor="LightBlue" >

<h1>This is heading 1</h1>

<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

</body>
</html>

5) HTML Line Breaks: The HTML <br> element defines a line break (a new line) without starting a new
paragraph. It is also an empty tag, which means that it has no end tag.
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body bgcolor="yellowgreen" >
<p>This is<br>a paragraph<br>
with line breaks. </p>
</body>
</html>

6) HTML Formatting Elements: HTML contains several elements for defining text with a special
meaning. The most important are:
<b> - Bold text <small> - Smaller text
<strong> - Important text <del> - Deleted text
<i> - Italic text <ins> - Inserted text

7|Page
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

<em> - Emphasized text <sub> - Subscript text

<mark> - Marked text <sup> - Superscript text

Examples:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body bgcolor="LightSalmon">

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

<p><strong>This text is important!</strong>.</p>
<p><i>This text is italic</i>.</p>
<p><em>This text is emphasized</em>.</p>
<p><small>This is some smaller text.</small>.</p>
<p>Do not forget to buy<mark>milk</mark>today.</p>
<p>My favourite colour is <del>blue</del> red.</p>
<p>My favourite colour
is <del>blue</del> <ins>red</ins>.</p>
<p>This is _subscripted text.</p>
<p>This is ^{superscripted} text.</p>

</body>
</html>

7) HTML Links: HTML links are hyperlinks; you can click on a link and jump to another document. When
you move the mouse over a link, the mouse arrow will turn into a little hand. The HTML <a> tag defines
a hyperlink. The example bellow shows how to create a link to www.google.com:

<a href="https://www.google.com/">Visit google.com!</a>

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
But they can of course be styled with CSS, to get another look!
Note: you can use an image as a link, just put the <img> tag inside the <a> tag.
<a href="index.html">
<img src="smiley.gif" style="width:42px;height:42px;">
</a>

HTML links have some attributes that can be used for more features, as shown in the table below.
Attribute Description
target The target attribute specifies where to open the linked document. It 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.

Example: open the linked document in a new browser window or tab

8|Page
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

<a href="https://www.google.com/" target="_blank">Visit google!</a>

href Indicates the link's destination. Clicking on the link text, will send the reader to
▪ URL address, <p><a href="www.google.com">CSS Tutorial</a></p>
▪ Document, <p><a href="courses.pdf">My courses</a></p>
▪ Email address, <a href="mailto:[email protected]">Send
email</a>

title This attribute specifies extra information about an element. The information is most
often shown as a tooltip text when the mouse moves over the element.
<a href="https://www.umc.com/html/" title="Go to google HTML
section">
Visit our HTML Tutorial
</a>

8) HTML Lists: HTML lists allow web developers to group a set of related items in lists.
▪ Unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will
be marked with bullets (small black circles) by default.
▪ Ordered HTML 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 example below shows the two types of html lists
<!DOCTYPE html>
<html>
<body bgcolor="gold">

<h3>This is an unordered list </h3>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h3>This is an ordered list </h3>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

9) HTML Images: Images can improve the design and the appearance of a web page. The HTML <img>
tag is used to embed an image in a web page. It is an empty tag, it contains attributes only, and does not
have a closing tag. It has two required attributes src and alt, and other optional attributes as shown in
the table below.
Attribute Description

src Specifies the path to the image

<img src="img_chania.jpg" alt="Flowers in Chania">
alt Specifies an alternate text for the image. The value of this attribute should describe the image.
If a browser cannot find an image, it will display the value of the alt attribute.
<img src="img_chania.jpg" alt="Flowers in Chania">
title The title attribute on an <img> tag adds a tooltip with title text to the image. Hovering the mouse
over the image will display the tooltip.
<img src="vangogh.jpg" title="Van Gogh, Self-portrait.">

9|Page
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

Width, You can use the width and height attributes to specify the width and height of an image.
height <img src="girle.jpg" alt="Girl in a jacket" width="500" height="600"

Style You can also use the style attribute to specify the width and height of an image.
<img src="girle.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">

Note (Relative URL): it is a link to an image that is hosted within the website. Here, the URL does not
include the domain name.
▪ If the URL begins without a slash, it will be relative to the current page.
o Example: src="img_food.jpg"
▪ If the URL begins with a slash, it will be relative to the domain.
o Example: src="/images/img_food.jpg"
10) HTML colours: HTML colours are specified with predefined colour names (HTML supports 140
standard colour names), or with RGB, HEX, HSL, RGBA, or HSLA values.
All modern browsers support the following 140 colour names. The following figure shows the 140
colour names as background-colours along with their Hex code.

10 | P a g e
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

Note 01: in HTML, colours can also be specified using RGB values. An RGB colour value is specified with:
rgb (red, green, blue). Each parameter (red, green, and blue) defines the intensity of the colour with a value
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 other
two (green and blue) are set to 0.
▪ To display black, set all colour parameters to 0, like this: rgb(0, 0, 0) and for the white colour, set all colour
parameters to 255, like this: rgb(255, 255, 255).

Note 02: hexadecimal colour is specified with: #rrggbb. Where rr (red), gg (green) and bb (blue) are hexadecimal
integers between 00 and ff, specifying the intensity of the colour.
▪ For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two
(green and blue) are set to 00.
▪ Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the
other two (red and blue) are set to 00.
▪ To display black, set all colour parameters to 00, like this: #000000.
▪ To display white, set all colour parameters to ff, like this: #ffffff.

2.8. HTML TABLES

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and
columns of cells. They are created using the <table> tag in which the <tr> tag is used to create table rows and
<td> tag is used to create data cells. The elements under <td> are regular and left aligned by default.

Example: in this example, the border is an attribute of <table> tag and it is used to put a border across all the
cells. If you do not need a border, then you can use border="0".

<!DOCTYPE html>
<html>
<body bgcolor="bisque">
<h3>This is a table </h3>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

The most important features of html tables are:

1) HTML Table Headers: Table heading can be defined using <th> tag. This tag will be put to replace
<td> tag, which is used to represent actual data cell.
▪ Normally you will put the top row as table heading as shown below, otherwise you can use <th>
element in any row.
▪ Headings, which are defined in <th> tag are centred and bold by default, as shown in the example.

11 | P a g e
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body bgcolor="bisque">

<h3>This is a table with header </h3>

<table border = "1">
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Amine</td>
<td>Malika</td>
<td>Sami</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
</body>
</html>

2) HTML Table Colspan & Rowspan: HTML tables can have cells that span over multiple rows and/or
columns, as shown in the examples below:

To make a cell span over multiple rows, use the rowspan attribute. The value of this attribute represents
the number of rows to span, as shown in the examples below.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body bgcolor="bisque">
<h3>This is a table with merged cells </h3>
<table border = "1">
<tr>
<th>Name</th>
<td>Karim</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>(+213)77758962</td>
</tr>
<tr>
<td>(+213)78726053</td>
</tr>
</table>
</body>
</html>

12 | P a g e
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

To make a cell span over multiple columns, use the colspan attribute. The value of this attribute
represents the number of columns to span, as shown in the examples below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body bgcolor="bisque">
<h3>This is a table with merged cells </h3>
<table border = "1">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Malik</td>
<td>Ali</td>
<td>44</td>
</tr>
<tr>
<td>Salim</td>
<td>Rida</td>
<td>57</td>
</tr>
</table>
</body>
</html>

Exercise: write a program to create an HTML table having the following output:

Solution:
<!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<table style="border: 1px solid black" width="25%">
<tr bgcolor="lightblue"><th colspan="6">STUDENTS MARK SHEET</tr>
<tr bgcolor="gold">
<th>Name</th>
<th>Maths</th>
<th>Science</th>
<th>English</th>
</tr>
<tr bgcolor="lightgreen">
<td>Amine</td>
<td>85</td>
<td>87</td>
<td>88</td>
</tr>
<tr bgcolor="limegreen">
<td>Samia</td>
<td>33</td>
<td>96</td>
<td>58</td>
</tr>
</body>
</html>

13 | P a g e
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

2.9. HTML STYLES – CSS

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written
in HTML. It was first proposed by Håkon Wium Lie in 1994 and later developed by Lie and Bert Bos. The table
below presents a brief history of CSS (Error! Reference source not found.).

Period Most important events

Origins Håkon Wium Lie, while working at CERN (the European Organization for Nuclear
(1994-1996) Research), proposed the concept of CSS in 1994 as a way to separate the structure and
content of a webpage from its presentation.
In 1996, CSS1 was introduced as a recommendation by the World Wide Web Consortium
(W3C). It provided a basic set of styling properties and selectors.
CSS2 CSS2 was introduced as a recommendation by the W3C in 1998. It expanded the
(1998-2011) capabilities of CSS1 with new features like positioning, floating elements, and improved
support for internationalization. However, due to various browser inconsistencies and lack
of full support, CSS2 took several years to be widely adopted
CSS3 Rather than being a single specification, CSS3 is a collection of individual modules that
(2001-2011) introduced many new features and improvements. It aimed to enhance the capabilities of
CSS for web designers and developers. Some notable modules include Selectors, Box
Model, Backgrounds and Borders, Transitions, Animations, and more. CSS3 development
continued until 2011, with new modules being added to the specification
CSS4 The concept of CSS4 was initially proposed, but the CSS Working Group decided to move
(Work in away from version numbers and focus on individual modules instead. Therefore, the
Progress) development of CSS4 was abandoned, and the CSS Working Group now releases new
modules as independent specifications under the CSS umbrella.

Table 2.2: History of CSS

2.9.1. CSS BASICS

Like HTML, Cascading Style Sheets (CSS) is not a programming language. It is not a markup language either.
CSS is a style sheet language. CSS is used to selectively style HTML elements. For example, with CSS, you can
control the colour, font, the size of text, the spacing between elements, how elements are positioned and laid out,
what background images or background colours are to be used, different displays for different devices and screen
sizes, and much more.
The word cascading means that a style applied to a parent element will also apply to all children elements within
the parent. So, if you set the colour of the body text to "blue", all headings, paragraphs, and other text elements
within the body will also get the same colour (unless you specify something else).
CSS is a rule or set of rules that describe the formatting (change of appearance) of individual elements on a web
page. The rule consists of two parts: the selector and the next declaration block. The image below shows the
structure (syntax) of the rule:

Figure 2.5: Basic structure of CSS rules

14 | P a g e
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

▪ Selector: The first element in the rule is always the selector, it tells the browser which element or
elements of the web page will be styled.
▪ Declaration block: This block begins with the opening curly brace { and ends with the closing }, between
the curly braces are specified formatting commands (declarations), which are used by the browser to
stylize the selected selector element. You can specify as many declarations as you want in a block. The
declaration block itself is also called style.
▪ Declarations: Each declaration consists of two parts: the property and its value. The declaration must
always end with a semicolon (;). You can omit the “;” only at the end of the last declaration before the
closing curly brace.
▪ Properties: A property is a formatting command that defines a specific style effect for an element. The
property itself is a word or several words written through a hyphen. Each property has its own predefined
set of values. After the property name, a colon is specified, which separates the property name from the
valid value.
Example: the example below presents examples of CSS rules with some commonly used CSS properties.
<!DOCTYPE html>
<html>
<head>
<title>My Style</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
border: 2px solid gold;
padding: 30px;
margin: 50px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Explained example
▪ The CSS color property defines the text colour to be used.
▪ The CSS font-family property defines the font to be used.
▪ The CSS font-size property defines the text size to be used.
▪ The CSS border property defines a border around an HTML element.
▪ The CSS padding property defines a padding (space) between the text and the border.
▪ The CSS margin property defines a margin (space) outside the border.

2.9.2. CSS IN HTML DOCUMENT

CSS can be added to HTML documents in 3 ways:

15 | P a g e
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

▪ Inline CSS: You can apply inline styles directly to an HTML element using the "style" attribute. An
inline CSS is used to apply a unique style to a single HTML element. The following example sets the
text colour of the <h1> element to blue, and the text colour of the <p> element to red.
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

▪ Internal CSS: An internal CSS is used to define a style for a single HTML page. You can define styles
within the <style> tags in the <head> section of the HTML document.
The following example sets the text colour of ALL the <h1> elements (on that HTML page) to blue, and
the text colour of ALL the <p> elements to red. In addition, the page will be displayed with a
"powderblue" background colour:
<!DOCTYPE html>
<html>
<head>
<title>My Style</title>
<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 .You can link
an external CSS file to your HTML documents using the <link> tag in the <head> section of each
HTML page. In this case, 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.
The HTML document The style file (styles.css)
<!DOCTYPE html>
<html> body {
<head> background-color: powderblue;
<link rel="stylesheet" href="styles.css"> }
</head>
<body> h1 {
color: blue;
}
<h1>This is a heading</h1>
<p>This is a paragraph.</p> p {
color: red;
</body> }
</html>

2.9.3. CSS SELECTORS

The term selector can refer to a simple selector, a compound selector, a complex selector, or a selector list. 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)

16 | P a g e
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

Selector category Description & Examples

Element name Here, all <p> elements on the page will be center-aligned, with a red text colour:
selector p {
text-align: center;
color: red;
}
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. Here, The CSS rule below will be applied only to the HTML element
with id="para1":
#para1 {
text-align: center;
color: red;
}
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.
Here, all HTML elements with class="center" will be red and center-aligned.
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be affected by a class.
Here, only <p> elements with class="center" will be red and center-aligned:
p.center {
text-align: center;
color: red;
}
HTML elements can also refer to more than one class. Here, the <p> element will be
styled according to class="center" and to class="large":
<p class="center large">This paragraph refers to two classes.</p>

Universal The universal selector (*) selects all HTML elements on the page. Here, The CSS rule
Selector will affect every HTML element on the page:
* {
text-align: center;
color: blue;
}
Grouping The grouping selector selects all the HTML elements with the same style definitions.
Selector Here, the h1, h2, and p elements have the same style definitions:
h1, h2, p {
text-align: center;
color: red;
}

Table 2.3: CSS simple selectors categories

Exercise (Creation of two boxes one after another). For that, create two div elements in html and add a class
to each of the div element. The classes can be used to style the div element.

Box 1 has following style properties:

1) height of 200px
2) width of 300px
3) background colour red
4) border width of 5px
5) border colour green
6) margin of 5px

17 | P a g e
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

7) Add text inside the box and place it at the centre from both sides
Box 2 has similar properties of box 1 with some changes:
1) background colour blue
2) border colour yellow

Solution: The <div> tag defines a division or a section in an HTML document. It is used as a container for
HTML elements - which is then styled with CSS or manipulated with JavaScript. The <div> tag is easily styled
by using the class or id attribute and any sort of content can be put inside it.

<!DOCTYPE html>
<html>
<head>
<style>
section {
display: flex;
flex-direction: column;
align-items: flex-end
}

.red_box { < -- Classe of the first box-- >

border: 5px solid green;
padding: 0.5em;
width: 300px;
height: 200px;
background-color:red;
margin: 10px;
color: white;
text-align: center;
}

.blue_box { < -- Classe of the second box-- >

border: 5px solid yellow;
padding: 0.5em;
width: 300px;
height: 200px;
background-color:blue;
text-align: center;
margin: 10px;
color: white;
}
</style>
</head>
<body>
<section>
<div class="red_box">Box 1</div> < -- Classe of the second box-- >
<div class="blue_box">Box 2</div> < -- Classe of the second box-- >
</section>
</body>
</html>

2.10. HTML IFRAMES

An HTML iframe is used to display a web page within a web page.

▪ Inline frame element: The HTML <iframe> tag specifies an inline frame. An inline frame is used to
embed another document within the current HTML document.
Note: it is a good practice to always include a title attribute for the iframe element. This is used by screen
readers to read out what the content of the iframe is.

18 | P a g e
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

▪ Heigh and Width attributes: these attributes are used to specify the hight and width of the iframe. They
are specified in pixels by default.
▪ Remove the border: iframe has a border around it by default. To remove the border, you can use in the
attribute style, the property CSS border with the value none. With CSS, you can also change the size,
style and colour of the iframe’s border.
<iframe src="demo.html" height="200" width="300" title="iframe example"
style=="border:none;" >
</iframe>

Example of using frames: the first column is the main page entitled “frames.html” and the frame is linked to the
second webpage demo.html” in the second column.
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>frames</title> <title>demo</title>
</head> <style>
<body bgcolor=“bisque”> body {background-color:
powderblue;}
<h1> This is the main html page </h1> h1{color: blue;}
</style>
<iframe src="demo.html" height="100"
width="300" title="iframe example" </head>
<body>
style=="border:none;" >
<h1> I am a Frame </h1>
</iframe>
</body>
</body> </html>
</html>

After running the code, we got the following result

Iframe - Target for a Link: An iframe can be used as the target frame for a link. In this case, the target attribute
of the link must refer to the name attribute of the iframe.
Example:

<iframe src="demo.html" height="200" width="300" title="iframe example"

name="iframe_demo" style=="border:none;" >
</iframe>

<p><a href="demo.html" target="iframe_demo">Link to my iframe</a></p>

2.11. HTML FORMS

An HTML form is used to collect user input. The user input is most often sent to a server for processing. The
HTML <form> element is used to create an HTML form for user input. It is a container for different types of
input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

19 | P a g e
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

The most important attributes for the HTML <form> element include:

▪ The Action Attribute: This attribute defines the action to be performed when the form is submitted.
Usually, the form data is sent to a file on the server when the user clicks on the submit button.
▪ The name Attribute: Specifies the name of the form.
▪ The Target Attribute: This attribute specifies where to display the response that is received after
submitting the form. It can have one of the following values:
o _blank: The response is displayed in a new window or tab.
o _self: The response is displayed in the current window
o _parent: The response is displayed in the parent frame
o _top: The response is displayed in the full body of the window
o Framename: The response is displayed in a named iframe
▪ The Method Attribute: This attribute specifies the HTTP method to be used when submitting the form
data. The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with
method="post"). The default HTTP method when submitting form data is GET. However, it is
recommended to do not use GET to send sensitive data because the submitted form data is visible in the
URL.
Example:

<form name="myforme" action="/action_page.php" target="_blank" method="get">

The HTML <form> element can contain one or more of the following form elements:

Element Description
<input> It is one of the most used form elements. element can be displayed in several ways,
depending on the type attribute, as shown in the table below:
Each input field must have a name attribute to be submitted.

<label> This element defines a label for several form elements. 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 for Attribute is used to specify the type of form element a label is bound to. It
contains the value of the id attribute of that element.
<select> This element defines a drop-down list. The <option> element defines an option that
can be selected in the <select> element.
By default, the first item in the drop-down list is selected.
The size attribute can be used to specify the number of visible values.
<textarea> This element defines a multi-line input field (a text area).
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
<button> This element defines a clickable button
<fieldset>, The <fieldset> element is used to group related data in a form, while the <legend>
<legend> element defines a caption for the <fieldset> element.
<optgroup> This tag is used to group related options in a <select> element (drop-down list). The
label attribute specifies a label for an option-group.
Example: the following html code illustrates the usage of different elements in the form element.

<!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<title>My Form</title>

20 | P a g e
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

</head>

<body bgcolor="bisque">
<form name="myforme" action="/action_page.php" target="_blank" method="get">
<fieldset>
<legend>Personal:</legend>
<label for="fname">Full name:</label>
<input type="text" id="fname" name="fname">
</fieldset>

<fieldset>
<legend>My Car:</legend>
<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="3">

<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

<legend>My message:</legend>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</fieldset><br><br>

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

</body>
</html>

Results after running the html code

The following table shows the most important HTML Input Types

Input Type Description

type="text" Defines a single-line text input field
type="password" Defines a password field
type="submit" Defines a button for submitting form data to a form-handler

21 | P a g e
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

type="reset" Defines a reset button that will reset all form values to their default values
type="radio" Defines a radio button that let a user select ONLY ONE of a limited number of
choices
type="checkbox" Defines a checkbox to let a user select zero or more options of a limited number of
choices
type="button" Defines a button
type="color" This type is used for input fields that should contain a colour.
type="date" This type is used for input fields that should contain a date.
type="email" This type is used for input fields that should contain an e-mail address
type="image" Defines an image as a submit button
type="file" Defines a file-select field and a "Browse" button for file uploads
type="number" Defines a numeric input field. You can also set restrictions on what numbers are
accepted.
type="range" Defines a control for entering a number whose exact value is not important. Default
range is 0 to 100. However, you can set restrictions on what numbers are accepted
with the min, max, and step attributes.
type="search" This type is used for search fields (a search field behaves like a regular text field)

Example: the following html code illustrates the usage of different input Types.

The HTML code of this form is presented below.

Note: &nbsp; is actually one of the most frequently used HTML entities. Nbsp stands for non-breaking space,
meaning a space that will not break into a new line.

<!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<title>My Form</title>
</head>

22 | P a g e
 CHAPTER 2: MARKUP LANGUAGE HTML & CSS

<body bgcolor="bisque">
<form name="myforme" action="/action_page.php" target="_blank" method="get">

<fieldset>
<legend> Search Google:</legend>
<input type="search" id="gsearch" name="gsearch" size="40">
</fieldset><br>

<fieldset>
<legend> Personal information:</legend>
<label for="fname">Full name: &nbsp; &nbsp;</label>
<input type="text" id="fname" name="fname"><br>
<label for="birthday">Birthday: &nbsp;&nbsp;&nbsp; &nbsp;</label>
<input type="date" id="birthday" name="birthday"><br>
<label for="email">Your email:</label>
<input type="email" id="email" name="email"><br>
<label for="pwd">Password: &nbsp;&nbsp;</label>
<input type="password" id="pwd" name="pwd"><br>
<label for="pwd">Your Bio: &nbsp;&nbsp;</label>
<input type="file" id="myfile" name="myfile">
<label for="tall">Your Tall (between 1.50 and 2 meters):</label>
<input type="number" id="tall" name="tall" min="1.50" max="2">
<label for="vol">Your age (between 10 and 80):</label>
<input type="range" id="age" name="age" min="10" max="80"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" height="32">
</fieldset><br>

<fieldset>
<legend>Choose your favorite Web language:</legend>
<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>
</fieldset><br>

<fieldset>
<legend>What kind of vehicle you have?</legend>
<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>
</fieldset><br>

<label for="favcolor">Select your favorite color:</label>

<input type="color" id="favcolor" name="favcolor">

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

<input type="submit" value="Submit">

<input type="reset">

</body>
</html>

23 | P a g e