Chapter -2
HTML & CSS
Markup languages
Markup languages are designed for the processing,
definition and presentation of text.
The language specifies code for formatting, both the layout and
style, within a text file.
The code used to specify the formatting are called tags.
A markup language is a set of tags and/or a set of rules for
creating tags that can be embedded in digital text to
provide additional information about the text in order to
facilitate automated processing of it, including editing and
formatting for display or printing.
A markup language is a system for annotating a document
in a way that is syntactically distinguishable from the text.
2 Web Programming Dec 18, 2023
HyperText Markup Language (HTML)
A markup language, i.e. it "mark-up" a text document with tags that
tell a Web browser how to structure it to display.
Used to tell the browser what to do, and what props to use and
having series of tags that are integrated into a text document
It is the most widely used language on Web to develop web pages.
Allow to embed other scripting languages to manipulate design
layout, text and graphics
HTML was created by Berners-Lee in late 1991 but "HTML 2.0"
was the first standard HTML specification which was published in
1995.
Though HTML 4.01 version is widely used but currently we are
having HTML-5 version which is an extension to HTML 4.01, and it
was published in 2012.
HTML is not case sensitivity.
3 Web Programming Dec 18, 2023
Creating and Viewing an HTML document?
1.Use an text editor such as Notepad, to write the
document
2.Save the file as filename.html on a PC. This is called the
HTML Document Source
3.Open any browser Off-Line
4.Click on File, Open File and select the filename.html
document that you just created
5.Your HTML page should now appear just like any other
Web page in internet Explorer
4 Web Programming Dec 18, 2023
HTML Document
Composed of several tags: the first tag turns the action
on, and the second turns it off .
The second tag(off switch) starts with a forward slash
Should have an .htm or .html file name extension
Designed to describe hypertext, not paper
Processed by browsers "on the fly"
Can be created using
1. Text Editors
Notepad, Notepad ++, WordPad
2. WYSIWYG Editors
Micro Soft FrontPage
Macromedia Dreamweaver
5 Others Web Programming Dec 18, 2023
HTML Tags
HTML pages are tag-based documents
These tags are enclosed within angle braces <Tag Name>.
Except few tags, most of the tags have their corresponding
closing tags.
For example, <html> has its closing tag </html> and <body> tag
has its closing tag </body> tag etc.
Most have reasonable names or mnemonics
Most can be modified by attributes/values
6 Web Programming Dec 18, 2023
HTML Document Structure
The HTML document is divided into two major parts:
HEAD: contains information about the document:
• Title of the page (which appears at the top of the browser window)
• Meta tags: used to describe the content (used by Search engines)
• JavaScript and Style sheets generally require statements in the
document Head
BODY: Contains the actual content of the document
• This is the part that will be displayed in the browser
window
7 Web Programming Dec 18, 2023
HTML Document Structure (cont’d)
General Structure of HTML files:
<html> Start Tag
<head>
<title> Web page title
</title>
</head>
<body>
statement
…….
</body>
</html> End Tag
8 Web Programming Dec 18, 2023
HTML Document Structure (cont’d)-E.g
<!DOCTYPE html>
<HTML>
<head>
<title>Hello World</title>
</head>
<body bgcolor = “#000000”>
<font color = “#ffffff”>
<H1>Hello World</H1>
</font>
</body>
</HTML>
9 Web Programming Dec 18, 2023
HTML Comments
HTML comments are placed in between <!-- ... --> tags.
So, any content placed with-in <!-- ... --> tags will be
treated as comment and will be completely ignored by the
browser.
<!DOCTYPE html>
Example <html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>
Output: Document content goes here....
10 Web Programming Dec 18, 2023
HTML Elements
An HTML element is defined by a starting tag.
If the element contains other content, it ends with a
closing tag.
Commonly have a start tag and end tag
Start tag format: <tag_name>
End tag format: </tag_name> [ note the / after < ]
E.g. <strong>bold text</strong>
Some tags may not have end tags
E.g. <br>, <img>. <hr>
Tags may have attributes
<tag_name attr1=“val1” attr2=“val2” …>…</tag_name>
E.g. <font face=“arial” size=“9”>Hello</font>
11 Web Programming Dec 18, 2023
Type of tags
Metadata tags- <title> ,<base>, <link>,<meta>. <style>
Section tags: <body>, <head> , <div> ,<frameset> ,<frame>,
<h1>..<h6> ,<p>
Text-level appearance tags: <b>,<em> ,<strong>,
<del>,<sub>
Grouping tags: <dl>, <dt>, <ol>, <li>, <select>, <option>
Image tag: <img>
Anchor tag: <a>
Table tag: <table> ,<th> ,<tr> ,<td>
Script tag: <script>
Embeded content tags: <applet>,<object>
Other tags: <br> ,<hr>
12 Web Programming Dec 18, 2023
Basic HTML Tags
Html- everything in the document should be within
<html> &</html>
Head- contains information which is not displayed in the
browser display area such as action-scripting (Javascript),
styles (CSS) and general information referenced in the
whole document
may contain other tags in it
format: <head>…</head>
Title- sets the title of the web page to be displayed in the
browser’s title bar.
found within the <head> tag.
format: <title>…</title>
13 Web Programming Dec 18, 2023
HTML Tags (cont’d)
Body:
contains the visible part of the web page
displayed in the display area of the browser
contains several other tags and content in it
format: <body>…</body>
attributes:
bgcolor=“color”
background=“img url”
text=“text color”
link=“link color”
alink=“active link color”
vlink=“visited link color”
…
14 Web Programming Dec 18, 2023
HTML Tags (cont’d)
Headings:
predefined formats for text presentation
six heading formats defined in HTML: <h1> up to <h6>
<h1> the largest font size
<h6> the smallest font size
Format:
<h1>…</h1>
E.g. <h2>a text in heading two</h2>
Bold:
makes a text appear in bold
Format: <b>…</b> or <strong>…</strong>
E.g. <b>a text in bold</b>
15 Web Programming Dec 18, 2023
HTML Tags (cont’d)
Italics
makes a text appear in italics
Format: <i>…</i> or <em>…</em>
E.g. <i>a text in italics</i>
Underline
makes a text appear underlined
Format: <u>…</u>
E.g. <u>underlined text</u>
Paragraph:
defines a paragraph
Format: <p>…</p>
16 Web Programming Dec 18, 2023
HTML Tags (cont’d)
E.g. <p>this is a paragraph of text. it has a new line before and
after it.</p>
The browser inserts a new line before and after the text in the
paragraph tag.
attribute:
align=“alignment” {left, right, center, justify}
line break:
inserts a new line
Format: <br>
E.g. line one <br> line two <br> line three <br> line four
17 Web Programming Dec 18, 2023
HTML Tags (cont’d)
Horizontal rule
inserts a horizontal line
Format: <hr>
attributes:
width=“width” {absolute: in pixels or relative: in %}
noshade
color=“color” {browser dependent}
E.g. <hr width=“75%” noshade color=“#FF0000”>
sub/sup
define either a subscript or a superscript
Format: <sub>…</sub> ; <sup>…</sup>
E.g. X<sub>1</sub><sup>2</sup> + 2X<sub>3</sub>
18 Web Programming Dec 18, 2023
HTML Tags (cont’d)
Lists
Unordered Lists (ul)
define bulleted lists
Format:
<ul>
<li>…</li>
<li>…</li>
…
</ul>
Atribute:
type=“bullet type” {disc, circle, square}
E.g.
<ul type=“square”>
<li>book</li><li>marker</li><li>chalk</li></ul>
19 Web Programming Dec 18, 2023
HTML Tags (cont’d)
Ordered Lists (ol)
define numbered lists
Format:
<ol>
<li>…</li>
<li>…</li>
…
</ol>
Atribute:
type=“number type” {1, i, I, a, A}
E.g.
<ol type=“i”> <li>book</li><li>marker</li><li>chalk</li></ol>
20 Web Programming Dec 18, 2023
HTML Tags (cont’d)
Definition Lists (dl)
define a list of term-description pairs
Format:
<dl>
<dt>…</dt>
<dd>…</dd>
<dt>…</dt>
<dd>…</dd>
…
</dl>
E.g.
<dl>
<dt>book</dt><dd>something that we read …</dd>
<dt>marker</dt><dd>something we write with …</dd>
21 </dl> Web Programming Dec 18, 2023
HTML Tags (cont’d)
Images
insert images in an html document
Format: <img> {no end tag}
Attributes:
src=“img url”
alt=“alternate text”
border=“border width”
width=“image width”
height=“image height”
supported image formats:
gif, jpg/jpeg, png
E.g. <img src=“assets/images/logo.gif” alt=“Site Logo”>
22 Web Programming Dec 18, 2023
HTML Tags (cont’d)
Anchor
defines a hyperlink or a named anchor
used for navigation
Format: <a>…</a>
Attributes:
href=“url”
target=“target” { _self, _blank }
name=“anchor name”
E.g.
<a href=“home.htm”>Go to home</a>
<a href=“http://www.google.com” target=“_blank”>Google</a>
23 Web Programming Dec 18, 2023
HTML Tags (cont’d)
Navigation with anchors
named anchors
named places in an html document
Format: <a name=“anchor_name”></a>
E.g. <a name=“top”></a>
linking to anchors
Format:
<a href=“#anchor_name”>link text</a> {on the same page}
<a href=“url#anchor_name”link text</a> {on a different page}
E.g.
<a href=“#top”>Top of page</a> {assuming the example above}
<a href=“http://www.hu.edu.et/history.htm#establishment”>
Establishment of HU</a>
24 Web Programming Dec 18, 2023
HTML Tags (cont’d)
Tables
Insert tabular data
Design page layout
Powerful, flexible information delivery
Used to reflect or impart structure
A table is a container
<table> ... </table>
Tags involved: <table>, <tr>, <td>, <th>, <caption>
25 Web Programming Dec 18, 2023
HTML Tags (cont’d)
Format:
<table>
<caption>table caption</caption>
<tr>
<th>…</th> <th>…</th> …
</tr>
<tr>
<td>…</td> <td>…</td> …
</tr>
<tr>
<td>…</td> <td>…</td> …
</tr>
26
</table> Web Programming Dec 18, 2023
HTML Tags (cont’d)
E.g.
<table>
<caption align=“center” valign=“bottom”>table 1.0</caption>
<tr>
<th>Column 1</th> <th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td> <td>Cell2</td>
</tr>
<tr>
<td>Cell 3</td> <td>Cell 4</td>
</tr>
27
</table> Web Programming Dec 18, 2023
HTML Tags (cont’d)
Table attributes:
align=“alignment” {left, center, right}
bgcolor=“color”
width=“table width” {absolute or relative}
border=“border width”
bordercolor=“color”
cellspacing=“space amount” {in pixels}
cellpadding=“padding amount” {in pixels}
…
28 Web Programming Dec 18, 2023
HTML Tags (cont’d)
Table row attributes:
align=“alignment” {left, center, right}
bgcolor=“color”
height=“height”
valign=“alignment” {top, middle, bottom}
Table data/heading attributes:
align=“alignment”
valign=“alignment”
width=“width”
bgcolor=“color”
Unless otherwise specified, <tr> and <td> inherit
attributes of <table> whenever it applies.
29 Web Programming Dec 18, 2023
HTML Tags (cont’d)
Cells spanning multiple rows/columns
two additional attributes of <td> and <th>
colspan=“num columns”
rowspan=“num rows”
E.g. (colspan)
<table border=“1”>
<tr> <td colspan=“2”>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> </tr>
<tr> <td colspan=“4”>Cell 8</td> </tr>
</table>
30 Web Programming Dec 18, 2023
HTML Tags (cont’d)
E.g. (rowspan)
<table>
<tr> <td rowspan=“3”>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> </tr>
<tr> <td>Cell 6</td> <td>Cell 7</td> </tr>
</table>
E.g. (hybrid)
<table>
<tr> <th colspan=“3”>Title</th> </tr>
<tr> <th rowspan=“3”>Cell 1</th> <td>Cell 2</td> <td>Cell 3</td> </tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> </tr>
<tr> <td>Cell 6</td> <td>Cell 7</td> </tr>
</table>
31 Web Programming Dec 18, 2023
HTML Special Characters
Special characters (named characters)
not found on the standard keyboard
e.g. ©
used by HTML
e.g. <
ignored by browsers
e.g. blank spaces
Format:
&code;
Examples:
© © < < & & space
32 Web Programming Dec 18, 2023
Divisions
In HTML, we can create divisions of an HTML document
using the <div> tag.
A <div> is a logical block tag that has no predefined
meaning or rendering
Very important for page layout design
The <div> tag works well with CSS
Tag format:
<div> … </div>
Attributes:
align=“alignment” {left, right, center} - define content alignt.
33 Web Programming Dec 18, 2023
HTML Forms
34 Web Programming Dec 18, 2023
Birds EyeView
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<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>
35 Web Programming Dec 18, 2023
HTML Forms
Used to gather input from users
The input is usually sent to a server-side script for
processing
The data can be sent in two methods: GET & POST
GET
for small and non-secure data
Is the default method
Data is sent as part of the request URL
Limitation in size of data
36 Web Programming Dec 18, 2023
HTML Forms (cont’d)
POST
For large & secure data
Input is sent as a data stream after the request URL
Tags
The <form> tag
Contains all input elements in the form
Defines the method of sending data
Defines the server-side script responsible for accepting the data
37 Web Programming Dec 18, 2023
HTML Forms (cont’d)
Attributes:
name=“name”
method=“method” {get, post}
action=“url” {url of the server-side script to post data to}
enctype=“enctype” {multipart/form-data, text/plain, … }
multipart/form-data – used when uploading files
Ex.
<form method=“post” action=“search.php”>
….
</form>
38 Web Programming Dec 18, 2023
HTML Forms (cont’d)
<input> tag
used to define input fields in a form
several types of input fields
{textbox, listbox, checkbox, radio, button, …}
Attributes:
name=“name”
type=“type”
{text, hidden, password, file, submit, reset, button, checkbox, radio,
image}
value=“value”
disabled=“disabled”
checked=“checked”
39 Web Programming Dec 18, 2023
HTML Forms (cont’d)
The possible input types:
text – input text box
hidden – a hidden field for storing values
password – password input box
file – input box for file uploading (browse)
submit – a button that submits the form
reset – a button that resets form fields to their original values
button – a general purpose button
checkbox – a check box
radio – a radio button (option button)
image – an image button that submits the form
40 Web Programming Dec 18, 2023
HTML Forms (cont’d)
Other input fields
<textarea> tag
used to input a large block of text
Tag format: <textarea>…</textarea>
Attributes:
name=“name”
cols=“num_columns”
rows=“num_rows”
readonly=“readonly”
wrap=“wrap_type” {off, hard, soft, virtual, physical}
41 Web Programming Dec 18, 2023
HTML Forms (cont’d)
<select> tag
used to create a select box
Tag format:
<select>
<option>…</option>
<option>…</option>
…
</select>
Attributes:
<select>
name=“name”
multiple=“multiple” {enables selection of multiple items}
disabled=“disabled”
42 Web Programming Dec 18, 2023
HTML Forms (cont’d)
<option>
value=“value”
selected=“selected”
disabled=“disabled” {browser compatibility: Firefox ?}
Ex.
1. <select name=“department”>
<option value=“1”>Computer Science</option>
<option value=“2”>Information Science</option>
<option value=“3”>Computer Engineering</option>
</select>
2. Modify the above input so that Information Science is selected by
default.
43 Web Programming Dec 18, 2023
HTML Forms (cont’d)
submit & reset buttons
the value attribute is the caption of the buttons
Ex. <input type=“submit” value=“ok”>
inserts a button with the caption (label) ok.
file upload fields
Ex. <input type=“file” name=“doc”>
44 Web Programming Dec 18, 2023
HTML Forms (cont’d)
<label> tag
used to give labels to input fields
Ex.
<label>First Name:
<input type=“text” name=“fname”>
</label>
45 Web Programming Dec 18, 2023
HTML Forms (cont’d)
<fieldset> tag
used to group input fields in a form
the title/label of the group is set using the <legend> tag
Tag format:
<fieldset>
<legend>…</legend>
… one or more input fields …
</fieldset>
Attributes:
<legend>
align=“alignment” {left, center, right}
46 Web Programming Dec 18, 2023
HTML Forms (cont’d)
Presentation
tables can be used to align form fields and their labels so that
the presentation of the form looks more regular.
one possibility is to use:
one table row per input field
within a table row
one column for the labels
one column for the input fields
the table borders can be set to 0 so that they are not visible
other features of tables (rows & columns) can be adjusted as
required
47 Web Programming Dec 18, 2023
HTML Forms (cont’d)
Exercises:
1. Create an HTML page which displays a login screen with
a username field
a password field
a department field {select box with values:
1. Computer Science
2. Information Science
3. Information Technology
a button to submit the form
a button to reset the content of the form
48 Web Programming Dec 18, 2023
HTML Forms (cont’d)
2. Create an HTML page which displays student registration screen with
a name field
an ID field
a department field {select box with values:
1. Computer Science
2. Information Science
3. Computer Engineering
a semester field {select box with values:
1. I
2. II
an academic year field
{select box with values: 1998-2000, 2008 default}
a button to submit the form
a button to reset the form
49 Web Programming Dec 18, 2023
For General Understanding
<html>
<body>
<h2>Grouping Form Data with Fieldset</h2>
<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for
the fieldset element.</p>
<form action="/action_page.php“ method=“get”>
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
50</html> Web Programming Dec 18, 2023
HTML5
51 Web Programming Dec 18, 2023
HTML5 Overview
HTML5 is the latest and the most enhanced version of html
that aims to make HTML more useful for creating internet
and web applications as well as semantically marked up
documents
It is the standard for structuring and presenting content on the
WWW
HTML5 offers new features (elements, attributes, event
handlers, and APIs) for easier web application development
and more sophisticated form handling.
New Features such as : Video and Audio playback, Drag-
and –Drop, Canvas, Server-sent Events ,etc are included.
52 Web Programming Dec 18, 2023
Features of HTML5
New Semantic Elements – Some new elements such as <header>, <footer> and
<section> are added to HTML5.
Forms 2.0 – The web forms are improved by introducing some new attributes for
the <input> tag.
Persistent Local Storage – This storage is achieved without resorting to the third-
party plugins.
Server–Sent Events – Events introduced by HTML5 which flow from the web
servers to the web browsers and they are known as Server-Sent Events(SSE).
Canvas – It is a drawing surface which supports two-dimensional drawing that can
be programmed with JavaScript.
Audio & Video - Audios and videos can be added to the web pages without
resorting to the third-party plugins.
Geolocation - Physical location of the visitors can be shared with the web
applications.
Drag and drop – This feature helps in dragging and dropping items from one
location to the other on the same web page.
53 Web Programming Dec 18, 2023
HTML5-Rules
New features should be based on HTML, CSS, DOM, and
JavaScript
The need for external plug-ins (like Flash) needs to be
reduced
Error handling should be easier than in previous versions
Scripting has to be replaced by more markup
HTML5 should be device-independent
The development process should be visible to the public
54 Web Programming Dec 18, 2023
New in HTML5
HTML5 introduces the following new input and form
control types : calendar, date, time, email, url, search
APIs: With a growing demand for interactive content on web
pages,HTML5 introduces several APIs (Application
Programming Interfaces) for standardizing the creation of
web applications.
Drag and drop functionality (including the new draggable attribute)
Playing video and audio files, with video and audio element
Two-dimensional drawing in conjunction with the new canvas element
Registering applications for certain protocols or media types
Cross-document messaging
New content-specific elements, like <article>, <footer>, <header>, <nav>,
<section>
55 Web Programming Dec 18, 2023
New HTML5- Global attributes
In addition to id, class, style, title, dir, lang, accesskey, and
tabindex carried over from HTML 4.01, HTML5 adds the
following global attributes that are applicable to all
elements:
contenteditable="true|false“
contextmenu="id of menu element“
draggable="true|false“
spellcheck="true|false"
56 Web Programming Dec 18, 2023
Exercises
1. Create an HTML document with the following
elements:
At least one image
At least three links
Different background color and text colors.
Two different sizes of text
Some centered text.
A title
57 Web Programming Dec 18, 2023
Exercises (cont’d)
2. For this exercise, you will familiarize yourself with
HTML by hand-writing a web site. You will develop at
least two web pages.
The first will provide a Google-like interface where a user can
perform a search query.
The "Search" button will link to the second page that displays
the results of a query.
You will not actually be generating results. Instead, your
"Search" button can simply link to another page that shows the
results for a static query.
The goal is really just to design the interface.
58 Web Programming Dec 18, 2023
Exercises (cont’d)
3. Create a menu list of links to the following search
engines:
Yahoo: http://www.yahoo.com
Google: http://www.google.com
Alta Vista: http://www.altavista.com
Ask: http://www.ask.com
Refer to the following syntax:
<a href=”<URL>”>Text to Display</a>
59 Web Programming Dec 18, 2023
Cascade Style Sheet (CSS)
60 Web Programming Dec 18, 2023
Style Sheet Language
Cascading Style Sheets (CSS): is style sheet language
used to describe the presentation of a html document.
CSS describes how HTML elements should be
displayed.
Define colors, fonts, layout, and other aspects of
document
Why CSS?
• more flexibility
• control the specification of presentational
characteristics
• reduce complexity and repetition in the structural
61 Web Programming Dec 18, 2023
content.
Objectives
Topics covered:
using a style sheet to give all the pages of a Web site
the same look and feel
style sheet types and cascade precedence
CSS syntax for assigning style properties
Class selector and using the class attribute to
apply styles
using style sheets to separate presentation from
content
62 Web Programming Dec 18, 2023
Introduction
Cascading Style Sheets (CSS)
Separation of document structure from presentation
Styles define how to display HTML elements
Relationship between the style formatting and the
structure/content is no longer 1:1
multiple style sheets can be applied to the same Web
page
Same style sheet can be applied to the multiple Web
page
Clearly separates content from its presentation
Saves a lot of work. Especially in website maintenance and upgrading
63 Web Programming Dec 18, 2023
Introduction (cont’ d)
An extension (addition) to HTML which allows us to style
our web pages, it is the language used to add style to
HTML elements.
Provides more detailed attributes to elements than the
ones defined in standard HTML
Styles are defined once and used any number of times and
in several contexts for the web docs
Cascading Style Sheets are simple text files saved in a
“.css” extension which contain style Rules.
64 Web Programming Dec 18, 2023
Styling View – Web docs
65 Web Programming Dec 18, 2023
Cascading Style Sheets (CSS)
In 1996 the W3C recommended the adoption of a standard set to
style sheets, Cascading Style Sheets level 1 (CSS1).
The original purpose of CSS was to provide HTML authors with
more formatting support and give them a way to apply uniform
styles to multiple documents.
Cascading Style Sheets level 2 (CSS2), introduced in 1998, included
additional features and functionality.
Cascading Style Sheets level 3 (CSS3), was started in 1998 and like
HTML5 is still a standard in progress, but is supported (to some
extent) by most current web browsers.
CSS4 began as a W3C working draft in September 2009 and is not
sufficiently developed yet to be supported by any major browser.
Why Use Cascading Style Sheets?
The main reason for using CSS is:
to separate a document’s content and structure from its
presentation. In so doing it provides the document author
with much greater control over the document’s format.
to change your presentation layout or method without having
to modify the documents themselves, and allows you to
apply one style sheet to any number of documents.
For example, an organization could produce a price list
document and then develop different style sheets depending
on the type of user who is viewing the content whether they
are using a desktop browser or a mobile device.
Advantages of CSS
CSS saves time: will automatically apply the specified
styles whenever that element occurs.
Pages load faster: less code means faster download times.
Easy maintenance: to change the style of an element, you
only have to make an edit in one place.
Superior styles to HTML : CSS has a much wider array of
attributes than HTML.
Better type and layout controls
Reliable browser support
More accessible sites
Defining Styles
In order to use a style sheet with your HTML5 document, you
need to tell your document where to locate the style definitions.
There are three ways to define styles:
1. Inline Styles: Inline styles are applied to a single element within
the start tag of the element.
2. Global (Embedded or Internal) Style Sheets: Style definitions
in are stored in the HTML5 document global style sheet itself
within the <style> element in the <head> of the document.
3. Linked (External) Style Sheets: Style definitions in linked style
sheets are stored in a file separate from the HTML5 document.
1. Inline Style Sheets
Inline styles are applied to a single element within the
start tag of the element.
For example, if you wanted to assign certain properties to
the text within a paragraph, you would include style
definitions like the following:
<p style=“color:red; font-family:arial;”>
paragraph text
</p>
We’ve already used this style of CSS in a couple of our
earlier examples.
1. Inline Style Sheets - Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
2. Embedded/Global/Internal Style Sheets
Style definitions in global style sheets are stored in the HTML5
document itself within the <style> element. The <style>
element must be contained within the <head> element.
The syntax of a global style sheet is:
<style type=“text/css”>
<!-- style definitions go here
-->
</style> Notice that the section where the global styles are defined is contained within an
HTML5 comment. This is to hide the actual contents of the style definition from older
browsers that don’t support CSS. The comment tags are not necessary to make
CSS work, but if they are not provided in an XHTML document, older Web browsers
may actually display the style property definitions on the Web page!
2. Global/Embedded/Internal Style Sheets
this method can only specify style information for the current
document:
It is a 1:1 relationship
However, the same document may have other style definitions applied to it
1:M relationship
embedded style sheet rule will have higher precedence than
external style sheet rule, if there is a conflict between styles
embedded style sheet rule will have lower precedence than an
inline style sheet rule
73 Web Programming Dec 18, 2023
2. Global/Embedded/Internal – Example 1
<!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>
2. Global/Embedded/Internal Style Sheet – Example 2
A global (internal) style sheet
3. External/Linked Style Sheets
Style definitions in linked style sheets are stored in a file
separate from the HTML5 document.
It provides style definitions to many documents – each
document simply has to reference a single style sheet.
The syntax for a linked style sheet declaration in an HTML5
document is:
<link rel=“stylesheet” href=“mystyles.css” type=“text/css” />
The <link> element is used to define the style sheet. The
<link> element is an empty element and must be contained
within the <head> element of an HTML5 document.
3. External/Linked Style Sheets
External style sheets
Applicable to more than one document
Documents can have more than one source for style specification
M:M relationship
Can provide uniform look and feel to entire site
Same CSS syntax rules for assigning and invoking style properties
apply
77 Web Programming Dec 18, 2023
3. External/Linked Style Sheets
The rel attribute specifies this <link> element to be a link
to a style sheet.
The href attribute, like that for the <a> (anchor) element,
specifies the location of the style sheet file on the system.
Both relative and absolute URLs can be used as the value for
the href attribute.
The type attribute declares this style sheet to be a plain-text
file containing CSS styles.
3. External/Linked Style Sheets - Linking
To make a style sheet persistent, set the rel attribute to
"stylesheet".
To make a style sheet preferred, set the rel attribute to
"stylesheet" and name the style sheet with the additional
title attribute.
To specify an alternate style sheet, set the rel attribute to
"alternate stylesheet" and name the style sheet with the title
attribute.
79 Web Programming Dec 18, 2023
3. External/Linked Style Sheets - Example
<!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>
Style Precedence – The Cascade
Browser defaults
External styles
Embedded styles
Inline styles
HTML5 attributes
CSS (cont’d)
CSS styles can be specified:
Inside a single HTML element (inline)
Inside the <head> element of an HTML document (internal)
In an external CSS file (external)
Rules of precedence application:
Inline styles
Internal styles
External styles
Browser default
From highest to lowest
82 Web Programming Dec 18, 2023
CSS Syntax for Assigning Style Properties
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
A selector can be:
the HTML element/tag you wish to define. In this example:
body {color: black} , element body is the selector
The class selector, which can be tied to a specific element, such as:
p.right {text-align: right}
The class selector applicable to any element, such as:
.loud {font-family: fantasy; font-size:
xx-large}
If a class selector is used, it has to be invoked in the body of the
HTML document:
<p class="right"> or
<table class=“loud”>
Selectors can be grouped (separated by comma)
83 Web Programming Dec 18, 2023
Ex. p, div, table { align: center }
CSS Syntax for Assigning Style Properties
Group selectors are possible for a group of HTML elements. For example:
h1,h2,h3,h4,h5,h6 {color: green} will make all header
elements text green
When a class selector is defined for a particular element, it can
not be invoked on other elements. Using example from the
previous slide which of these uses of class styles in the
XHTML document is correct?
<ul class = “loud”>
<ul class = “right”>
Pseudo-class selectors define the style for the parts of a
document based on some characteristics other than tag name,
attributes or content.
They may be defined by a user action such as:
Mouseover (hover pseudoclass)
Clicking (active pseudoclass)
84 Web Programming Dec 18, 2023
CSS (cont’d)
Types of selectors
HTML tag names
Class selectors
Id selectors
HTML tag names as selectors
used to override the default attributes of HTML tags
Format: tag_name {property : value}
Ex. a { color: red;
text-decoration: overline
}
85 Web Programming Dec 18, 2023
CSS (cont’d)
The class selector
define generic styles that can be applied to different HTML
elements
applied to the class attribute of HTML elements
Format:
1. Styles for a particular element
Syntax: tag_name.style_name { property: value }
Ex. p.color { color: green }
<p class=“color”>some text</p>
2. Styles for all elements
Syntax: .style_name { property: value }
Ex. .color { color: blue }
<div class=“color”>some text</div>
86 Web Programming Dec 18, 2023
<table class=“color”>…</table>
CSS (cont’d)
The Id selector
unlike the class selector, the Id selector always applies to only
one element
Format:
1. Styles for a particular element
Syntax: tag_name#style_name { property: value }
Ex. p#color { color: green }
<p id=“color”>some text</p>
2. Styles for all elements
Syntax: #style_name { property: value }
Ex. #color { color: blue }
<div id=“color”>some text</div>
87 <table id=“color”>…</table> possible
Web Programming Dec 18,???
2023
CSS (cont’d)
CSS comments
Format:
/* comment text */
Example
p{
color: red; /* Set text color to red */
/* This is
a multi-line
comment */
}
88 Web Programming Dec 18, 2023
CSS (cont’d) - Some common CSS properties
Background
background-color: color
background-image: url(url)
background-repeat: repeat_type {repeat, repeat-x, repeat-y, no-repeat}
background-attachment: attachment_type {scroll, fixed}
Text
color: color
direction: direction {ltr, rtl} borwser issue??
letter-spacing: value
text-align: alignment {left, right, center, justify}
text-decoration: decoration {none, underline, overline, line-through,
blink}
text-indent: value
89 Web Programming Dec 18, 2023
CSS Rules – Examples
h1 {
CSS rule applying to color: black;
a single element.
font-size: 12pt;
font-family: arial;
}
h1, h2, p {
CSS rule applying to color: red;
a three elements. font-size: 12pt;
font-family: arial;
}
CSS Example
Before we go too much further in examining CSS,
let’s rework one of our earlier examples to include
CSS.
The very first HTML document we created was a
course description document
For this first example of CSS, we’ll use a linked
style sheet. Recall that this means the style
definitions are stored in a file separate from the
HTML document. So let’s create the CSS file and
name it “firstCSS.css”.
firstCSS.css
CSS Properties
There are many types of CSS properties:
1. Font properties define font styles such as font family or type, size,
weight, and variant.
2. Text properties define the layout of blocks of text, words, or characters,
including spacing, alignment, transformation (forced uppercase or
lowercase), and decoration (such as underline, overline, strikethrough,
and blinking).
3. Color and image properties define the color and background formatting
of text and images. These properties can also define the position of a
background image and whether the image is repeated (tiled).
4. Border properties define the style of borders for elements like tables and
images, as well as for the entire document. Border properties include
width, height, style, color, margins, and padding.
5. Display properties define the style for the structure of the document.
These properties can define the placement of elements within the
document, such as block or inline, and how whitespace is formatted
within the document.
Font Properties
Property Description Value Example(s)
Global font declaration. Can font-family, font-
define all font properties in one style, font-weight,
font font-size, font-style
property.
Font type to display text. arial, courier
font-family
Size of font in pixels or as a small, x-small,
font-size percentage. medium, large,
x-large
Style of font. italic, bold, oblique
font-style
normal, small-caps
font-variant Font rendering.
Darkness of font. Uses name or normal, light, bold,
font-weight number. bolder, 100, 200,
300, 400, etc.
Text Properties
Property Description Value Example(s)
Amount of space between words in an normal, number of pixels
word-spacing element.
letter-spacing Amount of space between letters. normal, number of pixels
text-align Horizontal alignment of text on page. right, left, center
baseline, sub, super,
top, text-top, middle,
vertical-align Vertical alignment of text on page. bottom, text-bottom,
percentage
How much first line is indented. 0, number of pixels (i.e. 10 px),
text-indent percentage (i.e. 10%)
Change case of text. uppercase, lowercase,
text-transform capitalize, none
Amount of space between lines of text. normal, number of pixels
line-height
Special controls of text appearance underline, overline,
text-decoration blink, line-through,
none
Color Properties
Property Description Value Example(s)
color Text color red, blue, color code
Global background declaration. Can background-color, background-
define all background properties in one image, background-position,
background property. background-repeat, background-
attachment
background- Color of element’s background color name, transparent,
color inherit
background- URL, name of local file.
Image to be used as a background.
image
background- Scrolling of background image with the scroll, fixed, inherit
attachment element.
Position of element’s background. top, center, bottom,
background-
left, right, percentage,
position number of pixels
background- Repeat pattern for background image repeat, repeat-x,
repeat (tiling). repeat-y, no-repeat
Border Properties
Property Description Value Example(s)
Color of the border element. red, blue, color code
border-color
Width of the border. medium, thin, thick,
border-width
number of pixels.
border-style Style of the border. none, solid, double
0, number of pixels, percentage.
margin-top Width of margin at the top of element.
Width of margin at the bottom of 0, number of pixels, percentage.
margin-bottom element.
Width of margin at the left side of 0, number of pixels, percentage.
margin-left element.
Width of margin at the right side of 0, number of pixels, percentage.
margin-right element.
Amount of padding at top of element. 0, number of pixels, percentage.
padding-top
Border Properties (continued)
Property Description Value Example(s)
Amount of padding at bottom of 0, number of pixels, percentage.
padding-bottom element.
Amount of padding on left side of 0, number of pixels, percentage.
padding-left element.
Amount of padding on right side of 0, number of pixels, percentage.
padding-right element.
Whether an element permits other none, left, right
clear
elements on its sides.
float Floating element. none, left, right
Height of an element. auto, number of pixels,
height
percentage
Width of section auto, number of pixels,
width
percentage
Display Properties
Property Description Value Example(s)
Controls display of an element. block, inline, list-
display item
white-space Whitespace formatting. normal, pre, nowrap
Controls visibility of element. inherit, visible,
visibility hidden
Example –inline style
<html>
<head>
<title> Inline Style</title>
</head>
<body>
<p> this text doesn’t have any style applied to it</p>
<p style= “font-size:20pt”> this text
<emp>Font-Size</emp> syle appied to it making 20pt
</p>
<p style= “font-size=:20pt;color:#0000ff”> this text has
the<emp> Font-Size</emp> and <emp>color<emp> style
applied to it as 20pt and blue.</p>
100 Web Programming Dec 18, 2023