Web Development and Database

Administration Level-III
Developing Cascading style sheets
90 Hours

1
Unit one: Foundations of CSS and User-Centric Design
1.1. Introduction to CSS and Basic Design Principles
1.2. User requirements for CSS style
1.3. Development of CSS to match user requirements
Unit Two: Web page creations using CSS and HTML
2.1. Style elements of a web page
2.2. Page layout creation with CSS
2.3. Positioning document elements with CSS
2.4. Style sheets application on multiple pages on a
website
2.5. Web pages creation for varied screen resolutions
2.6. Application layering for the Desired Design
Unit Three: web page and CSS Validation and testing
3.1. CSS standard and validation
3.2. Web page evaluation across various browsers 2
UNIT ONE
Foundations of CSS and User-Centric Design

3
 INTRODUCTION TO CSS AND BASIC DESIGN
PRINCIPLES
• CSS stands for Cascading Style Sheets is a simple design
language intended to simplify the process of making web pages
presentable.
• CSS handles the look and feel part of a web page.
• Using CSS, you can control the color of the text, the style of
fonts, the spacing between paragraphs, how columns are sized
and laid out, what background images or colors are used, as
well as a variety of other effects.
• CSS is easy to learn and understand but it provides a powerful
control over the presentation of an HTML document.
• Most commonly, CSS is combined with the markup languages
HTML or XHTML.
• CSS is created and maintained through a group of people
4
• Advantages of CSS
– CSS saves time - You can write CSS once and then reuse the
same sheet in multiple HTML pages.
– Pages load faster - Just write one CSS rule of a tag and apply it to
all the occurrences of that tag. So, less code means faster
download times.
– Easy maintenance - To make a global change, simply change the
style, and all the elements in all the web pages will be updated
automatically.
– Superior styles to HTML - CSS has a wider array of attributes
than HTML, so you can give a better look to your HTML pages.
– Multiple Device Compatibility - Style sheets allow content to be
optimized for more than one type of device such as PDAs and
cellphones or for printing.
– Global web standards –it’s a good idea to start using CSS in all
the HTML pages to make them compatible with future browsers.
5
 1.2 USER REQUIREMENTS FOR CSS STYLE
• User requirements are the specific needs and wants
of a user that must be taken into account during the
web design quality assurance process.
• The user requirements gathering process includes
surveys, interviews, focus groups, and more.
• Once you determine user requirements and set an
acceptance criteria checklist for each, you should put
them in a website requirements document.
• Those will help you the design process by specifying
what the visitor should see on the website, how it
should work, and any special considerations that need
to be taken into account. 6
 Accessibility guidelines for UX design process
– Website Content accessibility guidelines WCAG are a set of best
practices that help people with disabilities use the internet.
– These guidelines help web designers to make websites easier to use,
by ensuring they are accessible to everyone.
– Those guidelines are sorted into the following categories:
– Operable
• You need to make sure that every task is performable on both keyboard and
mouse, that users have enough time to complete a task.
– Perceivable
• You need to ensure that all users can easily perceive your content. Provide text
alternatives for videos and images, plan on implementing audio alternatives
for textual content.
– Understandable
• Maximizing the chances that visitors will be able to make sense of your
content is vital in web design.
– Robust
• Through quality assurance, you need to ensure that your website is accessible
7
from all the different browsers and devices people use to explore the internet
 1.3 DEVELOPMENT OF CSS TO MATCH USER REQUIREMENTS
• Before you start writing user requirements for a website design you need to
deeply understand your target audience.
• Build trust with customers
– First impressions are lasting impressions, and there are several ways in
which web strategists can secure positive ones :
• Mirror the words of your target audience
– Imitating the tone of your target audience can enormously increase a
website’s conversion rates.
• Evoke emotions with visuals
– Powerful way to connect with the target audience is by including photos and
videos that evoke trust across your landing pages.
• Useful and creative content
– Most users will come to your website with one goal to find useful information. To improve
customer retention for your business, you need to ensure that only high-quality content
ends up on your website.
• Make it easy to navigate
– Before starting a user experience design process, it is crucial to put yourself in the website
visitor’s shoes that the navigation menu is simple to understand and placed exactly where
8
users expect it to be.
• Horizontal navigation bar
– Probably the most popular navigation menu type, that is usually located at
the top of the page, just below the header. The horizontal navigation bar
goes in the left-to-right direction.
• Vertical sidebar navigation menu
– This type of menu appears on the right or left side and usually stretches from
the top to the bottom of the page
• Dropdown navigation menu
– A dropdown navigation menu is a common user interface element used in
websites and applications to organize and display a list of options in a
hierarchical manner.
• Hamburger navigation menu
– This is a type of navigation menu that appears when you hover your mouse
or click over a “hamburger” button.
– It is the most popular menu type for mobile website design because it
occupies the least space until the user clicks on it.
• Footer navigation menu
– One of the website design elements that you shouldn’t overlook when
9
creating a web development checklist is the footer navigation menu.
 Unit Two:
WEB PAGE CREATIONS USING CSS AND HTML

10
 STYLE ELEMENTS OF A WEB PAGE
CSS Syntax
• A CSS comprises of style rules that are interpreted by the
browser and then applied to the corresponding elements
in your document.
• A style rule is made of three parts:
– Selector: A selector is an HTML tag at which a style will be
applied. This could be any tag like <h1> or <table> etc.
– Property: A property is a type of attribute of HTML tag. They
could be color, border, etc.
– Value: Values are assigned to properties. For example, color
property can have the value either red or #F1F1F1 etc.

11
 Type of Selectors
1. The Universal Selectors
• Rather than selecting elements of a specific type, the
universal selector quite simply matches the name of any
element type:
*{
color: #000000;
}
• This rule renders/formats the content of every element
in our document in black.

12
2. The Descendant Selectors
• Suppose you want to apply a style rule to a
particular element only when it lies inside a
particular element.
• As given in the following example, the style rule will
apply to <em> element only when it lies inside the
<ul> tag.
ul em {
color: #000000;
}

13
3. The Class Selectors
• You can define style rules based on the class attribute of the
elements.
• All the elements having that class will be formatted according to the
defined rule.
.black {
color: #000000;
}
• This rule renders the content in black for every element with class
attribute set to black in our document. You can make it a bit more
particular.
• For example:
h1.black {
color: #000000;
}
• This rule renders the content in black for only <h1> elements with14
4. The ID Selectors
• You can define style rules based on the id attribute of the
elements. All the elements having that id will be formatted
according to the defined rule.
#black {
color: #000000;
}
• This rule renders the content in black for every element with id
attribute set to black in our document. You can make it a bit
more particular.
• For example:
h1#black {
color: #000000;
}
• This rule renders the content in black for only <h1> elements 15
5. The Child Selectors
• You have seen the descendant selectors.
• There is one more type of selector, which is very
similar to descendants but have different
functionality.
• Consider the following example:
body>p {
color: #000000;
}
• This rule will render all the paragraphs in black if
they are a direct child of the <body> element.
16
• Adjacent Sibling Selector (+)
– The adjacent sibling selector is used to select an
element that is directly after another specific
element.
div + p {
background-color: yellow;
}
• General Sibling Selector (~)
– The general sibling selector selects all elements that
are next siblings of a specified element.
div ~ p {
background-color: yellow;
}

17
6. The Attribute Selectors
• You can also apply styles to HTML elements with
particular attributes.
• The style rule below will match all the input
elements having a type attribute with a value of
text:
input[type="text"]{
color: #000000;
}
– p[lang~="fr"] - Selects all paragraph elements whose
lang attribute contains the word "fr".
18
7. Multiple Style Rules
• You may need to define multiple style rules for a single
element. You can define these rules to combine multiple
properties and corresponding values into a single block as
defined in the following example:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
• Here all the property and value pairs are separated by a
semicolon (;). You can keep them in a single line or multiple
lines. For better readability, we keep them in separate lines.
19
8. Grouping Selectors
• You can apply a style to many selectors if you like.
Just separate the selectors with a comma, as given in
the following example:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
• This define style rule will be applicable to h1, h2 and
h3 element as well. The order of the list is irrelevant.
All the elements in the selector will have the
20
 Add CSS to a Webpage
• There are different ways to associate styles with
your HTML document.
• Most commonly used methods are inline CSS and
External CSS.
• There are three ways of inserting a style sheet:
– Inline CSS
– Embedded CSS
– External CSS

21
1. Inline CSS
• An inline style may be used to apply a unique style
for a single element.
• To use inline styles, add the style attribute to the
relevant element.
• The style attribute can contain any CSS property.
• Example:
<html>
<body>
<h1 style="color:blue;text-
align:center;">This is a heading</h1>
<p style="color:red;">This is a
paragraph.</p>
</body> 22
 2. Internal CSS (Embedded CSS)
• An internal style sheet may be used if one single HTML page has a unique style.
• Internal styles are defined within the <style> element, inside the <head> section
of an HTML page:
Example:
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: blue;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
23
</body>
3. External CSS
• With an external style sheet, you can change the
look of an entire website by changing just one file!
• Each HTML page must include a reference to the
external style sheet file inside the <link> element,
inside the head section.
• An external style sheet can be written in any text
editor, and must be saved with a .css extension.
• The external .css file should not contain any HTML
tags.

24
Example
• Consider a simple style sheet file with a name mystyle.css having the following
rules:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
• Now you can include this file mystyle.css in any HTML document as follows:
<html>
<head>
<link rel="stylesheet" href="css1.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
25
CSS Rules Overriding
– We have discussed three ways to include style sheet
rules in an HTML document.
– Here is the rule to override any Style Sheet Rule.
– Any inline style sheet takes highest priority. So, it will
override any rule defined in <style>...</style> tags or
rules defined in any external style sheet file.
– Any rule defined in <style>...</style> tags will override
rules defined in any external style sheet file.
– Any rule defined in external style sheet file takes
lowest priority, and rules defined in this file will be
applied only when above two rules are not applicable.

26
 CSS Comments
• Many times, you may need to put additional
comments in your stylesheet blocks. So, it is very
easy to comment any part in style sheet. You can
simply put your comments inside /*.....this is a
comment in style sheet.....*/.
/* This is a single-line comment */
/* This is a
multi-line
comment */

27
 CSS Units
– Values and units, in CSS, are significant as they
determine the size, proportions, and positioning.
• Absolute Length Units
– These units are categorized as fixed-length units,
which means that lengths specified with absolute
units maintain an exact, unchanged size on the
screen.
• Example:
Unit Description Equivalent value Example
px Pixels 1px = 1/96th of 1in font-size: 15px;

28
 Relative Length Units
• Are relative to something else, perhaps the size of
the parent element's font, or the size of the
viewport.
Unit Description Example
rem Relative to font-size of the root element. font-size: 2rem;
vh It is relative to the height of the viewport. 1vh = 1% or font-size: 4vh;
1/100 of the height of the viewport.

vw It is relative to the width of the viewport. 1vw = 1% or width: 4vw;

1/100 of the width of viewport.

vmin It is relative to the smaller dimension of the viewport. width: 4vmin;

1vmin = 1% or 1/100 of the viewport's smaller
dimension.

29
• CSS – Colors
– CSS uses color values to specify a color.
– Typically, these are used to set a color either for the foreground of
an element (i.e. its text) or else for the background of the element.
– They can also be used to affect the color of borders and other
decorative effects.
1. Named Colors
– A CSS named color is the name of a color, such as red, blue, black,
or light-green.
2. RGB Hexadecimal Colors
– A hexadecimal is a 6 digit representation of a color.
– The first two digits (RR) represent a red value, the next two are a
green value (GG), and the last are the blue value (BB).
– Each hexadecimal code will be preceded by a pound or hash sign
'#'.
– Following are the examples of hexadecimal notation.
30
• RGB Values
– This color value is specified using the rgb( ) property.
– It takes three values, one each for red, green, and blue.
– The value can be an integer between 0 and 255 or a percentage.
Example: Color:RGB(20,50,255)
• HSL Values
– This color value is specified using the hsl() function.
– HSL stands for hue, saturation and lightness.
– Hue is represented in degrees (0-360), saturation and lightness are
represented as percentages (0% - 100%).
Example: Color:hsl(0,0%,50%)
• Currentcolor keyword
– The currentcolor keyword takes the value of the color property of an
element.
– It can be passed to any other styling property using the
keyword currentcolor. 31
Exercise1
• Use font-size and margin-align to use absolute
length units(px, in) and Relative Length
units(rem,vh,vw,em….)
• Practice different color representation methods
– By Name
– RGB Hex
– RGB
HSL
– Currentcolor
 CSS – Backgrounds
• You can set the following background properties of an
element:
• The background-color property is used to set the background
color of an element.
• The background-image property is used to set the background
image of an element.
• The background-repeat property is used to control the repetition
of an image in the background.
• The background-position property is used to control the position
of an image in the background.
• The background-attachment property is used to control the
scrolling of an image in the background.
• The background property is used as a shorthand to specify a
number of other background properties.
33
Set the Background Color

<p style="background-
color:yellow;">
This text has a yellow background
color.</p>

34
 Set the Background Image
<table
style="background-image:url(/https/www.scribd.com/images/pat
tern1.gif);">
<tr><td>
This table has background image set.
</td></tr>
</table>

35
 Repeat the Background Image

• The following example demonstrates how to repeat the

background image if an image is small.
• You can use no-repeat value for the background-repeat
property if you don't want to repeat an image.
• By default, the background-repeat property will have a
repeat value.
<table style="background-image:url(/https/www.scribd.com/images/pattern1.gif);
background-repeat: repeat;">
<tr><td>
This table has background image which repeats multiple times.
</td></tr>
</table>
36
• The following example which demonstrates how
to repeat the background image vertically.
<table style="background-image:url(/https/www.scribd.com/images/pattern1.gif);
background-repeat: repeat-y;">
<tr><td>
This table has background image set which will repeat
vertically.
</td></tr>
</table>

37
 Set the Background Image Position
• The following example demonstrates how to set
the background image position 100 pixels away
from the left side.
<table
style="background-image:url(/https/www.scribd.com/images/pattern1.gif);
background-position:100px;">
<tr><td>
Background image positioned 100 pixels away from the
left.
</td></tr>
</table>
38
 Set the Background Attachment

• Background attachment determines whether a background

image is fixed or scrolls with the rest of the page.
• The following example demonstrates how to set the fixed
background image.
<p style="background-image:url(/https/www.scribd.com/images/pattern1.gif);
background-attachment:fixed;">
This parapgraph has fixed background image.
</p>
• The following example demonstrates how to set the
scrolling background image.
<p style="background-image:url(/https/www.scribd.com/images/pattern1.gif);
background-attachment:scroll;">
This parapgraph has scrolling background image.
</p> 39
Exercise2: Apply the different CSS background properties
for the following page using internal inclusion methods.
<html>
<head>
// write the different background properties here
</head>
<body> /*bg color lightblue*/
<h1>This is a heading 1</h1> /*bg image, bgcolor rgb hex */
<h2>This is a heading2</h2> /*bg position, bgcolor with rgb */
<h3>This is a heading 3</h3> /*bg image repeat, text color with hsl color */
<h4>This is a heading 4</h4> /*bg image attachment*/
<p>This is a paragraph.</p> /*bg color red border with currentcolor */
</body>
</html>

40
 CSS Fonts
• You can set the following font properties of an element:
– The font-family property is used to change the face of a
font.
– The font-style property is used to make a font italic or
oblique.
– The font-variant property is used to create a small-caps
effect.
– The font-weight property is used to increase or decrease
how bold or light a font appears.
– The font-size property is used to increase or decrease the
size of a font.
– The font property is used as shorthand to specify a number
of other font properties.
41
 Set the Font Family
• Following is the example, which demonstrates how
to set the font family of an element.
• Possible value could be any font family name.
<p style="font-family:georgia, garamond,
serif;">

• This text is rendered in either georgia, garamond,

or the default serif font depending on which font
you have at your system. 42
 Set the Font Style
• The following example demonstrates how to set
the font style of an element.
• Possible values are normal, italic and oblique.
<p style="font-style:italic;">
CSS This text will be rendered in italic style
</p>

43
Set the Font Variant
• The following example demonstrates how to set
the font variant of an element.
• Possible values are normal and small-caps.
<p style="font-variant:small-caps;">
This text will be rendered as small caps
</p>
• It will produce the following result:
• THIS TEXT WILL BE RENEDERED AS SMALL CAPS

44
Set the Font Weight
• The following example demonstrates how to set the
font weight of an element.
• The font-weight property provides the functionality to
specify how bold a font is.
• Possible values could be normal, bold, bolder, lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900.
<p style="font-weight:bold;">
This font is bold.
</p>
<p style="font-weight:bolder;">
This font is bolder.
</p>
<p style="font-weight:900;">
This font is 900 weight.
</p>

45
 Set the Font Size
• The following example demonstrates how to set the font size of
an element.
• The font-size property is used to control the size of fonts.
• Possible values could be xx-small, x-small, small, medium, large,
x-large, xx-large, smaller, larger, size in pixels or in %.
<p style="font-size:20px;">
This font size is 20 pixels
</p>
<p style="font-size:small;">
This font size is small
</p>
<p style="font-size:large;">
This font size is large
</p> 46
Shorthand Property
• You can use the font property to set all the font
properties at once. For example:
<p style="font:italic small-caps bold
15px georgia;">
Applying all the properties on the text
at once.
</p>

47
 CSS Text
• A text refers to a piece of written or printed information in the form of
words or characters that can be read and understood.
• Texts can include content such as books, articles, emails, messages, web
pages, etc.
• Text Color
– Altering the color of the text can add visual interest or align with a specific
design scheme.
– The CSS color property is used to set the color of the text.
– Example: color:red;
• Text Alignment
– The position or placement of text on a page is called its alignment. The text is
aligned based on the left and right margins of the page.
– left: Aligned with the left-margin.
– right: Aligned with the right-margin.
– center: Aligned at the center of the page.
– justify: Aligned with both the margins.
– justify-all: Same as justify, making the last line justified as well. 48
• Text Direction
– Text direction refers to the orientation of text characters within a document or element.
– It determines whether text should be displayed from left to right (LTR) or right to left
(RTL) based on the writing system used.
• Text Decoration
– The CSS text-decoration property helps in adding extra decoration to the text, such as,
adding a line (underline, strikethrough, overline) and color, style and thickness to the
line.
– text-decoration-line: Sets the type of decoration line (underline, line through or
overline).
– text-decoration-color: Sets the color to the text decoration.
– text-decoration-style: Sets the style to the text decoration (dotted, dashed, solid, wavy,
double, etc.)
– text-decoration-thickness: Sets the thickness to the text decoration.
– Example: text-decoration-line: overline;
text-decoration-color:red;
text-decoration-style:wavy:
text-decoration-thickness:5px;
• Text Emphasis: CSS provides a property to apply emphasis marks on a block of
text using the property text-emphasis.
49
• text-emphasis: none|filled|open|dot|circle|double-circle|triangle|sesame|
 Text Indentation
• Indentation is the space between the margin and the first line of text.
• Proper indentation enhances the readability and clarity of text on a
page.
• The following values can be passed to text indention property:
– length: Any specific length {pixels (px), points (pt), ems (em), etc}.
Default value is 0.
– percentage (%): The value passed is in relation to the percentage
of the width of the parent element.
Example: text-indent: length|%/initial|inherit;
– each-line: Affects the first line of a block of text along with each
line after a forced line break.
• hanging: Indentation is inverted, except for the first line.
• initial: Sets the text-indent to its default value.
• inherit: Allows to inherit the text-indent value from its parent element.

50
Text Letter Spacing
– The CSS property letter-spacing is used to adjust the
space between the letters of a text.
– Following are the possible values that this property can
have:
– normal: Default value and represents the normal
amount of space between letters.
– length: Any specific length {pixels (px), points (pt), ems
(em), or percentages (%)}.
– initial: Sets the letter-spacing to its default value.
– inherit: Allows to inherit the letter-spacing value from its
parent element.

51
Text Word Spacing
• CSS provides property to adjust the spacing between the words in a piece of
text, just like letter spacing. The property to adjust the space between words
is word-spacing.
• This property can take any of the following values:
– normal: Default value and represents the normal amount of space between words.
– length: Any specific length {pixels (px), points (pt), ems (em), or percentages (%)}.
– initial: Sets the word-spacing to its default value.
– inherit: Allows to inherit the word-spacing value from its parent element.
• Text Shadow
– The text-shadow property is used to add a shadow effect to text. It allows you to specify
the color, offset, blur-radius, and spread-radius of the shadow.
– Following is the syntax of text-shadow:
• /* offset-x | offset-y | blur-radius | color */
• text-shadow: 1px 1px 2px black;
• Text Line Break
– CSS provides property line-break that is useful in determining how to break lines in a
block of text.
• Text Word Break
– The CSS word-break property in CSS is used to specify how words should be broken52or
Set the Text Color
• The following example demonstrates how to
set the text color. Possible value could be any
color name in any valid format.
<p style="color:red;">
This text will be written in red.
</p>
Set the Text Direction
• The following example demonstrates how to set
the direction of a text.
• Possible values are ltr or rtl.
<p style="direction:rtl;">
This text will be renedered from right to
left
</p>
Set the Space between Characters
• The following example demonstrates how to set
the space between characters.
• Possible values are normal or a number
specifying space.
<p style="letter-spacing:5px;">
This text is having space between letters.
</p>
 Set the Space between Words
• The following example demonstrates how to
set the space between words.
• Possible values are normal or a number
specifying space.
<p style="word-spacing:5px;">
This text is having space between words.
</p>
 Decorating the Text
• The following example demonstrates how to decorate
a text.
• Possible values are none, underline, overline, line-
through, blink.
<p style="text-decoration:underline;">
This will be underlined
</p>
<p style="text-decoration:line-through;">
This will be striked through.
</p>
<p style="text-decoration:overline;">
This will have a over line.
</p>
<p style="text-decoration:blink;">
This text will have blinking effect
<style>
p{
width: 140px;
border: 1px solid #000000;
}
p.a {
word-break: normal;
}
p.b {
word-break: keep-all;
}
p.c {
word-break: break-all;
}
</style>
</head>
<body>
<h1>The word-break Property</h1>
<h2>word-break: normal (default):</h2>
<p class="a">This is someveryveryverylong word. Words will break according to usual rules.</p>
<h2>word-break: keep-all:</h2>
<p class="b">This is someveryveryverylong word. This text will-break-at-hyphens.</p>
<h2>word-break: break-all:</h2>
Exercise: Practice CSS Text Properties
• Text Color
• Text alignment
– Left
– Right
– Center
– jestify
• Text direction
– Rtl
– ltr
• Text Decoration
– text-decoration-line
– text-decoration-color
– text-decoration-style
– text-decoration-thickness:
• Text-indent: length|%/initial|inherit;
• Text-emphasis: none|filled|open|dot|circle|triangle
• Text Letter Spacing: normal| length|%/initial|inherit;
• Text Shadow
/* offset-x | offset-y | blur-radius | color */
 Images
• Images play an important role in any webpage.
Though it is not recommended to include a lot of
images, but it is still important to use good images
wherever required.
• CSS plays a good role to control image display. You
can set the following image properties using CSS.
– The border property is used to set the width of an image
border.
– The height property is used to set the height of an image.
– The width property is used to set the width of an image.
– The -moz-opacity property is used to set the opacity of
an image.
60
 The Image Border Property
• The border property of an image is used to set the
width of an image border.
• This property can have a value in length or in %.
• A width of zero pixels means no border.
• Here is an example:
<img style="border:0px;“
src="/images/css.gif"/> <br/>
<img style="border:3px dashed red;”
src="/images/css.gif" />
 The Image Height Property
• The height property of an image is used to set
the height of an image.
• This property can have a value in length or in %.
• While giving value in %, it applies it in respect of
the box in which an image is available.
• Here is an example:
<img style="border:1px solid red; height:100px;"
src="/images/css.gif" />
<br />
<img style="border:1px solid red; height:50%;"
src="/images/css.gif" />
 Links
• In web development, a "link" generally refers to an HTML
element that allows the user to navigate from one web page
to another or to another resource, such as a style sheet, an
image, or a script.
• The HTML <a> (anchor) element is the most common way to
create links.
– The :link signifies unvisited hyperlinks.
– The :visited signifies visited hyperlinks.
– The :hover signifies an element that currently has the user's
mouse pointer hovering over it.
– The :active signifies an element on which the user is currently
clicking.
• Remember a:hover MUST come after a:link and a:visited in
the CSS definition in order to be effective. Also, a:active
63
MUST come after a:hover
• Usually, all these properties are kept in the header
part of the HTML document.
• Remember a:hover MUST come after a:link and
a:visited in the CSS definition in order to be
effective.
• Also, a:active MUST come after a:hover in the CSS
definition as follows:
<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
Set the Color of Links
• The following example demonstrates how to set
the link color.
• Possible values could be any color name in any
valid format.
<style type="text/css">
a:link {color:#000000}
</style>
<a href="/html/index.htm">Black Link</a>
 Change the Color of Links when Mouse is Over
• The following example demonstrates how to
change the color of links when we bring a mouse
pointer over that link.
<style type="text/css">
a:hover {color: #FFCC00}
</style>
<a href="/html/index.htm">Bring Mouse Here</a>
The border-style Property
• The border-style property allows you to select
one of the following styles of border:
– none: No border. (Equivalent of border-width:0;)
– solid: Border is a single solid line.
– dotted: Border is a series of dots.
– dashed: Border is a series of short lines, etc.
• The following example shows all these border styles:
<p style="border-width:4px; border-
style:none;">
This is a border with none width.</p>
<p style="border-width:4px; border-style:
solid;">
This is a solid border.</p>
<p style="border-width:4px; border-style:
dashed;">
This is a dashed border.</p>
<p style="border-width:4px; border-style:
double;">
This is a double border.</p>
<p style="border-width:4px; border-style:
groove;">
This is a groove border.
 Exercise: CSS Border Properties
• Practice the following CSS border properties.
• Border Margin
– left,
– right,
– top,
– bottom
• Border color
– Border-left-color,
– >> >>-right,
– >> >>- top,
– >> >>- bottom
• Border width
– border-bottom-width
– border-top-width
– border-left-width
– border-right-width
• Border-style 69
Margins
• The margin property defines the space around an
HTML element.
• It is possible to use negative values to overlap
content.
• We have the following properties to set an element
margin.
– The margin specifies a shorthand property for setting
the margin properties in one declaration.
– The margin-bottom specifies the bottom margin of an
element.
– The margin-top specifies the top margin of an element.
– he margin-left specifies the left margin of an element.
– The margin-right specifies the right margin of an
The Margin Property
• The margin property allows you to set all of the
properties for the four margins in one declaration.
• Here is the syntax to set margin around a
paragraph:
– <style type="text/css">
– p {margin: 15px}
– all four margins will be 15px
– p {margin: 10px 2%}
– top and bottom margin will be 10px, left and right
margin will be 2% of the total width of the document.
CSS
– </style>
Borders
• The border properties allow you to specify how the
border of the box representing an element should
look.
• There are three properties of a border you can
change:
– The border-color specifies the color of a border.
– The border-style specifies whether a border should be
solid, dashed line, double line, or one of the other
possible values.
– The border-width specifies the width of a border.
• The border-color Property
• The border-color property allows you to change the
color of the border surrounding an element.
• You can individually change the color of the
bottom, left, top and right sides of an element's
border using the properties:
– border-bottom-color changes the color of bottom
border.
– border-top-color changes the color of top border.
– border-left-color changes the color of left border.
– border-right-color changes the color of right border.
• The following example shows the effect of all these properties:
<style type="text/css">
p.example1{
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2{
border:1px solid; CSS
border-color:#009900; /* Green */
}
</style>
<p class="example1">
This example is showing all borders in different colors.
</p>
<p class="example2">
This example is showing all borders in green color only.
• The border-style Property
• The border-style property allows you to select one of the
following styles of border:
– none: No border. (Equivalent of border-width:0;)
– solid: Border is a single solid line.
– dotted: Border is a series of dots.
– dashed: Border is a series of short lines.
– double: Border is two solid lines.
– groove: Border looks as though it is carved into the page.
– ridge: Border looks the opposite of groove.
– inset: Border makes the box look like it is embedded in the
page.
– outset: Border makes the box look like it is coming out of the
canvas.
– hidden: Same as none, except in terms of border-conflict
• Example
<p style="border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style="border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style="border-width:4px; border-style:dashed;">
This is a dahsed border.
• The border-width Property
• The border-width property allows you to set the
width of an element borders.
• The value of this property could be either a length
in px, pt, or cm, or it should be set to thin, medium,
or thick.
• You can individually change the width of the
bottom, top, left, and right borders of an element
using the following properties:
– border-bottom-width changes the width of bottom
border.
– border-top-width changes the width of top border.
– border-left-width changes the width of left border.
 Exercise: CSS Border Properties
• Practice the following CSS border properties.
• Border Margin
– left,
– right,
– top,
– bottom
• Border color
– Border-left-color,
– >> >>-right,
– >> >>- top,
– >> >>- bottom
• Border width
– border-bottom-width
– border-top-width
– border-left-width
– border-right-width
• Border-style 78
2.11. Cursors and Outlines
• The cursor property of CSS allows you to specify
the type of cursor that should be displayed to the
user.
• One good usage of this property is in using images
for submit buttons on forms.
• By default, when a cursor hovers over a link, the
cursor changes from a pointer to a hand.
However, it does not change form for a submit
button on a form.
• Therefore, whenever someone hovers over an
image that is a submit button, it provides a visual
clue that the image is clickable.
<p>Move the mouse over the words to see the
cursor change:</p>
<div style="cursor:auto">Auto</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:default">Default</div>
<div style="cursor:pointer">Pointer</div>
<div style="cursor:move">Move</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
Outlines
• Outlines are very similar to borders, but there are few
major differences as well:
– An outline does not take up space.
– Outlines do not have to be rectangular.
– Outline is always the same on all sides; you cannot specify
different values for different sides of an element.
• You can set the following outline properties using CSS.
– The outline-width property is used to set the width of the
outline.
– The outline-style property is used to set the line style for the
outline.
– The outline-color property is used to set the color of the
outline.
– The outline property is used to set all the above three
• The outline-style Property
• The outline-style property specifies the style for the line
(solid, dotted, or dashed) that goes around an element.
• It can take one of the following values:
– none: No border. (Equivalent of outline-width:0;)
– solid: Outline is a single solid line.
– dotted: Outline is a series of dots.
– dashed: Outline is a series of short lines.
– double: Outline is two solid lines.
– groove: Outline looks as though it is carved into the page.
– ridge: Outline looks the opposite of groove.
– inset: Outline makes the box look like it is embedded in the
page.
– outset: Outline makes the box look like it is coming out of the
canvas.
• Here is an example:
<p style="outline-width:thin; outline-style:solid;">
This text is having thin solid outline.
</p>
<br /> CSS
<p style="outline-width:thick; outline-style:dashed;">
This text is having thick dashed outline.
</p>
<br />
<p style="outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
</p>
• The outline-color Property
• The outline-color property allows you to specify the color of the outline.
Its value should either be a color name, a hex color, or an RGB value, as
with the color and border-color properties.
• Here is an example:
<p style="outline-width:thin; outline-style:solid;
outline-color:red">
This text is having thin solid red outline.
</p>
<br />
<p style="outline-width:thick; outline-style:dashed;
outline-color:#009900">
This text is having thick dashed green outline.
</p>
<br /> CSS
<p style="outline-width:5px;outline-style:dotted;
outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
The Outline Property
• The outline property is a shorthand property that allows you to
specify values for any of the three properties discussed previously
in any order but in a single statement.
• Here is an example:
– <p style="outline:thin solid red;">
– This text is having thin solid red outline.
– </p>
– <br />
– <p style="outline:thick dashed #009900;">
– This text is having thick dashed green outline.
– </p>
– <br />
– <p style="outline:5px dotted rgb(13,33,232);">
– This text is having 5x dotted blue outline.
– </p>
SCROLLBARS

• There may be a case when an element's content

might be larger than the amount of space
allocated to it.
• CSS provides a property called overflow, which
tells the browser what to do if the box's contents
is larger than the box itself.
• This property can take one of the following
values:
<style type="text/css"> </style>
.scroll{ <p>Example of scroll value:</p>
<div class="scroll">
display:block;
I am going to keep lot of content here just to
border: 1px solid red; show
padding:5px; you how scrollbars works if there is an
margin-top:5px; overflow in
width:300px; an element box. This provides your
horizontal as well
height:50px;
as vertical scrollbars.
overflow:scroll;
</div>
} <br />
.auto{ <p>Example of auto value:</p>
display:block; <div class="auto">
border: 1px solid red; I am going to keep lot of content here just to
show
padding:5px;
you how scrollbars works if there is an
margin-top:5px; overflow in
width:300px; an element box. This provides your
height:50px; horizontal as well
overflow:auto; as vertical scrollbars.
 Exercise: Practice the following CSS
Properties
• Cursor properties such as
– Default
– Auto,
– Crosshair,
– Pointer,
– Move
– E-resize
– Ne-resize
• Outline properties
– Outline Color
– Outline Style
– Outline Width
• Scrollbar
– Hidden
– Auto
90
– Visible
 HTML Forms
• An HTML form is used to collect user input. The user input is most
often sent to a server for processing .
• The HTML <form> element is used to create an HTML form for user
input:
<form>
/*
form elements
*/
</form>
• The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.
• The <input> Element
• The HTML <input> element is the most used form element.
• An <input> element can be displayed in many ways, depending on 91
Examples:

Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of
many choices)
<input Displays a checkbox (for selecting zero or
type="checkbox"> more of many choices)
<input Displays a submit button (for submitting the
type="submit"> form)
<input Displays a clickable button
type="button">

92
• Text Fields
– The <input type="text"> defines a single-line input field
for text input.
– Example: A form with input fields for text:
<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body> 93
• The <label> Element
– Notice the use of the <label> element in the example
above.
– The <label> tag defines a label for many form elements.
– The <label> element is useful for screen-reader users,
because the screen-reader will read out loud the label
when the user focuses on the input element.
• Radio Buttons
– The <input type="radio"> defines a radio button.
– Radio buttons let a user select ONE of a limited number
of choices.

94
<html>
<body>
<h2>Radio Buttons</h2>
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language"
value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
</body>
</html> 95
• Checkboxes
– The <input type="checkbox"> defines a checkbox.
– Checkboxes let a user select ZERO or MORE options of a
limited number of choices.
• Example
<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
</body> 96
Submit Button
– The <input type="submit"> defines a button for
submitting the form data to a form-handler.
– The form-handler is typically a file on the server
with a script for processing input data.
– The form-handler is specified in the form's
action attribute.
– Example
– A form with a submit button:

97
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe"><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> 98
HTML Div Element
• The <div> element is used as a container for other
HTML elements.
• The <div> element is by default a block element,
meaning that it takes all available width, and
comes with line breaks before and after.
• Example
• A <div> element takes up all available width:

99
Example1:
<html>
<style>
div { background-color: #FFF4A3;}
</style>
<body>
<h1>HTML DIV Example</h1>
Lorem Ipsum <div>I am a div</div> dolor sitamet.
<p>The yellow background is added to demonstrate the footprint of the DIV element.</p>
</body>
</html>
Example2
<!DOCTYPE html>
<html>
<style>
div { background-color: #FFF4A3;}
</style>
<body>
<h1>HTML DIV Example</h1>
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<p>The yellow background is added to demonstrate the footprint of the DIV element.</p> 100
</body>
 Center align a <div> element
• If you have a <div> element that is not 100% wide, and you
want to center-align it, set the CSS margin property to auto.
<style>
div {width:300px; margin:auto;}
</style>
• Multiple <div> elements
– You can have many <div> containers on the same page.
• Aligning <div> elements side by side
• When building web pages, you often want to have two or
more <div> elements side by side, like this:
• There are different methods for aligning elements side by
side, all include some CSS styling.
– Float: The CSS float property is used for positioning and formatting
content and allow elements float next to each other instead of 101
on
– Inline-block: If you change the <div> element's display property from
block to inline-block, the <div> elements will no longer add a line
break before and after, and will be displayed side by side instead of
on top of each other.
– Flex: The CSS Flexbox Layout Module was introduced to make it
easier to design flexible responsive layout structure without using
float or positioning.
– To make the CSS flex method work, surround the <div> elements with
another <div> element and give it the status as a flex container.
– Grid: The CSS Grid Layout Module offers a grid-based layout system,
with rows and columns, making it easier to design web pages without
having to use floats and positioning.
– Sounds almost the same as flex, but has the ability to define more
than one row and position each row individually.
– The CSS grid method requires that you surround the <div> elements
with another <div> element and give the status as a grid container,
and you must specify the width of each column.
102
Float Example
<html>
<style>
div.mycontainer {
width:100%;
overflow:auto;
}
div.mycontainer div {
width:33%;
float:left;
}
</style>
<body>
<div class="mycontainer">
<div style="background-color:#FFF4A3;">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<div style="background-color:#FFC0C7;">
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</div>
</div> 103
</body>
Example: Inline block
<html>
<style>
div {
width:30%;
display:inline-block;
}
</style>
<body>
<div style="background-color:#FFF4A3;">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<div style="background-color:#FFC0C7;">
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</div>
</body> 104
Example: Flex
<html>
<head>
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>
</head>
<body>
<h1>Flexbox Example</h1>
<p>Align three DIV elements side by side.</p>
<div class="mycontainer">
<div style="background-color:#FFF4A3;">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<div style="background-color:#FFC0C7;">
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million.</p>
</div> 105
</div>
 Example: Grid
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
</head>
<body>
<h1>Grid Example</h1>
<p>Align three DIV elements side by side.</p>
<div class="grid-container">
<div style="background-color:#FFF4A3;">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<div style="background-color:#FFC0C7;">
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</div>
</div> 106
</body>
 HTML <fieldset> and <legend>Tag
• The <fieldset> tag is used to group related elements
in a form.
• The <fieldset> tag draws a box around the related
elements.
• Example
• Use CSS to style <fieldset> and <legend>:

107
<html>
<head>
<style>
fieldset { background-color: #eeeeee;}
legend { background-color: gray; color: white;
padding: 5px 10px;}
input { margin: 5px;}
</style>
</head>
<body>

108
<h1>The fieldset element + CSS</h1>
<form action="/action_page.php">
<fieldset>
<legend>Personal-info:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>

109
110
Exercise: Develop the following Registration Form
using Form and Div elements.

111
Exercise2: Create the following form.

112
Assignment

113