CSS as Emerging Technology

INTRODUCTION
This module will introduce the Cascading Style Sheet in web
design. CSS is important because it controls all design-related aspects
of your website. Typography, colours, page layouts and any other
visual aspects of your website are all controlled by CSS.

What's more, CSS allows you to control and adjust the design
and formatting of your entire website (no matter how big or small it is)
from a single spot.

Towards this end, this module will help you write creative web
pages in an efficient and effective manner.

MODULE 2 61 | P a g e
62 | P a g e
LESSON 1: INTRODUCTION TO
CASCADING STYLE SHEETS
(CSS)

In this lesson, you learn the CSS as a foundation for web programming.
You will be familiarizing with the terminologies in CSS and you will be also learn
the functions of CSS to create web pages. Finally, you will be able to learn
different techniques, design and implementation in creating web pages.

LEARNING OUTCOMES

At the end of this lesson, the students shall be able to:

 Understand the Cascading Style Sheet (CSS)

 Familiar the advantages of CSS in the construction of web
pages, and;
 Apply the functions of CSS to develop web pages

63 | P a g e
WHAT IS CSS?

CSS stands for "Cascading Style Sheet". The word “cascade” means a process
whereby something, typically information or knowledge, is successively passed
on. In other words, cascading style sheets are used to format the layout of Web
pages whereby the layout from one page is successively passed on the other web
pages. CSS can be used to define text styles, table sizes, and other aspects of
Web pages that previously could only be defined in a page's HTML.

CSS helps web developers create a uniform look across several pages of a Web
site. Instead of defining the style of each table and each block of text within a
page's HTML, commonly used styles need to be defined only once in a CSS
document. Once the style is defined in cascading style sheet, it can be used by
any page that references the CSS file. Plus, CSS makes it easy to change styles
across several pages at once. For example, a Web developer may want to
increase the default text size from 10pt to 12pt for fifty pages of a Web site. If the
pages all reference the same style sheet, the text size only needs to be changed
on the style sheet and all the pages will show the larger text.

While CSS is great for creating text styles, it is helpful for formatting other aspects
of Web page layout as well. For example, CSS can be used to define the cell
padding of table cells, the style, thickness, and color of a table's border, and the
padding around images or other objects. CSS gives Web developers more exact
control over how Web pages will look than HTML does. This is why most Web
pages today incorporate cascading style sheets.

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

SELECTOR DECLARATION DECLARATION

h1 {color:blue; font-size:20px;}
Property Value Property Value

 The selector points to the HTML element you want to style.

 The declaration block contains one or more declarations separated by
semicolons.

64 | P a g e
  Each declaration includes a CSS property name and a value, separated by a
colon.
 A CSS declaration always ends with a semicolon, and declaration blocks
are surrounded by curly braces.
 In the following example all <p> elements will be center-aligned, with a
red text color:

Example:

p{
color: red;
text-align: center;
}

CSS Selectors

 CSS selectors are used to "find" (or select) HTML elements based on their
element name, id, class, attribute, and more.

 is the part of a CSS rule set that actually selects the content you want to
style. Let's look at all the different kinds of selectors available, with a brief
description of each.

The element Selector

The element selector selects elements based on the element name.

You can select all <p> tags on a page like this (in this case, all <p>
elements will be center-aligned, with a red text color):

Example:

p{
text-align: center;
color: red;
}

65 | P a g e
Here’s an example:

<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>

<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

Sample Output

The id Selector

 The id selector uses the id attribute of an HTML element to select a

specific element.
 The id of an element should be unique within a page, so the id selector
is used to select one unique element!

66 | P a g e
 To select an element with a specific id, write a hash (#) character,
followed by the id of the element.

Example:

.center {
text-align: center;
color: red;
}

Remember this: An id name cannot start with a number!

Example with an output:

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

67 | P a g e
Sample Output:

The class Selector

 The class selector selects elements with a specific class attribute.

 To select elements with a specific class, write a period (.) character,
followed by the name of the class.

Example:
.center {
text-align: center;
color: red;

Remember this: A class name cannot start with a number!

Here’s an example:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>

68 | P a g e
 <body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>

Sample Output

Here’s another example. This time, you can also specify that only specific
HTML elements should be affected by a class, the <p> elements with
class="center" will be center-aligned:

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-
aligned.</p>
</body>
</html>

Sample Output

69 | P a g e
Grouping Selectors

If you have elements with the same style definitions, like this:

h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}

It will be better to group the selectors, to minimize the code. To group

selectors, separate each selector with a comma. In the example below we
have grouped the selectors from the code above.

Example:

h1, h2, p {
text-align: center;
color: red;
}

Here’s an example:

70 | P a g e
 <!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

Sample Output

71 | P a g e
 TEST YOURSELF

TRUE OR FALSE. Write T if the statement is correct and F if the statement

is wrong.

______________1. A class name cannot start with a number.

______________2. The id of an element should be unique within a page, so

the id selector is used to select one unique element.

______________3. Parameters are used to "find" (or select) HTML elements

based on their element name, id, class, attribute, and more.

______________4. Who invented the HTML?

______________5. To select elements with a specific class, write a period (.)

character, followed by the name of the class.

72 | P a g e
LESSON 2: INSERTING CSS

In this lesson, you learn the different ways or methods to insert CSS into
the web pages. It is essential that you will know and identify which technique to
use in a particular situation. Choosing the appropriate method to a particular
condition will save you great time and resources.

LEARNING OUTCOMES

At the end of this lesson, the students shall be able to:

 Know the ways how to insert CSS;

 Identify situations when to use a method to insert CSS; and
 Write web pages applying the methods to insert CSS.

73 | P a g e
From the previous lesson, inserting CSS can be easily done. However, there are
certain situations where inserting a CSS inside the web page can be very tiring
especially if the design you wish to apply should be reflected in all of the web
pages in your website. For example, your website has around 50 web pages, and
you would like that all paragraphs appear in red color with yellow background.
Doing all of these configurations in all web pages can be very time consuming.

On the other hand, you would only like that a new design will only be done to
one particular page. Obviously, doing the design that will affect all web pages
cannot provide to you your desired results.

Therefore, as a web designer, it is essential that you will have the skills to identify
when to use a method in inserting CSS.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

 External style sheet
 Internal style sheet
 Inline style

External Style Sheet

With an external style sheet, you can change the look of an entire website by
changing just one file. This is one of the best method of adding the css styling to
a HTML page. Each page must include a reference to the external style sheet file
inside the <link> element. The <link> element goes inside the <head> section.

Syntax:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Here’s an example:

main.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">

74 | P a g e
 </head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

mystyle.css
h1{
text-align: center;
color: red;
}

p{
color: blue;
}

In this example, there are two files that were created. The first file was the .html
file. This is the recipient file. You can have more than one .html file. The most
important element in this file with respect to the external CSS is the <link>
element. All .html files that you want to have the same design should have the
same <link> element pointing to the CSS file.

The second file in the example is the .css file. In this file, all the configurations are
located. Any changes in this file will affect all HTML files that were pointed to it.

Sample Output

75 | P a g e
Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section
of an HTML page:

If you do not want to have a separate style sheet then you can simply write your
CSS in the head section of HTML page like this: Remember to enclose the code
within <style> and </style> tags.

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Sample Output

76 | P a g e
Inline Styles

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.

Same way we can style other HTML elements using this inline styling method.
Even though it is easier to code the things using this method, still it is not
recommended when we build a website or an online application. The reason is
that if any change is required you need to make that change in the HTML code
itself. It is much easier to maintain a separate style sheet.

The example below shows how to change the color and the left margin of a <h1>
element.
<h1 style="color:blue; margin-left:30px;">This is a heading</h1>

Multiple Style Sheets

If some properties have been defined for the same selector (element) in different
style sheets, the value from the last read style sheet will be used. Assume that an
external style sheet has the following style for the <h1> element:

h1 {
color: navy;
}

then, assume that an internal style sheet also has the following style for the <h1>
element:

h1 {
color: orange;
}

If the internal style is defined after the link to the external style sheet, the <h1>
elements will be "orange". For example:

77 | P a g e
 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1 style="color:blue; margin-left:30px;">This is a heading</h1>
<p>The style of this document is a combination of an external
stylesheet, and internal style</p>
</body>
</html>

Sample Output

Cascading Order

Now the most important question is “What style will be used when there is more
than one style specified for an HTML element?”

Generally speaking, we can say that all the styles will "cascade" into a new
"virtual" style sheet by the following rules, where number one has the highest
priority:
 Inline style (inside an HTML element)

78 | P a g e
  External and internal style sheets (in the head section)
 Browser default
 So, an inline style (inside a specific HTML element) has the highest priority,
which means that it will override a style defined inside the <head> tag, or
in an external style sheet, or a browser default value.

Here’s an example:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
h1 {color:red;}
</style>
</head>
<body style="background-color: lightcyan">
<h1 style="margin-left:30px;">Multiple Styles Will Cascade into
One</h1>
<p>In this example, the background color is set inline, in an internal
stylesheet, and in an external stylesheet.</p>
<p>Try experimenting by removing styles to see how the cascading
stylesheets work. (try removing the inline first, then the internal, then
the external)</p>
</body>
</html>

Sample Output

79 | P a g e
 TEST YOURSELF

TRUE OR FALSE. Write T if the statement is correct and F if the statement

is wrong.

______________1. Each page must include a reference to the external style

sheet file inside the <link> element.

______________2. The file type of an external stylesheet file is .html.

______________3. An inline style has the highest priority,

______________4. An external stylesheet may be used to apply a unique style

for a single element.

______________5. Styles in an external stylesheet can be applied to multiple

files.

80 | P a g e
 ENRICHMENT ACTIVITY

For more on CSS, visit the W3Schools website at

https://www.w3schools.com/css/default.asp

Write five files on any topic of your choice. It should be 4 HTML files and 1 CSS
file. For the four HTML files, 1 HTML file should contain Inline stylesheet, 1 HTML
should contain internal stylesheet and the 2 HTML files should have links to
external CSS. The CCS file should contain styles for the 2 HTML files with external
CSS.

81 | P a g e
 REFERENCES

Marmelo V. Abante. Web Application Programming. Manila Mindshapers Co., Inc.,

2018.

Jennifer Niederst Robbins. Learning Web Design - A Beginner’s Guide to HTML,

CSS, JavaScript, and Web Graphics. O’Reilly Media, Inc., Canada, 2018.

Per Harald Borgen. Learn CSS in 5 minutes - A tutorial for beginners.

https://www.freecodecamp.org/news/get-started-with-css-in-5-minutes-
e0804813fc3e/, 2018.

Micheal Knapp. HTML and CSS. Learn The Fundamentals In 7 days [ebook]. Lito
Publishing, 2017.

CSS Tutorial. Tutorial Republic. https://www.tutorialrepublic.com/css-tutorial/

Learn CSS. Code Academy. https://www.codecademy.com/learn/learn-css

82 | P a g e