Web Development

and Database Administration

Level III
MODULE TITLE: Developing cascading style sheets
MODULE CODE: EIS WDDBA3 M05 0322

NOMINAL DURATION: 90 Hours

Prepared by: Alebel Ayalneh

01/23/24 prepared by Alebel Ayalneh

 LO1. Determine requirements and develop CSS
1.1 Introduction to CSS and basic design principles
1.1.1 Introduction to CSS
What is CSS?
 CSS stands for Cascading Style Sheets. It is a style sheet language which is
used to describe the look and formatting of a document written in markup la
nguage.
 It provides an additional feature to HTML.
 It is generally used with HTML to change the style of web pages and user in
terfaces.
01/23/24 prepared by Alebel Ayalneh
Designed to specify the overall appearance of web pages as well as the appearan
ce and structure of the text and elements such as images and buttons on web pag
es and their layout.
 CSS is used along with HTML and JavaScript in most websites to create user in

terfaces for web applications and user interfaces for many mobile applications.

CSS
Not just a language all its own, CSS is a part of HTML.
The first version of HTML to include CSS was HTML 4.0
CSS was added to HTML to solve a particular problem - the problem of the cont
ent of HTML documents not being separated from the layout of the documents.

01/23/24 prepared by Alebel Ayalneh

This problem arise when the two most popular web browsers (Netscape and Internet Explorer) contin
uously added new tags and attributes to the HTML specification.
Without the use of formatting tags, the layout of an HTML document was supposed to be taken care o
f by web browsers.
The original purpose of HTML tags was to specify the content that will appear on webpages, and not
their layout. But this was no longer the case, as Netscape and Internet Explorer added to the HTML s
pecification.
The World Wide Web Consortium (W3C) - the organization responsible for developing and maintaini
ng standards on the world wide web created CSS to solve the problem of content not being separated
from layout.
While CSS should be used to specify the overall appearance of webpages as well as the appearance an
d structure of the text and elements such as images and buttons on webpages and their layout, HTML/
XHTML should be used to specify the content on webpages
01/23/24 prepared by Alebel Ayalneh
What does “cascading” mean?
In Cascading Style Sheets, the term “cascading” refers to what computer people call the order of prece
dence—that is, which style information comes first in the style pecking order. Here’s the order:
 Element-specific style information comes first. This is style information that’s embedded within the
HTML. But wait—doesn’t this violate the structure versus presentation rule? Yes, but sometimes it’
s necessary. If element-specific information is given, it takes precedence over page-specific and glo
bal styles.
 Page-specific style information is kept in a special section of the document, called the head, that’s s
eparate from the text. It defines the way a particular page looks. If page-specific information is give
n, it takes precedence over global styles.
 Global styles are specified in a separate style sheet file. They come into play unless conflicting ele
ment- or page-specific styles are given.
01/23/24 prepared by Alebel Ayalneh
01/23/24 Figure 1: The cascading model of style definitions.
prepared by Alebel Ayalneh
What is Style in CSS?
 Styles Styles are a relatively new element for HTML, but they have revolutionized how HT
ML documents are coded and rendered.
 Styles are the main basis behind the “extensible” in XHTML—they allow Web authors to c
reate new styles to present their content in a variety of custom, but consistent formats.
 At their root, styles are simply an aggregation of display attributes, combined to achieve a
particular result. Those familiar with styles in word processing will have little trouble unde
rstanding HTML styles.
 Note Styles are typically presented in the context of cascading, as in the Cascading Style S
heet (CSS) standard. The CSS standard defines a method where several styles sheets (lists
of style definitions) can be applied to the same document— repeated style definitions super
cede previously defined styles, hence the cascade .
01/23/24 prepared by Alebel Ayalneh
1.1.2 What can be done with CSS?
Specify a background color
Specify a common style for one tag or a set of tags
Specify the distance between elements
Specify the appearance of links
Specify multiple styles for various webpages
 Generally :
 we can add new looks to your old HTML documents.
 You can completely change the look of your website with only a few changes in CSS code.

01/23/24 prepared by Alebel Ayalneh

1.1.3 Benefits of CSS
1) Solves a big problem:
Before CSS, tags like font, color, background style, element alignments, border and size
had to be repeated on every web page. This was a very long process. For example: If you
are developing a large website where fonts and color information are added on every
single page, it will be become a long and expensive process. CSS was created to solve this
problem. It was a W3C recommendation.
2) Saves a lot of time: CSS style definitions are saved in external CSS files so it is possible to
change the entire website by changing just one file.
3)Provide more attributes: CSS provides more detailed attributes than plain HTML to
define the look and feel of the website.

01/23/24 prepared by Alebel Ayalneh

 CSS Syntax A CSS rule-set consists of a selector and a declaration block:
CSS works by associating rules with HTML elements. These rules govern how the
content of specified elements should be displayed.
 A CSS rule contains two parts: a selector and a declaration.

 Selector: Selector indicates the HTML element you want to style. It could be
any tag like <h1>, <title> etc.
 Declaration Block: The declaration block can contain one or more
declarations separated by a semicolon.
For the above example, there are two declarations:
Color: blue;
Font-size: 12px;
01/23/24 prepared by Alebel Ayalneh
  Each declaration contains a property name and value, separated by a colon.

 Property: A Property is a type of attribute of HTML element. It could be color, border etc.

 Value: Values are assigned to CSS properties. In the above example, value "yellow" is
assigned to color property.
1.1.4 Style Rule Locations

 Styles can be defined within your HTML documents or in a separate, external st

yle sheet. You can also use both methods within the same document. The following s
ections cover the various methods of defining styles

01/23/24 prepared by Alebel Ayalneh

 1. Using the <style> element
2. The <style> element behaves like other HTML elements. It has a
beginning and ending tag and everything in between is treated as a
style definition. As such, everything between the <style> tags needs
to follow style definition guidelines.
3. A document’s <style> section must appear inside the document’s
<head> section, although multiple <style> sections are permissible.
4. The <style> tag has the following, minimal format:
<style type=“text/css”>
... style definitions ...
</style>

01/23/24 prepared by Alebel Ayalneh

2. External style sheets
You can also place your style definitions in a separate file
and reference that file within the documents where you
need it.
When creating a separate style sheet file, you do not need
to include the <style> tags, only the definitions.

01/23/24 prepared by Alebel Ayalneh

3. Style definitions within individual tags
Most HTML tags include a style attribute that allows you to specify styles
that should directly impact the tag in which they appear.
For example, if you wanted a particular <h1> tag to render its text in red,
you could use the following code:
<h1 style=“color: red;”>Red Headline</h1>
The only advantage to using styles in this manner is to remain HTML 4.01
compliant.

 It is a much better practice to put your styles in a <style> tag or external

style sheet than to code individual tags. However, sometimes you might find
that nudging a particular tag individually is advantageous.
01/23/24 prepared by Alebel Ayalneh
Understanding the Style Sheet Cascade
The concept behind Cascading Style Sheets is essentially that multiple style definitions can
trickle, or cascade, down through several layers to affect a document.
Several layers of style definitions can apply to any document.
Those layers are applied in the following order:
1) The user agent settings (typically, the user is able to modify some of these settings)
2) Any linked style sheets
3) Any styles present in a <style> element
4) Styles specified within a tag’s style attribute
Each level of styles overrides the previous level where there are duplicate properties being
defined.

01/23/24 prepared by Alebel Ayalneh

For example, consider the following two files:
mystyles.css
/* mystyles.css - Styles for the main site */
h1, h2, h3, h4 { color: blue; }
h1 { font-size: 18pt; }
h2 { font-size: 16pt; }
h3 { font-size: 14pt; }
h4 { font-size: 12pt; }
p { font-size: 10pt; }

index.html
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyles.css” />
<style type=“text/css”>
h1 { color: Red; }
</style>
</head>
<body>
<h1 style=“color:red;”>A Sample Heading</h1> ...

01/23/24 prepared by Alebel Ayalneh

 What color will the <h1> heading in index.html be?
The external style specifies blue, but the style element specifies
red. In this case, the internal style takes precedence and the <h1>
text will appear in red.
 one advantage to cascading is that documents at different levels or
from different departments can be similar, but have a slightly
different look or feel to match their origin.
 For example, you could have a company.css style sheet that is
linked to all corporate documents. You could also have an
hrdepartment.css style sheet that adds additional definitions or
replaces some of the standard corporate definitions to give HR
documents a slightly different look and feel.
01/23/24 prepared by Alebel Ayalneh
 In addition, a document may have multiple instances of
linked style sheets or<style> elements. In such cases,
the sheets are applied in order, with subsequent
definitions overriding any previous definitions.
 Note that properties are only overridden when they
appear multiple times. Otherwise, the styles are additive.
For example, the text in the <h1> tag would still be
rendered in 18pt type (from the external definition); only
the color would

01/23/24 prepared by Alebel Ayalneh

The three types of stylesheets
There are three types of stylesheets:

1. Internal/Embedded - Placed right on the page whose interface it will affect.

Embedded styles are styles that are embedded in the head of the document.

Embedded styles affect only the tags on the page they are embedded in.
<style type="text/css">
p { color: #00f; } </style>
2. External - Placed in a separate file.
3. Inline - Placed inside a tag it will affect.
Inline styles are styles that are written directly in the tag on the document.
Inline styles affect only the tag they are applied to.
<a href="" style="text-decoration: none;">

For detail see LO-2

19
 Basic CSS design principle
 To develop a quality Web site, you should begin to plan before you do
anything else. The Web development process consists of several broad steps,
beginning with planning and ending with execution and maintenance.
These include the following.
1. Defining your goals
The most obvious question to ask when developing a Web site is:
What is it for?
What are the objectives you want the site to achieve?
2. Defining your audience
Defining your audience will affect everything from the design of the site (a children’s site may
have lots of pastel colors or may even be a bit silly looking, whereas a science-related site
will require a different design approach)
01/23/24
to content and even navigation questions.
prepared by Alebel Ayalneh
3. Creating a requirements analysis
Discovering what your competition is doing not only helps you enhance your own market
position, but can also give you solid ideas on what and what not to do on your own Web site.
4. Designing your site’s structure
Most large sites start off with something called a Project Requirements Document or
Functional Requirements Document, which is a comprehensive document written in a word-
processing program that contains specifications about how the Web site or a specific feature
of a Web site is supposed to behave.
5. Specifying content
Another consideration when deciding what type of Web server software environment to
choose is what kind of content you have. If you have static HTML, it doesn’t matter what
kind of environment you have. You can just use the one that is most comfortable to you.

01/23/24 prepared by Alebel Ayalneh

6. Choosing a design theme
You should base your design theme on the target market analysis you perform at the opening stages of your
Web site development. Sometimes your design theme will be easy.

7. Constructing the site

The first step in constructing a site is deciding what kind of application server environment you’ll be using.
8. Testing and evaluating the site
When your Web site is finished, you want to test it before serving it to the public.To test the site, you
compare the site’s behavior to the requirements documents you produced at the early stages of your Web
site’s development.

9. Marketing the site

Once your site is live, you’ll want to find a way to get it noticed by your target audience.

01/23/24 prepared by Alebel Ayalneh

1.2. Obtaining user requirements for style
user requirements :Should describe functional and non-functional requirements so that they
are understandable by system users who don’t have detailed technical knowledge.
User requirements are defined using natural language, tables, and diagrams.
Gathering requirements
The first stage of any web designing project
 Is the process of understanding client’s requirement in a detailed manner?
Sources
 Users
 Reports
 Forms
 Procedures
Techniques
 Interviews
 Questionnaires
 Observation
 Document
01/23/24 prepared by Alebel Ayalneh
Objective of Gathering requirements
Establish a deep understanding of the intended users and their environment
Identify users’ unfulfilled needs
Specify which of those needs should be met
To clearly and thoughtfully understand the key goals, mission and derivatives of the project
To have a right picture of target audiences
To make the client-company relationship trusted
To reduce the chances of delivering unfocussed business solutions.
To eliminate project rework possibilities
Requirements gathering may occur throughout the product lifecycle. Traditional processes
establish the requirements at the beginning of the process.

01/23/24 prepared by Alebel Ayalneh

 1.3. Developing CSS to match user requirements

01/23/24 prepared by Alebel Ayalneh

LO2.Use CSS techniques to create web pages
2.1 Styling elements of a web page by using CSS techniques

01/23/24 prepared by Alebel Ayalneh

 LO2.Use CSS techniques to create web pages
2.1 Styling elements of a web page by using CSS techniques
2.1.1 CSS syntax
There are three parts in the CSS syntax:
selector {property: value}
selector - The selector is the HTML tag that a style will be applied to.
For example, the <p> tag for paragraphs or the <h2> heading tag.
property - The property is an aspect of the HTML tag that will be affected by the
stylesheet definition.
For example, the background color of a webpage or the color of links.
value - The value that the property of a selector will have. For example, the value of
the background color of a webpage can be green or the value of the color of links can
be gray.
27
Example: body {background-color: gray}

The property and value of a selector are separated by a

colon, and surrounded by curly braces.

If a value is more than one word, put quotes around it.

Example of value being more than one word:

h2 {font-family: "Trebuchet MS"}

If you specify more than one property, each property

should be separated with a semicolon.
Example of multiple properties: body {background-color:
gray; color: yellow;} 28
You can make style definitions more easily readable by

specifying each property on a separate line.

Example: body{

background-color: gray;

color: yellow;

margin-top: 0; }

29
Grouping styles

You can specify that a group of tags will have the same styles by grouping them

together.

Example: p, h1, h2, h3, h4

{ color: blue;

font-family: courier; }

In this example, all text declared with the tags <p>, <h1>, <h2>, <h3>, and <h4>

will be blue in color and Courier in font.

30
CSS Selector
CSS selectors are used to select the content you want to style.
Selectors are the part of CSS rule set. CSS selectors select
HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.

01/23/24 prepared by Alebel Ayalneh