UNIT I.

IMPROVING THE
APPEARANCE OF THE
WEBPAGE
 OVERVIEW
Using HTML, developers layout content within a
webpage, specifying headers, paragraphs, tables,
images, and more. For years, developers would
say that HTML “formats a webpage”. It’s
preferable to say that HTML specifies the
webpage elements and layout, and cascading
style sheet attributes specify the actual formatting.
LEARNING OBJECTIVES
This chapter examines how to use Cascading
Style Sheets (CSS) to format webpages. By the
time we finish this unit; we will be able to:
Identify the use of Cascading Style Sheet (CSS);
Use the CSS syntax; and
Define the term “cascading style sheets”.
WEB PAGE DEVELOPMENT
EXPLAINED
HTML (Hypertext Mark-Up Language)
- It is the building Blocks of a webpage or the standard markup language for documents designed
to be displayed in a web browser.

CSS (Cascading Style Sheet

- Is used for styling and organizing webpages to make it look good and presentable.

Javascript
- Is the most commonly used programming language in the world and considered as the core
technologies of the World Wide Web. It is used to add functionality and dynamics to a web page.
HTML

CSS

JavaScript
WHAT IS CASCADING
STYLE SHEET?
CSS is one of the scripting languages used to
characterize the layout of an HTML document.
CSS lets web developers determine how HTML
components are to be viewed on various
platforms and screen sizes. It's doing a lot of time.
You can transform the style of several web pages
into more enticing and user-friendly at the same
time.
CSS Example:
 CSS can be a big help to Web developers to
solve a problem when it comes in designing a
webpage especially for the developers with less
time to design or have a limited designing skills
because HTML was never intended to contain
tags for formatting a webpage. It was created to
describe the content of a web page, like:
 Once tags like < font > and color attributes
were introduced to the HTML 5.0 specification,
a nightmare for web developers began. The
creation of large websites, where fonts and
color details have been applied to each page,
has become a lengthy and expensive
operation. CSS was developed by the World
Wide Web Consortium (W3C) to address this
problem.
 The CSS also avoids the shape or layout of
the HTML template which lets the developer
minimize the time taken to construct their
website. Style definitions are usually contained
in external files with a.css file extension. Using
an external CSS file, the developer can
change the look of the entire website by
simply changing only one file and not the
entire document.
CSS SYNTAX
Throughout the discussion, you have
made use of attributes to control an element,
in HTML5 attribute provides additional
information about the specific element, and
always specified in the opening tag. The
style attribute can be used to set the style of
a specific HTML element.
CSS syntax is consisting of a selector and a
declaration block:
 The selector points to the HTML attribute
you want to format, such as title, post, body,
etc. The declaration block consists of one or
more declarations, and each declaration
includes a name for the CSS property and a
value separated by a colon. Multiple CSS
declarations are divided by semicolons, and
the declaration blocks are enclosed by curly
braces.
Example:
In this example all <p></p> elements will be
center-aligned.

p {text-align:center}

Example explained that p is a selector in CSS (it

points to the HTML element you want to style:
<p>) text-align is a property, and center is the
property value
HOW CAN WE APPLY CSS IN A WEBPAGE?

There are four ways on how to apply CSS

in a webpage. These are the following:
1. Inline CSS
 Inline CSS is used for applying style to a particular HTML tag.
This style is easy to apply in an HTML element but the least
recommended styling method because of the difficulty it brings in
managing larger websites. The use of this style often leads to
redundancy of effort. This style is useful for testing and previewing
changes.
Add the type attribute to the specific tag to use the inline types.
The style attribute can include all of the CSS properties. The
example illustrates how to change the color and the left side of the
paragraph:
<p style="color:red ;margin-left:20px;">This is a paragraph.</p>
2. Internal or Embedded
CSS
 Internal CSS code is put in the <head> section of a
particular web page. Classes and IDs can be used to
refer to the CSS code. This style will be effective for
the whole web page. If you want to set an element with
the same appearance like <p></p> the embedded
style is good to use. To incorporate the internal CSS in
your HTML documents you need to put the declaration
block between <style> </style> tags.
 When a particular page has a specific theme, an internal
style sheet will be used. You describe internal styles in the
head portion of the HTML file, inside the <style> attribute, like
this:
<head>
<style>
hr {color: pink;}
p {margin-left: 20px;}
body {background-image: url("background2.jpg");}
</style>
</head>
3. External CSS
 An external style sheet is ideal if the style
is applied to a number of pages. With an
external style sheet, you can alter the
appearance of the whole website by
modifying just one page.
 Each page must include a link to the < link > style
sheet. The < link > tag is within the head section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
4. CSS Framework
 A CSS framework is a library allowing for easier, more
standards-compliant web design using the Cascading
Style Sheets language. Most of these frameworks
provide at least a grid particularly for responsive web
design. More functional systems also come with more
functionality and extra functions, but mainly design
oriented and based on immersive user interface trends.
Bootstrap and Framework are two popular and
commonly used examples of CSS frameworks.
Assignment
1. Using a Source Code Editor, create an HTML
file that will produce the same output as shown
below:
2. The title should be “Laboratory 1”
3. Save the file as Laboratory1.html
4. Change the background-color of the whole web
page to “Tomato”.
5. Using inline styles and the color property to
display <h1> tag contents in blue.
6. Add embedded style definitions to display all
paragraph text in red italics at 12 points.
 Assignment will be submitted in google
drive on Sunday (August 22, 2021) to be
posted in our chat group.
Advance Preview

UNIT II.

USING INLINE CSS, INTERNAL CSS

AND EXTERNAL CSS