Chapter 3: DESIGNING YOUR
WEB PAGES
Ismail Mohamed Jamal
Lecturer
Faculty of Computer & IT
Jamahiriya University of Science & Technology
ismail@[Link]
Chapter Outline
What CSS is and why you need it
How CSS looks and how to write it
The different ways to add CSS code to your
[Link] pages and to external files
The numerous tools that VS offers you to quickly
write CSS
WHY DO YOU NEED CSS?
In the early days of the Internet,
• web pages consisted mostly of text and images.
• The text was formatted using plain HTML, using
tags like:
<b> to make the text bold, and
the <font> tag to influence the font family, size, and
color
CSS was created to address some of
HTML’s styling shortcomings
Problems of HTML Formatting
Its feature set severely limits the formatting
possibilities that your pages require.
Data and presentation are mixed within the
same file.
The required formatting tags and attributes
make your pages larger and thus slower to
load, display, and maintain.
How CSS Fixes Formatting
Problems
CSS offers a rich set of options to change
every little aspect of your web page,
including:
• fonts (size, color, family, and so on)
• colors and background colors
• borders around HTML elements
• positioning of elements in your page
• and much more
How CSS Fixes Formatting
Problems
CSS overcomes the problem of mixed data
and presentation by enabling you to define
all formatting information in external files.
Your ASPX or HTML pages can then
reference these files and the browser will
apply the correct styles for you
How CSS Fixes Formatting
Problems
Because you can place all CSS code in a
separate file, it’s easy to offer the user a
choice between different styles
Another benefit of a separate style sheet file
is the decrease in bandwidth that is required
for your site.
Style sheets don’t change with each
request, so a browser saves a local copy of
the style sheet the first time it downloads it.
AN INTRODUCTION TO CSS
CSS — The Language
A cascading style sheet is actually a
collection of rules.
A rule is a combination of a selector and one
or more declarations
A declaration can be broken down to a
property and a value
CSS — The Language
The Style Sheet
The style sheet contains all the relevant
style information that should be applied to
page elements
In its simplest form, a style sheet looks like
this:
h1
{
color: Green;
}
The Style Sheet
To be able to style an element on a page, a
browser has to know three things:
• What element of the page must be styled?
• What part of that element must be styled?
• How do you want that part of the selected
element to look?
The answers to these questions are given
by selectors, properties, and values.
Selectors
A selector is used to select or point to one or
more specific elements within your page.
A number of different selectors are
available, giving you fine control over what
elements you want to style.
The selector answers the first question:
What element of the page must be styled?
Selectors
The four most important types of selectors
are:
• The Universal Selector
• The Type Selector
• The ID Selector
• The Class Selector
The Universal Selector
The Universal selector, indicated by an
asterisk (*), applies to all elements in your
page.
You can use the Universal selector to set
global settings like a font family. E.g.
*
{
font-family: Arial;
}
The Type Selector
The Type selector enables you to point to an
HTML element of a specific type.
With a Type selector, all HTML elements of
that type will be styled accordingly.
h1
{
color: Green;
}
The ID Selector
The ID selector is always prefixed by a hash
symbol (#) and enables you to refer to a
single element in the page.
Within an HTML or ASPX page, you can
give an element a unique ID using the id
attribute.
The ID Selector
With the ID selector, you can change the
behavior for that single element, like this:
#IntroText
{
font-style: italic;
}
<p id="IntroText">This Text is Italic</p>
The Class Selector
The Class selector enables you to style
multiple HTML elements through the class
attribute.
This is handy when you want to give the
same type of formatting to a number of
unrelated HTML elements.
The Class Selector
.Highlight
{
color: Red;
font-weight: bold;
}
This is normal text but <span
class="Highlight">this is Red and
Bold.</span>
Grouping and Combining
Selectors
CSS also enables you to group multiple
selectors by separating them with a comma.
This is handy if you want to apply the same
styles to different elements
h1, h2, h3, h4, h5, h6
{
color: Red;
}
Properties
Properties are the part of the element that
you want to change with your style sheet.
The CSS specification defines a long list of
properties
The following table lists some of the most
common CSS properties and describes
where they are used.
Properties
Properties
Values
For a property to be useful, you need to give
it a value, which answers the third question:
How do you want the part of the selected
element to look?
Just as with properties, values come in
many flavors.
The values you have available depend on
the property.
COMMON CSS PROPERTIES
Color Properties
Color
Background-color
Border-color (also
border-bottom-color,
border-left-color, etc.)
You can specify the color as:
• Color name such as red
• A hexadecimal number representing red, green,
and blue component (RGB) like #FF0000
Configuring Text With CSS
CSS properties for configuring text:
• font-weight
Configures the boldness of text
• font-style
Configures text to an italic style
• font-size
Configures the size of the text
• font-family
Configures the font typeface of the text
• line-height
Configures the height of the line of text
(use the value 200% to appear double-spaced)
More CSS Text Properties
• text-align
Configures alignment of text within a block display element
• text-indent
Configures the indentation of the first line of text
• text-decoration
Modifies the appearance of text with an underline, overline, or
line-through
• text-transform
Configures the capitalization of text
• text-shadow
Configures a drop shadow on text
Text-shadow Property
Example:
h1 {
text-shadow: 2px 2px #ff0000;
}
Property Values
Value Description
h-shadow Required. The position of the horizontal shadow. Negative values are
allowed
v-shadow Required. The position of the vertical shadow. Negative values are
allowed
blur-radius Optional. The blur radius. Default value is 0
color Optional. The color of the shadow
The CSS Box Model
The CSS Box Model describes the way
three important CSS properties are applied
to HTML elements:
• Padding
• Border and
• Margin
CSS border Property
Configures a border on the top, right, bottom, and
left sides of an element
Consists of
border-top-width: 1px;
• border-width
border-top-style: solid;
• border-style
border-top-color: Black;
• border-color
h2 { border: 2px solid #ff0000 }
Configuring Specific Sides of a
Border
Use CSS to configure a line on one or more sides
of an element
• border-bottom
• border-left
• border-right
• border-top
h2 { border-bottom: 2px solid #ff0000 }
CSS Borders:
Block / Inline Elements
Block display element
◦ default width of element content extends to browser
margin (or specified width)
Inline display element
◦ Border closely outlines the element content
h2 { border: 2px solid #ff0000; }
a { border: 2px solid #ff0000; }
CSS padding Property
Configures empty space between the
content of the HTML element and the border
Set to 0px by default
h2 { border: 2px solid #ff0000;
padding: 5px; }
No padding property configured:
Configure Padding on
Specific Sides of an Element
Use CSS to configure padding on one or
more sides of an element
• padding-bottom
• padding-left
• padding-right
• padding-top
h2 { border: 2px solid #ff0000;
background-color: #cccccc;
padding-left: 5px;
padding-bottom: 10px;
padding-top: 10px; }
CSS padding Property
shorthand: two values
Two numeric values or percentages
• first value configures top and bottom padding
• the second value configures left and right padding
h2 { border: 2px solid #ff0000;
background-color: #cccccc;
padding: 20px 10px;
}
CSS padding Property
Shorthand: four values
Four numeric values or percentages
◦ Configure top, right, bottom, and left padding
h2 { border: 2px solid #ff0000;
width: 250px;
background-color: #cccccc;
padding: 30px 10px 5px 20px;
}
Configure Margin with CSS
• The margin property
• Related properties:
margin-top, margin-right, margin-left, margin-bottom
• Configures empty space between the element and
adjacent elements
• Syntax examples
h1 { margin: 0; }
h1 { margin: 20px 10px; }
h1 { margin: 10px 30px 20px; }
h1 { margin: 20px 30px 0 30px; }
Configure Margin with CSS
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
Configure Margin with CSS
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
Choosing among External,
Embedded, and Inline Style Sheets
External style sheets enable you to change
the appearance of the entire site through a
single file.
You should give first preference to them
If you want to change the look of a single
page, without affecting other pages in your
site, an embedded style sheet is your best
choice
The same applies to inline styles
Choosing among External,
Embedded, and Inline Style Sheets
An important thing to consider is the way
that the various types of style sheets
override each other.
If you have multiple identical selectors with
different property values, the one defined
last takes precedence.
The “Cascade”
Normal Flow
Browser display of elements in the order they
are coded in the Web page document
More CSS Properties
Float: right or left
Clear: right, left or both
Display: none, block, inline
Position: relative, absolute, fixed
The Float Property
In its simplest use, the float property can be
used to wrap text around images.
The following example specifies that an
image should float to the right in a text:
img {
float: right;
margin: 0 0 10px 10px;
}
The Clear Property
Elements after a floating element will flow
around it. To avoid this, use the clear
property.
The clear property specifies on which sides
of an element floating elements are not
allowed to float:
div {
clear: left;
}
The Clear Property
Vertical Navigation
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Menu</a></li>
<li><a href="[Link]">Directions</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
CSS removes the list marker and underline:
nav ul { list-style-type: none; }
nav a { text-decoration:
none; }
Horizontal Navigation
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Menu</a></li>
<li><a href="[Link]">Directions</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
CSS removes the list marker, removes the underline,
adds padding, and configures the list items for inline
display.
nav ul { list-style-type: none;}
nav a { text-decoration: none;
padding-right: 10px; }
nav li { display: inline; }
CSS Pseudo-classes
A pseudo-class is used to define a special state of an
element.
Pseudo-classes and the anchor element
◦ link – default state
for a hyperlink a:link {color:#000066;}
a:visited {color:#003366;}
◦ visited – a hyperlink that a:focus {color:#FF0000;}
has been visited a:hover {color:#0099CC;}
a:active {color:#FF0000;}
◦ focus – triggered when
the hyperlink has focus
◦ hover – triggered when
the mouse moves over the hyperlink
◦ active – triggered when the hyperlink is being clicked
Any Questions…..
