Chapter 2 (1)
Uploaded by
Negasa AlemuChapter 2 (1)
Uploaded by
Negasa AlemuInternet Programming
HTML & CSS
HTML
What is HTML
It is an acronym which stands for Hyper Text Markup Language which is
used for creating web pages and web applications.
Hyper Text:
A text has a link within it, is a hypertext. Whenever you click on a link which
brings you to a new webpage.
Markup language:
It is a computer language that is used to apply layout and formatting
conventions to a text document.
Markup language makes text more interactive and dynamic. It can turn text into
images, tables, links, etc.
Hence, HTML is a markup language
which is used for creating attractive web pages with the help of styling, and
which looks in a nice format on a web browser.
2 We Programming
HTML
Features of HTML
It is a very easy and simple language. It can be easily understood and modified.
It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.
It provides a flexible way to design web pages along with the text.
It is platform-independent because it can be displayed on any platform
like Windows, Linux, and Macintosh, etc.
It facilitates the programmer to add Graphics,Videos, and Sound to the web pages
which makes it more attractive and interactive.
It is a case-insensitive language, which means we can use tags either in lower-case or
upper-case.
3 We Programming
HTML
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 lingua franca(bridge language) for publishing hypertext
on the World Wide Web
Allow to embed other scripting languages to manipulate design
layout, text and graphics
Current version is HTML5
4 We Programming
Creating and Viewing an HTML document?
1.Use text editor such as Notepad++, to write the
document
2.Save the file as filename.html/htm on a PC. This is
called the HTML Document Source
3.Open internet Explorer (or any browser) Off-Line
4.Switch to internet Explorer
5.Click on File, Open File and select the filename.html
document that you just created
6.Your HTML page should now appear just like any other
Web page in internet Explorer
5 We Programming
HTML Document
Composed of several tags: the first tag turns the action
<>on, and the second turns it off </>
Should have an .htm or .html file name extension
Can be created using
1. Text Editors
Notepad, Notepad ++, WordPad
2. Editors
Micro Soft FrontPage
Macromedia Dreamweaver
Others
6 We Programming
HTML Document (cont’d)
HTML pages are tag-based documents
Really plain ASCII text files
Don't look like documents they represent
Tags indicate how processing program should display text and
graphics
Designed to describe hypertext, not paper
Processed by browsers "on the fly"
Tags usually appear in pairs
Most have reasonable names or mnemonics
Most can be modified by attributes/values
7 We Programming
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
8 We Programming
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
9 We Programming
HTML Document Structure (cont’d)
Example1 HTML code:
<HTML>
<head>
<title>Hello World</title>
</head>
<body bgcolor = “#000000”>
<font color = “#ffffff ”>
<H1>Hello World</H1>
</font>
</body>
</HTML>
10 We Programming
HTML Elements
Tag Names enclosed in < and >
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>
Tags may have attributes
<tag_name attr1=“val1” attr2=“val2” …>…</tag_name>
E.g. <font face=“arial” size=“9”>Hello</font>
11 We Programming
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 We Programming
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 We Programming
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 We Programming
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 We Programming
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 We Programming
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 We Programming
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 We Programming
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 We Programming
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 We Programming
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> We Programming
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 We Programming
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 We Programming
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 We Programming
HTML Tags (cont’d)
Tables
Insert tabular data
Design page layout
Powerful, flexible information delivery
A table is a container
<table> ... </table>
Tags involved: <table>, <tr>, <td>, <th>, <caption>
25 We Programming
HTML Tags (cont’d)
Format:
<table>
<caption>table caption</caption>
<tr>
<td>…</td> <td>…</td> …
</tr>
<tr>
<td>…</td> <td>…</td> …
</tr>
…
</table>
26 We Programming
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> We Programming
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 We Programming
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”
29 We Programming
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>
<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 We Programming
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 We Programming
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 We Programming
HTML Forms
33 We Programming
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
34 We Programming
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
35 We Programming
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>
36 We Programming
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”
37 We Programming
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
38 We Programming
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”
39 We Programming
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”
40 We Programming
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.
41 We Programming
HTML Forms (cont’d)
submit & reset buttons
the vlaue 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”>
42 We Programming
HTML Forms (cont’d)
<label> tag
used to give labels to input fields
Ex.
<label>First Name:
<input type=“text” name=“fname”>
</label>
43 We Programming
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}
44 We Programming
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
45 We Programming
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
46 We Programming
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>
47</html> We Programming
HTML5
48 We Programming
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.
49 We Programming
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.
50 We Programming
HTML5-Rules
New features should be based on HTML, CSS,
DOM[document object model], 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
51 We Programming
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 (real time messaging)
New content-specific elements, like <article>, <footer>, <header>, <nav>,
52 <section> We Programming
New HTML5- Global attributes
HTML5 adds the following global attributes that are
applicable to all elements:
contenteditable="true|false“
draggable="true|false“
spellcheck="true|false"
53 We Programming
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
54 We Programming
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.
55 We Programming
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>
56 We Programming
Cascading Style Sheet Language
CSS
57 We Programming
Style Sheet Language
Cascading Style Sheets (CSS): style sheet language used to
describe the presentation of a html document.
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
content.
58 We Programming
HTML tag names:Selector
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
59 We Programming
The id Selector
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
60 We Programming
The class Selector: All
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
61 We Programming
The class Selector:Particular selector
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
62 We Programming
Introduction
Cascading Style Sheets (CSS)
Style which Separate document structure from presentation
Styles define how to display HTML elements
Relationship between the style formatting and the
structure/content :
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 We Programming
Introduction (cont’ d)
An extension 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 We Programming
Styling View – Web docs
65 We Programming
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.
To change your presentation layout or method
without having to modify the documents
themselves, and
To apply one style sheet to any number of
documents.
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 inside body.
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.
External
<!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>
Internal
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Style Sheet Syntax Explained
selector
property value rule
73 We Programming
Style Precedence – The Cascade
Rules of precedence application:
Inline styles
Browser defaults
Internal styles
External styles
Browser default External styles
From highest to lowest
Embedded styles
Inline styles
HTML5 attributes
74 We Programming
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">
Selectors can be grouped (separated by comma)
Ex. p, div, table { align: center }
75 We Programming
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”>
76 We Programming
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
}
77 We Programming
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
tag_name.style_name { property: value }
Ex. p.color { color: green }
<p class=“color”>some text</p>
2. Styles for all elements
.style_name { property: value }
Ex. .color { color: blue }
<div class=“color”>some text</div>
<table class=“color”>…</table>
78 We Programming
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
tag_name#style_name { property: value }
Ex. p#color { color: green }
<p id=“color”>some text</p>
2. Styles for all elements
#style_name { property: value }
Ex. #color { color: blue }
<div id=“color”>some text</div>
79 <table id=“color”>…</table>We possible
Programming ???
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-
property.
style
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,
font-style oblique
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
You might also like
- Treatment and Management of Mental Health Conditions During Pregnancy and Postpartum ACOG June 2023100% (3)Treatment and Management of Mental Health Conditions During Pregnancy and Postpartum ACOG June 202327 pages
- BCA - (WEB PROGRAMMING) (Total 5 Units PDF100% (1)BCA - (WEB PROGRAMMING) (Total 5 Units PDF153 pages
- Practice Questions (Closed) : Asme Section Viii, Div. I50% (6)Practice Questions (Closed) : Asme Section Viii, Div. I30 pages
- Chapter: 9.2 HTML Page Structure Topic: 9.2.1 Introduction To HTMLNo ratings yetChapter: 9.2 HTML Page Structure Topic: 9.2.1 Introduction To HTML18 pages
- Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with EaseFrom EverandHypertext Markup Language (HTML) Fundamentals: How to Master HTML with EaseNo ratings yet
- Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSPNo ratings yetWeb Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP98 pages
- FIP Chap 2,3 and 4 - Client-Side Internet ProgrammingNo ratings yetFIP Chap 2,3 and 4 - Client-Side Internet Programming160 pages
- University Institute of Computing UNIT-1: Bachelor of Computer Applications Web Designing CAT-151No ratings yetUniversity Institute of Computing UNIT-1: Bachelor of Computer Applications Web Designing CAT-15130 pages
- JEE Main 2025 Session 1_Results PDF_90%ile+No ratings yetJEE Main 2025 Session 1_Results PDF_90%ile+19 pages
- Cloud Infotechs Coporate Training React JS Brochure 2024No ratings yetCloud Infotechs Coporate Training React JS Brochure 202423 pages
- Introduction To Modern India History 310: Consider ResourcesNo ratings yetIntroduction To Modern India History 310: Consider Resources8 pages
- Facelift by Acupressure Beauty and Vitality at Your Fingertips by Ina C. Niemann100% (2)Facelift by Acupressure Beauty and Vitality at Your Fingertips by Ina C. Niemann59 pages
- DP Lv1 CHEM Mid - Term Test Announcement.: Chanhw@ust - HKNo ratings yetDP Lv1 CHEM Mid - Term Test Announcement.: Chanhw@ust - HK2 pages
- کئی چاند تھے سر آسماں تہذیبی مطالعہ از خرم یاسینNo ratings yetکئی چاند تھے سر آسماں تہذیبی مطالعہ از خرم یاسین9 pages
- Sekonya NM's Language Machinery(errata p9)No ratings yetSekonya NM's Language Machinery(errata p9)46 pages
- CLASS IX ECONOMICS LESSON PLAN CHAPTER-2 PEOPLE AS RESOURCENo ratings yetCLASS IX ECONOMICS LESSON PLAN CHAPTER-2 PEOPLE AS RESOURCE49 pages
- The Best Childrens Books of The Year (2020 Edition)No ratings yetThe Best Childrens Books of The Year (2020 Edition)78 pages
- Pedagogical Practicum I Syllabus 2023-1No ratings yetPedagogical Practicum I Syllabus 2023-18 pages
- Angioedema and It's Homoeopathic TherapeuticsNo ratings yetAngioedema and It's Homoeopathic Therapeutics9 pages
- Bearing Expo 2024 Destiny Trips... Ex - MumbaiNo ratings yetBearing Expo 2024 Destiny Trips... Ex - Mumbai7 pages
- ENG PBI 18 40 PBI 2016 Pemrosesan Transaksi PembayaranNo ratings yetENG PBI 18 40 PBI 2016 Pemrosesan Transaksi Pembayaran36 pages
- Stories and The Brain The Neuroscience of Narrative 1st Edition Paul B. Armstrong 2024 Scribd Download100% (4)Stories and The Brain The Neuroscience of Narrative 1st Edition Paul B. Armstrong 2024 Scribd Download62 pages
