This is css which compiled by alex that is impo

MODULE TITLE: Developing cascading style sheets
MODULE CODE: EIS WDDBA3 M05 0322
NOMINAL DURATION: 90 Hours
Prepared by: Alebel Ayalneh
Web Development
and Database Administration
Level III
3/18/2024 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
language.
 It provides an additional feature to HTML.
 It is generally used with HTML to change the style of web pages and user
interfaces.

Designed to specify the overall appearance of web pages as well as the
appearance and structure of the text and elements such as images and buttons on
web pages and their layout.
 CSS is used along with HTML and JavaScript in most websites to create user
interfaces 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
content of HTML documents not being separated from the layout of the
documents.

This problem arise when the two most popular web browsers (Netscape and Internet Explorer)
continuously 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
of 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
specification.
The World Wide Web Consortium (W3C) - the organization responsible for developing and
maintaining 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
and 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

What does “cascading” mean?
In Cascading Style Sheets, the term “cascading” refers to what computer people call the order of
precedence—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
global styles.
 Page-specific style information is kept in a special section of the document, called the head, that’s
separate from the text. It defines the way a particular page looks. If page-specific information is
given, it takes precedence over global styles.
 Global styles are specified in a separate style sheet file. They come into play unless conflicting
element- or page-specific styles are given.

Figure 1: The cascading model of style definitions.

What is Style in CSS?
 Styles Styles are a relatively new element for HTML, but they have revolutionized how
HTML documents are coded and rendered.
 Styles are the main basis behind the “extensible” in XHTML—they allow Web authors to
create 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
understanding HTML styles.
 Note Styles are typically presented in the context of cascading, as in the Cascading Style
Sheet (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
supercede previously defined styles, hence the cascade.

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.

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.

1.1.4 Style Rule Locations
 Styles can be defined within your HTML documents or in a separate,
external style sheet. You can also use both methods within the same
document. The following sections cover the various methods of defining
styles

1. Using the <style> element
 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.
 A document’s <style> section must appear inside the document’s
<head> section, although multiple <style> sections are permissible.
 The <style> tag has the following, minimal format:
<style type=“text/css”>
... style definitions ...
</style>

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.

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.

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.

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; }
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>A Sample Heading</h1> ...

 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.

 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

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;">
18

1.2 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.
 Defining your goals
 Defining your audience
 Developing competitive and market analysis

 Designing your site’s structure
 Choosing a design theme
 Constructing the site
 Testing and evaluating the site
 Marketing the site

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?
 For example, do you want to use your site to sell products, or to
drive the PR process? You may want to disseminate news, or build
customer service applications.

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) to content and even
navigation questions. A sophisticated audience, for example, may not need as much
navigational guidance as a more general audience.
3. Competitive and market 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. For example, if your competition’s site consists of difficult-to -
read type, you can make sure your site gets high usability ratings by making your
site extremely easy to read.

4. Requirements analysis
 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. Designing the site structure
The site structure is usually defined in a requirements document. This usually
involves a schematic drawing of how the Web site should flow, and which
pages are parents and which are children. As shown in schematic for a very
simple Web site containing only a few pages.

6.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. If you have database-driven
content, you’ll need to include the kind of database you expect to use in your
considerations regarding a Web server environment
7. 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. If you operate a fish store, your theme is pretty obvious. It
may not be as obvious if you run a general interest site. In that case, carefully
examine your market analysis and design accordingly.

Testing and evaluating the site :When your Web site is finished, you want to test it before serving
it to the public.

Creating a requirements analysis
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.

This is css which compiled by alex that is impo

Recommended

Recommended

More Related Content

Similar to This is css which compiled by alex that is impo

Similar to This is css which compiled by alex that is impo (20)

Recently uploaded

Recently uploaded (20)

This is css which compiled by alex that is impo