Scribd
Upload
29 views120 pages

Chapter 2

Uploaded by

yerosa teshome
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
29 views120 pages

Chapter 2

Uploaded by

yerosa teshome
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 120

HTML

Font face and colors

• Set font type, color, size with style attribute


<p style="font-size:30px; font-family:serif; color:red">
paragraph text here
</p>
HTML Attributes
• An attribute is used to define the characteristics of an element and is
placed inside the element's opening tag.
• All attributes are made up of two parts: a name and a value.
• Four core attributes used in HTML
• Id, title, class and style
• Id: used to uniquely identify any element within a page (or style sheet)
• Title: gives a suggested title for an element
• Class: used to associate an element with a style sheet, and specifies the
class of element.
• Style: used to specify CSS rules within the element
Cont…
• Body Backgrounds attributes: used to specify backgrounds
• Bgcolor: to specify background color: <body bglolor=“blue”>
• Background: to specify background image: <body bglolor=“clouds.gif”>
• Text attribute: to determine text color of a webpage
• Link attribute: to determine the color of hyperlinks
• Alink attribute: To determine the color of active hyperlinks
• Vlink attribute: To determine the color of visited hyperlinks
Example
<body bgcolor="#af9cdb" text="#0000ff" link="#9c2994" vlink="AF9f94” alink=“#AB00FF”>
• A character entity has three parts: an ampersand (&), an entity name or an entity
number, and finally a semicolon (;).
• The & means we are beginning a special character, the ; means ending a special character and the
letters in between are sort of an abbreviation for what it's for.
HTML Hyperlinks
• HTML Links: <a href=“url”> link text </a>
• Types
• Link to local file (page): <a href=“filename.html”> …. </a>
• Link to section of same page
• Using #top or #bottom eg. <a href=“#top”>Top of page </a>
• <a href=“#bottom”> go to bottom of the page </a>
• Using id selector
• <p id=“opening”>
• Then <a href=“#opening”> Take me to the opening paragraph </a>
• Link to the world: Internet sites
• <a href=“url”> Link to an internet site </a>
• <a href=“http://www.google.com/”> Open google </a>
HTML Images
• <img src = "filename" height = "number" width = "number"
alt="description" border = "number " vspace="10" hspace="10">
• VIDEO/ Audio TAGS: -
• <video src="url " width="640" height="360" controls></video>
• <audio src="url" controls></audio>
• Hyper graphics
• <a href=“url”> <img src=”image-url” alt=“alternative text” width=“400”></a>
• <a href=“url”> <video src=”image-url” width=“400” controls></a>
• Link to E-mail
<a href="mailto:[email protected]">[email protected]</a>
Tables
• Tables are defined with the <table> tag.

• A table is divided into rows (with the <tr> tag), and each row is divided
into data cells (with the <td> tag).

• td stands for "table data," and holds the content of a data cell.

• A <td> tag can contain text, links, images, lists, forms, other tables, etc.

• Header information in a table is defined with the <th> tag. The text in a
th element will be bold and centered.
9
Tables <table border="1">
<tr>
<th>Name</th>
• <table> main element <th>Course</th>
• <tr> table row <th>Year</th>
</tr>
• <th> table header
<tr>
• <td> table data (cells) <td>A B Morgan</td>
<td>Fishing</td>
<td>5</td>
</tr>
<tr>
<td>D P Jones</td>
<td>Sailing</td>
<td>8</td>
</tr>
</table>
</table>

10
Tables <<table border="1">
<tr>
<th>Name</th>
• <table> main element <td>A B Morgan</td>
• <tr> table row <td>D P Jones</td>
</tr>
• <th> table header
<tr>
• <td> table data <th> Course</th>
<td>Fishing</td>
<td>Sailing</td>
</tr>
<tr>
<th>Year</th>
<td>8</td>
<td>5</td>
</tr>
</table>
</table>

11
<table border="1">
Rows and Columns <tr>
<th colspan="2">Name</th>
<th>Course</th>
• Cells can span multiple <th>Year</th>
columns and multiple </tr>
<tr>
rows with the colspan <td>A B</td>
and rowspan attributes <td>Morgan</td>
<td rowspan="2">Fishing</td>
<td>5</td>
</tr>
<tr>
<td>D J</td>
<td>Jones</td>
<td>Sailing</td>
<td>8</td>
</tr>
<tr>
</table>

12
The align and width attributes
• The align attribute <table border="1" align="center">
<tr>
determines the <th colspan="2" width="60%">Name</th>
position of the text <th rowspan="2">Course</th>
<th rowspan="2">Year</th>
within a cell </tr>
<tr>
<th>Last</th>
<th>Init.</th>
• The width attribute </tr>
<tr>
determines the width <td>Morgan</td>
of the row relative to <td>AB</td>
<td>Fishing</td>
the table <td align="center">5</td>
</tr>
<!– etc -->

13
Table attributes
Table attributes
<table border="3" align="center" cellspacing="6"
cellpadding="6" bgcolor="cyan">
<caption>
<h2>Course Data</h2>
</caption>
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>A B Morgan</td>
<td>Fishing</td>
<td>5</td>
</tr>
<!– etc -->

15
Table attributes of rows and cells
Page formatting </body>
<table border="0" cellspacing="10">
• Tables can be used to <tr>
organize the layout of <td>
the web page itself <img src="cat.gif" alt="cat">
<ul>
<li>cats</li>
<li>dogs</li>
<li>butterflies</li>
</ul>
</td>
<td>
This piece of text illustrates
the idea of placing two columns
of information in a web page...
Note also that there is no
border in this table.
</td>
</tr>
</table>
</body>

17
Frames and Framesets
• A frameset partitions a web browser window so that multiple web
documents can be displayed simultaneously.
• Example application: To maintain a permanently visible directory of
links within your site, while also displaying one or more selected
documents from the site.
• otherwise the directory of links must appear on every page, and this scrolls up
with the page
• Note: framesets can cause problems for bookmarking and for "screen
readers" (for visually-impaired users)

18
Framesets
<html>
<head><title>Frames 1</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
</html>

• The frameset element replaces the body element


• frameset has attributes cols or rows, defined in
terms of pixels, percentage(%) or unspecified (*)
• this splits the window into two or
more columns or rows

19
Frame attributes
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>

• The name attribute uniquely identifies the frame. It


may be used as the target in an anchor (<a>) element
• The src attribute specifies the web page to be placed
in the frame initially (it may subsequently be
overwritten)
• The scrolling attribute ("auto", "yes", "no")
specifies whether the frame is to have scroll bars
• The frameborder attribute ("0", "1") specifies
whether the frame is to have a border
20
navigation.html
• The anchor tag has a target attribute
• takes the name of the frame used to display the information
• All anchors below are targeted to the "mainF" frame
<html><head><title>Navigation Bar</title></head>
<body><center>
<a href="course.html" target="mainF">HTML Course</a><br><br>
<a href="paragraph.html" target="mainF">Paragraphs</a><br>
<a href="headings.html" target="mainF">Headings</a><br>
<a href="ulists.html" target="mainF">Unordered lists</a><br>
<a href="olists.html" target="mainF">Ordered lists</a><br>
<a href="nlists.html" target="mainF">Nested lists</a><br>
<a href="intro.html" target="mainF">Home</a><br>
</center></body>
</html>

21
intro.html
• A simple document which is initially placed in the
"mainF" frame

• This is replaced when a user clicks on a link in the


"navF" frame

<html>
<head><title>Internet Computing</title></head>
<body>
<h2>Welcome to the HTML Course</h2>
<p>
<h4>Please select the subject of...</h4>
</p>
</body>
</html>

22
Nested framesets
<html>
<head><title>Frames 2</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frameset rows="30%,70%">
<frame name="upperF" src="intro.html">
<frame name="lowerF" src="course.html">
</frameset>
</frameset>
</html>

23
Noframes
• The NOFRAMES element specifies content that should be displayed only
by user agents that do not support frames or are configured not to display
frames.

• User agents that support frames must only display the contents of a
NOFRAMES declaration when configured not to display frames

• NOFRAMES may be used at the end of the FRAMESET section of the


document.

• a <body> tag should be found for browsers that do not support frames
Noframes example

<html>
<head><title>Frames 1</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
<noframes>
<body>
Something here for browsers not supporting frames
</body>
</noframes>
</html>

25
Inline Frames (Iframes)
• The IFRAME element allows
authors to insert a frame within a
block of text.
• The <iframe> tag is not used
within a <frameset> tag.
• Instead, it appears anywhere in the
document.
• The <iframe> tag defines a
rectangular region within the
document in which the browser
displays a separate document,
including scrollbars and borders.
Forms
• Forms are user interfaces for data input

• Main application: to provide user input for


• programs and databases located on a web server

• local (client-side) scripts associated with the form

• Server-based programs may return data to the client as a web page

• Client-side scripts can read input data


• To validate the data, prior to sending to server

• To use in local processing which may output web page content that is displayed on the client

27
Example applications
• Questionnaires to provide feedback on a web site

• e-commerce, to enter name, address, details of purchase and credit-card


number
• request brochures from a company

• make a booking for holiday, cinema etc.

• buy a book, cd, etc.

• obtain a map giving directions to a shop

• Run a database query and receive results (an important part of e-commerce)

28
Input types
• text
• checkbox
• radio (buttons)
• select (options)
• textarea
• password
• button
• submit
• reset
• hidden
• file
• image

29
The method and action attributes
• The method attribute specifies the way that form data is sent to the server
program
– GET appends the data to the URL
– POST sends the data separately
• The action attribute specifies a server program (e.g. a perl program .pl
extension) that processes the form data
• Can also send an email: action=“mailto:D.P.Cosker@..”

<body>
<form method="POST" action="comments.pl">
<h2>Tell us what you think</h2>
<!-- etc -->
</form>
</body>
30
The input element: type="text"
• The type attribute specifies the type of user
input
• The name attribute gives an identifier to the input
data
• The size attribute specifies the length of the
input field
• The value attribute specifies an initial value for
the text (optional)

<form method="POST" action="comments.pl">


<h2>Tell us what you think</h2>
Name <input name="name" type="text" size="20"><br>
Address <input name="address" type="text" size="30">
</form>

31
The input element:type="checkbox"
• The name attribute is used to define a set of
checkboxes
• The value attribute identifies the individual
checkbox
• If the checked attribute is set the box is
initially checked

How did you hear about this web site?<br>


A friend
<input type="checkbox" name="howdid" value="friend"><br>
Search engine
<input type="checkbox" name="howdid" value="engine"><br>
<!– etc -->

32
The input element: type="radio"
• Radio buttons are similar to checkboxes,
but only one can be selected
• To select a button by default, use the
checked attribute (for one button only)

How did you hear about this web site?<br>


A friend
<input type="radio" name="howdid" value="friend"><br>
Search engine
<input type="radio" name="howdid" value="engine"><br>
<!– etc -->

33
The input element: type="button"
• The name attribute uniquely identifies
a button
• The value attribute gives a label to the
button
• Actions can be associated with buttons-
more later

Do you want to receive any further information:<br>


<input type="button" name="yes" value=" Yes ">
<input type="button" name="no" value=" No "><br>

34
The input element:
type="submit/reset"
• type="submit"
– clicking this button sends the form data
to the program (URL) specified in the
action attribute of the form
• type="reset"
– clicking this button clears all data
entered so far

Thank you<br>
<input type="submit" name="send" value="Send">
<input type="reset" name="clear" value="Clear"><br>

35
The input element:
type="password/file/hidden"
• type="password"
– similar to type="text" except that the input is echoed with asterisks (so not
visible)
• type="file"
– provides a file dialogue box to specify a file that is sent to the server
• type="hidden"
– similar to text input, but the value attribute is used to specify data that is to
be sent to the server. Nothing appears on the screen.
– The data might be set by a server program to keep track of the details of a
particular transaction.

36
The textarea element
• Used for multi-line text input
• The size of the input area is specified
with the cols and rows attributes
• Any text placed inside the element
appears in the input area (this can be
deleted).

Please write your comments:<br>


<textarea name="comments" rows="5" cols="20">
put text here
</textarea>

37
The select element
• The select element provides a menu of
options
• An option can be selected by default using
the selected attribute (otherwise the first in
the list is initially selected)

How do you rate this site?<br>


<select name="rating">
<option>Good
<option selected>Bad
<option>Ugly
</select>

38
Linking HTML Forms with PHP Scripts
• To create a link between PHP scripts and HTML forms, we need to use the
functionalities of buttons, and the attribute of the <form tag>, specifically “action”
and “method”.
• Action specifies the PHP script that will process the form data
• Method specifies the way form data will transferred to server which can be either
GET or POST method
• GET: information visible on URLs
• POST: information not visible in URLs
• Submit buttons: When activated, submits a form.
• Reset buttons: When activated, a reset button resets all controls to their initial
values.
Cascading Style Sheets (CSS)
CSS Saves a Lot of Work!

CSS defines HOW HTML elements are to be


displayed.
Styles are normally saved in external .css files.
External style sheets enable you to change the
appearance and layout of all the pages in a Web
site, just by editing one single file!
Syntax of CSS

The CSS syntax is made up of 5 parts:

1) Selector
2) Property/value
3) Declaration
4) Declaration block
5) Curly braces
Syntax of CSS
Selector
Selectors are used to declare which part of the markup a
style applies to, a kind of match expression.
3 types of selectors
1) Tag selectors (body, p, div, a)
2) ID selectors (#wrapper, #sidebar)
3) Class selectors (.content, .menu)
The selector is normally the HTML element you want to
style
Selectors should never start with a number, nor should they
have spaces in them
ID Selector
The id selector is used to specify a style for a single, unique
element.
The id selector uses the id attribute of the HTML element, and is
defined with a "#".
The style rule below will be applied to the element with
id="wrapper":
#wrapper
{ For example, to identify a
text-align:center; paragraph as “head”, use the code:
border:1px solid red; <div id=“wrapper”>…</div>
Width: 200px;
Height: 100px
}
*Do NOT start an ID name with a number!
Class Selector
 The class selector is used to specify a style for a
group of elements. Unlike the id selector, the class
selector is most often used on several elements.
 This allows you to set a particular style for many
HTML elements with the same class.
 The class selector uses the HTML class attribute, and
is defined with a "."
Class Selector Cont’…

• In the example below, all HTML elements with


class="center" will be center-aligned:
.center {text-align:center;}
p.center {text-align:left;}
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
CSS Comments
/*This is a comment*/
p {
text-align:center;
/*This is another comment*/
font-family:arial;
}
CSS Syntax
How CSS is Applied to A Web Page?

There are three types of CSS styles:

1) Inline style
2) Internal style sheet
3) External style sheet
Inline style
 An inline style loses many of the advantages of style sheets by
mixing content with presentation. Use this method sparingly!
 To use inline styles you use the style attribute in the relevant tag.
 The style attribute can contain any CSS property. The ff example
shows how to change the color
<p style=“text-align: center; font- weight: bold; color:
yellow;”>This is a paragraph.</p>
Internal style sheet
 An internal style sheet should be used when a single document has a
unique style. You define internal styles in the head section of an HTML
page, by using the <style> tag, like this:
<head>
<style type=“text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
External style sheet
 An external style sheet is ideal when the style is applied to many pages.

 With an external style sheet, you can change the look of an entire Web site by

changing one file.


 Each page must link to the style sheet using the <link> tag. The <link> tag

goes inside the head section:


<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> Link to a separate
css file
Multiple Style Sheets: precedence
 If some properties have been set for the same selector in
different style sheets, the values will be inherited from
the more specific style sheet.
 For example, an external style sheet has these properties for the h3
selector:
h3 { color:red; text-align:left; font-size:8pt; }
 And an internal style sheet has these properties for the h3 selector:
h3 { text-align:right; font-size:20pt; }
 If the page with the internal style sheet also links to the external style sheet
the properties for h3 will be:
color:red; text-align:right; font-size:20pt;
Style sheet precedence
 What style will be used when there is more than one style
specified for an HTML element?
 Generally speaking we can say that all the styles will "cascade"
into a new “virtual" style sheet by the following rules, where
number four has the highest priority:
1) Browser default
2) External style sheet
3) Internal style sheet (in the head section)
4) Inline style (inside an HTML element)
Cascading order cont’…

 So, an inline style (inside an HTML element) has the highest


priority, which means that it will override a style defined inside
the <head> tag, or in an external style sheet, or in a browser (a
default value).
 The precedence is

Inline > internal > external > browser default


CSS Background

 CSS background properties are used to define the background effects of


an element.
 CSS properties used for background effects:
background-color
background-image
background-repeat
background-attachment
background-position
Background Color

• The background-color property specifies the


background color of an element.
• The background color of a page is defined in the body
selector:
<head>
<style>
body { background-color: #b0c4de; }
</style>
</head>
With CSS, a color is most often specified by:

a HEX value - like "#ff0000"


an RGB value - like "rgb(255,0,0)"
a color name - like "red“

In the example on next slide, the h1, p, and div


elements have different background colors:
<head>
<style>
h1 { background-color: #6495ed;}
p { background-color: #e0ffff;}
div { background-color: #b0c4de;}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
Background Image

The background-image property specifies an image to


use as the background of an element.
By default, the image is repeated so it covers the
entire element.
The background image for a page can be set like this:
Example
body {
     background-image: url("paper.gif");
}
Background Image - Repeat Horizontally or Vertically

 By default, the background-image property repeats an


image both horizontally and vertically.
 Some images should be repeated only horizontally or
vertically
 If the image is repeated only horizontally (repeat-x),
the background will look better:
 Example
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}
 Note: When using a background image, use an image
that does not disturb the text.
 Showing the image only once is specified by the
background-repeat property:
 Example
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}
 The position of the image is specified by the
background-position property:
 Example
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}
Background - Shorthand property

 As you can see from the examples above, there are


many properties to consider when dealing with
backgrounds.
 To shorten the code, it is also possible to specify all the
properties in one single property. This is called a
shorthand property.
 The shorthand property for background is simply
"background":
 Example
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
All CSS Background Properties

Property Description
background Sets all the background properties in one
declaration

background-attach Sets whether a background image is fixed or


ment scrolls with the rest of the page

background-color Sets the background color of an element

background-image Sets the background image for an element

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated


 When using the shorthand property the order of the
property values is:
background-color
background-image
background-repeat
background-attachment
background-position
 It does not matter if one of the property values is
missing, as long as the ones that are present are in this
order.
• The default color for a page is defined in the body selector.
Example
body {
    color: blue;
}

h1 {
    color: #00ff00;
}

h2 {
    color: rgb(255,0,0);
}
Text Alignment

 The text-align property is used to set the horizontal alignment of a text.


 Text can be centered, or aligned to the left or right, or justified.
 When text-align is set to "justify", each line is stretched so that every line
has equal width, and the left and right margins are straight (like in
magazines and newspapers).
Example

h1 {
    text-align: center;
}

p.date {
    text-align: right;
}

p.main {
    text-align: justify;
}
Text Decoration

• The text-decoration property is used to set or remove


decorations from text.
• The text-decoration property is mostly used to remove
underlines from links for design purposes:
a {
     text-decoration: none;
}
 It can also be used to decorate text:
Example
h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
Text Transformation
 The text-transform property is used to specify uppercase and lowercase
letters in a text.
 It can be used to turn everything into uppercase or lowercase letters, or
capitalize the first letter of each word.
 Example

p.uppercase { text-transform: uppercase;}
p.lowercase { text-transform: lowercase;}
p.capitalize { text-transform: capitalize;}
Text Indentation

• The text-indent property is used to specify the indentation of


the first line of a text.
• Example
p {
    text-indent: 50px;
}
CSS Font

 CSS font properties define the font family, boldness, size, and the style of
a text.
 The font family of a text is set with the font-family property.
 The font-family property should hold several font names as a "fallback"
system.
 If the browser does not support the first font, it tries the next font.
 Start with the font you want, and end with a generic family, to let the
browser pick a similar font in the generic family, if no other fonts are
available.
• If the name of a font family is more than one word, it must be in
quotation marks, like: "Times New Roman".
• More than one font family is specified in a comma-separated list:
• Example
p {
    font-family: "Times New Roman", Times, serif;
}
Font Style

 The font-style property is mostly used to specify italic


text.
 This property has three values:
 normal - The text is shown normally
 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar
to italic, but less supported)
Font Style example

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}
Font Size

 The font-size property sets the size of the text.

 Being able to manage the text size is important in web design.

 However, you should not use font size adjustments to make


paragraphs look like headings, or headings look like paragraphs.
 Always use the proper HTML tags, like <h1> - <h6> for headings and
<p> for paragraphs.
 The font-size value can be an absolute, or relative size.
Absolute size:
 Sets the text to a specified size
 Does not allow a user to change the text size in all browsers (bad
for accessibility reasons)
 Absolute size is useful when the physical size of the output is
known
Relative size:
 Sets the size relative to surrounding elements
 Allows a user to change the text size in browsers
Note: If you do not specify a font size, the default size for normal text,
like paragraphs, is 16px (16px=1em).
Set Font Size With Pixels

• Setting the text size with pixels gives you full control
over the text size:
• Example
h1 {
    font-size: 40px;
}

h2 { font-size: 30px; }

p { font-size: 14px; }
Set Font Size With Em

 To allow users to resize the text (in the browser menu), many
developers use em instead of pixels.
 The em size unit is recommended by the W3C.
 1em is equal to the current font size. The default text size in
browsers is 16px. So, the default size of 1em is 16px.
 The size can be calculated from pixels to em using this
formula: pixels/16=em
Example

h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}
Use a Combination of Percent and Em

• The solution that works in all browsers, is to set a default font-size


in percent for the <body> element:
• Example
body {
    font-size: 100%;
}

h1 { font-size: 2.5em; }

h2 { font-size: 1.875em; }

p { font-size: 0.875em; }
CSS Positioning
• The CSS positioning properties allow you to position an element.

• It can also place an element behind another, and specify what should
happen when an element's content is too big.
• Elements can be positioned using the top, bottom, left, and right
properties. However, these properties will not work unless the position
property is set first.
• They also work differently depending on the positioning method.
• There are four different positioning methods.
Static Positioning

• HTML elements are positioned static by default.


• A static positioned element is always positioned according to
the normal flow of the page.
• Static positioned elements are not affected by the top, bottom,
left, and right properties.
Relative Positioning:

• Relative positioning changes the position of the HTML element relative


to where it normally appears.
• So "left:20" adds 20 pixels to the element's LEFT position.
• You can use two values top and left along with position property to move
an HTML element anywhere in HTML document.
Here's a quick reference when moving HTML elements in CSS
– Move Left - Use a negative value for left.
– Move Right - Use a positive value for left.
– Move Up - Use a negative value for top.
– Move Down - Use a positive value for top
• NOTE: You can use bottom or right values as well in the same
way as top and left.
Example:
<div style="position:relative;left:80px;top:2px; background-
color:yellow;"> This div has relative positioning. </div>
Absolute Positioning:

• An element with position: absolute is positioned at the


specified coordinates relative to your screen top left corner
• You can use two values top and left along
with position property to move an HTML element anywhere in
HTML document
Example:
<div style="position:absolute;left:80px;top:2px; background-
color:yellow;"> This div has relative positioning. </div>
Fixed Positioning:

• Fixed positioning allows you to fix the position of an element to


a particular spot on the page regardless of scrolling.
• Specified coordinates will be relative to the browser window.
• It will not move even if the window is scrolled
• You can use two values top and left along
with position property to move an HTML element anywhere in
HTML document
 Here's a quick reference when moving HTML elements in CSS.
– Move Left - Use a negative value for left.
– Move Right - Use a positive value for left.
– Move Up - Use a negative value for top.
– Move Down - Use a positive value for top.
• NOTE: You can use bottom or right values as well in the same
way as top and left
• Fixed positioned elements are removed from the normal flow.
• The document and other elements behave like the fixed
positioned element does not exist.
• Fixed positioned elements can overlap other elements.
example
<head>
<style>
p.pos_fixed { position: fixed; top: 30px; right: 5px; color: red; }
</style>
</head>
<body>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some text</p><p>Some
text</p>
<p class="pos_fixed">Some positioned text.</p>
</body>
Overlapping Elements
 When elements are positioned outside the normal
flow, they can overlap other elements.
 The z-index property specifies the stack order of an
element (which element should be placed in front of,
or behind, the others).
 An element can have a positive or negative stack
order
 An element with greater stack order is always in front
of an element with a lower stack order.
 Note: If two positioned elements overlap without a
z-index specified, the element positioned last in the
HTML code will be shown on top.
example

<html>
<head>
<style>
img { position: absolute; left: 0px; top: 0px; z-index: -1;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed
behind the text.</p>
</body>
</html>
CSS Box Model
• All HTML elements can be considered as boxes. In CSS, the
term "box model" is used when talking about design and
layout.
• The CSS box model is essentially a box that wraps around
HTML elements, and it consists of:
margins,
 borders,
 padding, and
 the actual content.
• The box model allows us to add a border around elements,
and to define space between elements.
The image below illustrates the box model:
Explanation of the different parts of box model:

• Content - The content of the box, where text and images


appear
• Padding - Clears an area around the content. The padding
is transparent
• Border - A border that goes around the padding and
content
• Margin - Clears an area outside the border. The margin is
transparent
• Important: When you set the width and height
properties of an element with CSS, you just set the
width and height of the content area.
• To calculate the full size of an element, you must
also add the padding, borders and margins.
• Let's make a div element with a total width of 350px:
div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}
• Let's do the math:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
• The total width of an element should be
calculated like this:
Total element width = width + left padding + right
padding + left border + right border + left margin +
right margin
• The total height of an element should be
calculated like this:
Total element height = height + top padding +
bottom padding + top border + bottom border +
top margin + bottom margin
CSS Border

• The CSS border properties allow you to specify the style, size, and color
of an element's border
• The border-style property specifies what kind of border to display.
• Note: None of the border properties will have ANY effect unless
the border-style property is set!
border-style values:

• none: Defines no border


• dotted: Defines a dotted border
• dashed: Defines a dashed border
• solid: Defines a solid border
• double: Defines two borders.
– The width of the two borders are the same as the border-width
value
• groove: Defines a 3D grooved border.
• ridge: Defines a 3D ridged border.
• inset: Defines a 3D inset border.
• outset: Defines a 3D outset border.
Border Width

• The border-width property is used to set the width of the border.


• The width is set in pixels, or by using one of the three pre-defined
values: thin, medium, or thick.
• Note: The "border-width" property does not work if it is used alone.
– Use the "border-style" property to set the borders first.
<head>
<style>
p.one { border-style: solid; border-width: 5px; }
p.two { border-style: solid; border-width: medium;}
p.three { border-style: solid; border-width: 1px;}
</style>
</head>
<body>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is
used alone. You must add the "border-style" property to set the borders
first.</p>
</body>
</html>
Border Color

• The border-color property is used to set the color of the border. The color
can be set by:
• You can also set the border color to "transparent".
• If the border color is not set it is inherited from the color property of the
element.
• Note: The "border-color" property does not work if it is used alone.
• Use the "border-style" property to set the borders first
example
p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: #98bf21;
}
Border - Individual sides

• In CSS it is possible to specify different borders for different


sides:
• Example
p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
• The border-style property can have from one to four values.
• border-style: dotted solid double dashed;
– top border is dotted
– right border is solid
– bottom border is double
– left border is dashed
• border-style: dotted solid double;
– top border is dotted
– right and left borders are solid
– bottom border is double
• border-style: dotted solid;
– top and bottom borders are dotted
– right and left borders are solid
• border-style: dotted;
– all four borders are dotted
Border - Shorthand property

• As you can see from the examples above, there


are many properties to consider when dealing
with borders.
• To shorten the code, it is also possible to
specify all the individual border properties in
one property. This is called a shorthand
property.
• The border property is a shorthand for the following individual
border properties:
border-width
border-style (required)
border-color
Example
p {
     border: 5px solid red;
}
CSS Margin

• The CSS margin properties define the space around elements.


• The margin clears an area around an element (outside the border).
• The margin does not have a background color, and is completely
transparent.
• The top, right, bottom, and left margin can be changed independently
using separate properties.
• A shorthand margin property can also be used, to change all margins
at once.
Possible Values

Value Description

auto The browser calculates a margin

length Specifies a margin in px, pt, cm, etc. Default


value is 0px

% Specifies a margin in percent of the width of


the containing element

inherit Specifies that the margin should be inherited


from the parent element
Margin - Individual sides

• In CSS, it is possible to specify different margins for different sides of an


element:
Example
p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 50px;
}
Margin - Shorthand property

• To shorten the code, it is possible to specify all the margin properties in


one property. This is called a shorthand property.
• The shorthand property for all the margin properties is "margin":
Example
p {
    margin: 100px 50px;
}
For this rule: top & bottom margin are 100px, left & right are 50px
• The margin property can have from one to four values.
• margin: 25px 50px 75px 100px;
– top margin is 25px
– right margin is 50px
– bottom margin is 75px
– left margin is 100px
• margin: 25px 50px 75px;
– top margin is 25px

– right and left margins are 50px

– bottom margin is 75px

• margin: 25px 50px;


– top and bottom margins are 25px

– right and left margins are 50px

• margin: 25px;
– all four margins are 25px

You might also like