Unit 2 - HTML and CSS

The document provides an overview of HTML and CSS. It describes common HTML elements and tags, how to structure an HTML document, and introduces CSS syntax and how to insert styles. Key topics covered include HTML page structure, elements, attributes, comments, the <head> element, and basic CSS syntax including selectors, declarations, and combining CSS rules.

Uploaded by

hjur

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

7 views

Unit 2 - HTML and CSS

Uploaded by

hjur

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 8

Chapter 2 – HTML and CSS

HTML
HTML (Hyper Text Markup Language) is the standard markup language for creating
Web pages. It describes the structure of Web pages using markup. A markup language
uses tags to define elements within a document. HTML elements are the building blocks
of HTML pages and these elements are represented by tags. Browsers use these tags to
render the content of the page. A simple HTML document is given below:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
• The <!DOCTYPE html> declaration defines this document to be HTML5
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
HTML tags are element names surrounded by angle brackets like <tagname> content
</tagname>. These tags normally come in pairs. The first tag is the start tag (or opening
tag) and the second tag is the end tag (or closing tag). The end tag is written like start tag,
but with a forward slash inserted before the tag name.
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>.
HTML Elements and Attributes
The HTML element is everything from the start tag to the end tag. HTML elements with
no content are called empty elements. Empty elements do not have and end tag, such as
the <br> element (indicates a line break). HTML elements can also be nested. HTML
tags are not case sensitive, but W3C recommends using lowercase tags. Some HTML
elements will display correctly, even if you forget the end tag. It is always recommended
to use end tag for every start tag.
Attributes provide additional information about HTML elements. Attributes are always
specified in the start tag. Attributes always come in name/value pairs like name =
“value”. For example,
<a href = “https://www.abc.com”>Click here</a>
HTML Comments
Comments are used to help document your HTML source code. Comments are not
displayed by the browser. For example,

Page 1
Chapter 2 – HTML and CSS

HTML Head
HTML <head> element is container for metadata and is placed between the <html> tag
and the <body> tag. Metadata is data about HTML document and is not displayed.
Metadata typically defines document title, character set, styles, links, scripts, and other
meta information. The different tags that describe metadata are <title>, <style>, <meta>,
<link>, <script>, and <base>.
HTML <title> element defines the title of the document. This element defines a
title in the browser tab, provides a title for the page when it is added to favorites, and
displays a title for the page in search engine results. The <style> element is used to define
style information for a single HTML page. The <link> element is used to link to external
style sheets. The <meta> element is used to specify which character set is used, page
description, keywords for search engine, author, and other metadata. Metadata is used by
browsers, search engines, and other web services. The <meta> element is also used in
making responsive web pages. For example,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="30">
</head>
<body>
<p>All meta information goes before the body.</p>
</body>
</html>
The <script> element is used to define client-side scripts and <base> element specifies
the base URL and base target for all relative URLs in a page. For example,
<base href="https://www.w3schools.com/" target="_blank">

CSS
CSS stands for Cascading Style Sheets. CSS is a language for describing style of HTML
documents. It describes how HTML elements are to be displayed. CSS removed style
formatting from the HTML pages.
CSS Syntax
CSS syntax consists of a selector and a declaration block. The selector points to the
HTML element you want to style. The declaration block contains one or more
declarations separated by semicolons. Each declaration includes a CSS property name
and a value, separated by a colon. A CSS declaration always ends with a semicolon, and
declaration blocks are surrounded by curly braces.

Page 2
Chapter 2 – HTML and CSS

For example,
p{
text-align: center;
color: red;
}
<p>These paragraphs are styled with CSS.</p>
CSS selectors are used to find (or select) HTML elements based on their element name,
id, class, attribute, and more. The element selector selects elements based on the element
name. The example above is the element selector.
The id selector uses the id attribute of an HTML element to select a specific
element. The id of an element should be unique within a page, so the id selector is used to
select one unique element. To select an element with a specific id, write a hash (#)
character, followed by the id of the element. For example,
#para1 {
text-align: center;
color: red;
}
<p id="para1">Hello World!</p>
The class selector selects elements with a specific class attribute. To select elements with
a specific class, write a period (.) character, followed by the name of the class. For
example,
.center {
text-align: center;
color: red;
}
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
You can also specify that only specific HTML element should be affected by a class. For
example,
p.center {
text-align: center;
color: red;
}
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
HTML elements can also refer to more than one class. For example,
p.center {
Page 3
Chapter 2 – HTML and CSS
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
<p class="center large">This paragraph will be red, center-aligned, and in a large font-
size.</p>
If we have elements with the same style definition, we can group them to minimize the
code. For example,
h1, h2, p {
text-align: center;
color: red;
}
The universal selector (*) selects all HTML elements on the page. The CSS rule below
will affect every HTML element on the page.
*{
text-align: center;
color: blue;
}
CSS Comments
Comments are used to explain the code, and may help when you edit the source code at a
later date. Comments are ignored by browsers. A CSS comment starts with /* and ends
with */. Comments can also span multiple lines.
Inserting CSS
There are three ways to insert CSS: external style sheet, internal style sheet, and inline
style.
External style sheet is used to change the look of an entire website by changing
just one file. An external style sheet is used by using <link> element inside <head>
section. For example,
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
An external style sheet can be written in any text editor without html tags and saved with
a .css extension. For example,
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

Page 4
Chapter 2 – HTML and CSS
Internal style sheet may be used if one single page has a unique style and are defined
within the <style> element inside the <head> section of the HTML document. For
example,
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline styles may be used to apply a unique style for a single element using the style
attribute. The style attribute can contain any CSS property. For example,
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
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. In the example below, <h1>
element will be orange instead of any style defined in the external style sheet for <h1>.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Note: The inline style has the highest priority.
Combinators
A combnator explains relationship between selectors. A CSS selector can contain more
than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)
The descendant selector matches all elements that are descendants of a specified element.
The following example selects all <p> elements inside <div> elements.
div p {
background-color: yellow;
}

Page 5
Chapter 2 – HTML and CSS
The child selector selects all elements that are the immediate children of a specified
element. The following example selects all <p> elements that are immediate children of a
<div> element:
div > p {
background-color: yellow;
}
The adjacent sibling selector selects all elements that are the adjacent siblings of a
specified element. Sibling elements must have the same parent element, and "adjacent"
means "immediately following". The following example selects all <p> elements that are
placed immediately after <div> elements:
div + p {
background-color: yellow;
}
The general sibling selector selects all elements that are siblings of a specified element.
The following example selects all <p> elements that are siblings of <div> elements:
div ~ p {
background-color: yellow;
}
Pseudo-class
A pseudo-class is used to define a special state of an element. For example, it can be used
to:
• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus
The syntax of pseudo-classes:
selector:pseudo-class {
property:value;
}
For example,
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}

Page 6
Chapter 2 – HTML and CSS
Pseudo-classes can be combined with CSS classes. For example, when you hover over
the link in the example, it will change color.
a.highlight:hover {
color: #ff0000;
}
The :first-child pseudo-class matches a specified element that is the first child of another
element. In the example below, the selector matches any <p> element that is the first
child of any element.
p:first-child {
color: blue;
}
In the following example, the selector matches the first <i> element in all <p> elements.
p i:first-child {
color: blue;
}
In the following example, the selector matches all <i> elements in <p> elements that are
the first child of another element:
p:first-child i {
color: blue;
}
Pseudo-element
A CSS pseudo-element is used to style specified parts of an element. Its syntax is:
selector::pseudo-element {
property:value;
}
For example,
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
Pseudo-elements can also be combined with CSS classes. For example,
p.intro::first-line {
color: #ff0000;
font-size:200%;
}
Responsive Web Design
Responsive web design makes your web page look good on all devices (desktops, tablets,
and phones). Your web page should look good, and be easy to use, regardless of the
device. Web pages should not leave out information to fit smaller devices, but rather
adapt its content to fit any device. Responsive web design uses only HTML and CSS.

Page 7
Chapter 2 – HTML and CSS
Responsive web pages resize, hide, shrink, enlarge, or move the content to make it look
good on any screen.
Before tablets and mobile phones, web pages were designed only for computer screens,
and it was common for web pages to have a static design and a fixed size. Then, when we
started surfing the internet using tablets and mobile phones, fixed size web pages were
too large to fit the viewport. To fix this, browsers on those devices scaled down the entire
web page to fit the screen. This was not perfect but a quick fix.
HTML5 introduced a method to let web designers take control over the viewport, through
the <meta> tag. You should include the following <meta> viewport element in all your
web pages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to control the page's
dimensions and scaling. The viewport varies with the device, and will be smaller on a
mobile phone than on a computer screen. The width=device-width part sets the width of
the page to follow the screen-width of the device (which will vary depending on the
device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded
by the browser.