Web Design and Development Lecture 4

Web Design and
development
Lecture 4
Course Instructor: Wardah Mahmood
Email Id: [email protected]
<div>, <float> and <clear>
• The div tag is used to separate the content in multiple partitions.
• It is used to group relevant content in one section.
• Float is used to align and execute multiple divs in parallel.
• Clear is used to clear the right, left or both sides of the partition.
• Let’s practice an example.
HTML CSS
• What is CSS?
• Styling with Cascading Stylesheets (CSS)
• Selectors and style definitions
• Linking HTML and CSS
• Fonts, Backgrounds, Borders
• The Box Model
• Alignment, Z-Index, Margin, Padding
• Positioning and Floating Elements
• Visibility, Display, Overflow
• CSS Development Tools
CSS: A new philosophy
• Separate content from presentation!
Content Presentation
(HTML document) (CSS Document)
Title
Bold
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Suspendisse at pede ut purus Italics
malesuada dictum. Donec vitae
neque non magna aliquam dictum. Indent
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
tortor purus, luctus non, aliquam
nec, interdum vel, mi. Sed nec
quam nec odio lacinia molestie.
Praesent augue tortor, convallis
eget, euismod nonummy, lacinia
ut, risus.
HTML CSS
• Cascading Style Sheets (CSS)
• Used to describe the presentation of documents.
• Define sizes, spacing, fonts, colors, layout, etc.
• Improve content accessibility.
• Improve flexibility.
• Designed to separate presentation from content.
• Due to CSS, all HTML presentation tags and attributes are deprecated, e.g. font, center,
etc.
Cascading Style Sheets (CSS)
• CSS is a language that describes the style of an HTML document.
• CSS describes how HTML elements should be displayed.
• A cascading style sheet (CSS) is a Web page derived from multiple sources with
a defined order of precedence where the definitions of any style element conflict.
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files
CSS Syntax
• A CSS rule-set consists of a selector and a declaration block
• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
CSS Example
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
The id Selector
• The id selector uses the id attribute of an HTML element to select a specific element.
• The id of an element should be unique within a page, so the id selector is used to select
one unique element!
• To select an element with a specific id, write a hash (#) character, followed by the id of
the element.
• #para1 {
text-align: center;
color: red;
}
<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>
The Class Selector
• The class selector selects elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character, followed by the name
of the class.
.center {
text-align: center;
color: red;
}
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
The Class Selector
• You can also specify that only specific HTML elements should be affected by a class.
p.center {
text-align: center;
color: red;
}
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
ID vs Class
Ids are unique
• Each element can have only one id
• Each page can have only one element with that id
Classes are NOT unique

• You can use the same class on multiple elements.
• You can use multiple classes on the same element.
Grouping Selectors
• It will be better to group the selectors, to minimize the code.
• To group selectors, separate each selector with a comma.
h1, h2, p {

text-align: center;
color: red;
}
https://www.w3schools.com/css/default.asp
Linking HTML and CSS
• HTML (content) and CSS (presentation) can be linked in three ways:
• Inline: the CSS rules in the style attribute
• No selectors are needed
• Embedded: in the <head> in a <style> tag
• External: CSS rules in separate file (best)
• Usually a file with .css extension
• Linked via <link rel="stylesheet" href=…> tag or @import directive in embedded
CSS block
1. Inline
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>

<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>
2. Internal / Embedded
• Embedded in the HTML in the <style> tag.
<head>
<title>Style Sheets</title>
<style type="text/css">
em {background-color:#8000FF; color:white}
h1 {font-family:Arial, sans-serif}
p {font-size:18pt}
.blue {color:blue}
</style>
<head>
2. Internal / Embedded
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text. Here
is some text. Here is some text. Here is some
text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</body>
</html>
3. External
• Separate pages can all use a shared style sheet.
• Only modify a single file to change the styles across your entire Web site.
Link tag (with a rel attribute)

• Specifies a relationship between current document and another document
• link elements should be in the <head>
<link rel="stylesheet" type="text/css"

href="styles.css">
3. External
• @import: Another way to link external CSS files
<style type="text/css">
@import url("styles.css");
/* same as */
@import "styles.css";
</style>
Benefits of using CSS
• More powerful formatting than using presentation tags
• Your pages load faster, because browsers cache the .css files
• Increased accessibility, because rules can be defined according given media
• Pages are easier to maintain and update
HTML Navigation Bars
• A navigation bar (or navigation system) is a section of a graphical user interface
intended to aid visitors in accessing information. Navigation bars are
implemented in file browsers, web browsers and as a design element of some
web sites.
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
HTML Navigation Bars
• A navigation bar (or navigation system) is a section of a graphical user interface
intended to aid visitors in accessing information. Navigation bars are
implemented in file browsers, web browsers and as a design element of some
web sites.
• A navigation bar needs standard HTML as a base.
• These menu bars can be horizontal as well as vertical.

Web Design and Development Lecture 4

Uploaded by

Copyright:

Available Formats

Web Design and Development Lecture 4

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design and Development Lecture 4

Uploaded by

Copyright:

Available Formats

Web Design and

• The selector points to the HTML element you want to style.

<p id="para1">Hello World!</p>

Classes are NOT unique

h1, h2, p {

Link tag (with a rel attribute)

<link rel="stylesheet" type="text/css"

You might also like