Lesson 8, 9 & 10

Republic of the Philippines
POLYTECHNIC UNIVERSITY OF THE PHILIPPINES

INSTITUTE OF TECHNOLOGY
Management Technology Department
LESSON 8 CREATING STYLESHEETS

OVERVIEW:
CSS or Cascading Style Sheets allow you to control the layout of your HTML document.
It is a simple way to add style such as font, color and spacing. CSS is usually a text file that is
separate from your HTML file. HTML is used to define the page’s content while CSS is used to
define how the content and web page will look.
LEARNING OUTCOMES:
• Understand what CSS is and its kind
• Identify the CSS structure, its capabilities and advantages.
• Differentiate inline, internal and external CSS.
COURSE MATERIALS:
STYLE SHEETS
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
• Inline - by using the style attribute in HTML elements

• Internal - by using a <style> element in the <head> section
• External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files. However, here
we will use inline and internal styling, because this is easier to demonstrate, and easier for you
to try it yourself.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1> element to blue:
Example
<h1 style="color:blue;">This is a Blue Heading</h1>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
With an external style sheet, you can change the look of an entire web site, by changing
one file!
To use an external style sheet, add a link to it in the <head> section of the HTML page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
1 |O F A D 3 0 0 9 3 I N T E R N E T A N D W E B D E S I G N W I T H L A B O R A T O R Y F O R
ADMINISTRATIVE PROFESSIONALS
</head>
<body>
</body>
</html>
An external style sheet can be written in any text editor. The file must not contain any HTML
code, and must be saved with a .css extension.
Here is how the "styles.css" looks:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
LESSON 9 STYLING WITH CSS
OVERVIEW:
In this lesson, you will learn how to provide text with much more style and effects via
CSS. Furthermore, with text properties, you can indicate the alignment, decoration, indention,
case and line spacing.
LEARNING OUTCOMES:
• Understand typography
• Identify font, text properties and CSS styles
• Know how to change font, size, case, alignment, indent, spacing and color.
• Apply a background color and border to a text.
COURSE MATERIALS:
STYLING TEXT WITH CSS
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
</body>
</html>
STYLING BORDER AND TABLE IN CSS

CSS Border
The CSS border property defines a border around an HTML element:
Example
p{
border: 1px solid powderblue;
}
CSS Padding
The CSS padding property defines a padding (space) between the text and the border:
Example
p{
padding: 30px;
}
CSS Margin
The CSS margin property defines a margin (space) outside the border:
Example
p{
margin: 50px;
}
Notes:
• Use the HTML style attribute for inline styling

• Use the HTML <style> element to define internal CSS
• Use the HTML <link> element to refer to an external CSS file
• Use the HTML <head> element to store <style> and <link> elements
• Use the CSS color property for text colors
• Use the CSS font-family property for text fonts
• Use the CSS font-size property for text sizes
• Use the CSS border property for borders
• Use the CSS padding property for space inside the border
• Use the CSS margin property for space outside the border
Background Color
The CSS background-color property defines the background color for an HTML element.
This example sets the background color for a page to powderblue:
Example
<body style="background-color:powderblue;">
</body>
Text Color
The CSS color property defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fonts
The CSS font-family property defines the font to be used for an HTML element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size
The CSS font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:
Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Notes:
• Use the style attribute for styling HTML elements

• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment
LESSON 10 SELECTORS, DIV, SPAN AND LINK
OVERVIEW:
CSS selectors are the part of CSS rules that determine what HTML elements that are
affected by the CSS rule. There are several different types of CSS selectors. Both CSS 1.0,
CSS 2.1 and CSS 3.0 added selectors to the CSS standard. The rest of this text will go through
these CSS selectors.
LEARNING OUTCOMES:
• Understand how CSS Selectors are used

• Familiarize the usage of class, id span and div in an HTML document.
COURSE MATERIALS:
SELECTORS, CLASS, ID, SPAN and DIV
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)

• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)
The CSS element Selector
The element selector selects HTML elements based on the element name.
Example
Here, all <p> elements on the page will be center-aligned, with a red text color:
p{
text-align: center;
color: red;
}
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique
element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
Example
The CSS rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
Note: An id name cannot start with a number!
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
Example
In this example all HTML elements with class="center" will be red and center-aligned:
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be affected by a class.
Example
In this example only <p> elements with class="center" will be center-aligned:
p.center {
text-align: center;
color: red;
}
HTML elements can also refer to more than one class.
Example
In this example the <p> element will be styled according to class="center" and to class="large":
<p class="center large">This paragraph refers to two classes.</p>
Note: A class name cannot start with a number!
The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;
}
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
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.
Example
In this example we have grouped the selectors from the code above:
h1, h2, p {
text-align: center;
color: red;
}
All CSS Simple Selectors
Selector Example Example description
.class .intro Selects all elements with class="intro"
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element,element,.. div, p Selects all <div> elements and all <p> elements
The CLASS Attribute
The CLASS attribute is used to specify the style class to which the element belongs. For
example, the style sheet may have created the punk and warning classes:
.punk { color: lime; background: #ff80c0 }

P.warning { font-weight: bolder; color: red; background: white }
These classes could be referenced in HTML with the CLASS attribute:
<H1 CLASS=punk>Proprietary Extensions</H1>

<P CLASS=warning>Many proprietary extensions can have negative side-effects, both on
supporting and non-supporting browsers...
In this example, the punk class may be applied to any BODY element since it does not have an
HTML element associated with it in the style sheet. Using the example's style sheet, the
warning class may only be applied to the P element.
A good practice is to name classes according to their function rather than their appearance. The
warning class in the previous example could have been named red, but this name would
become meaningless if the author decided to change the style of the class to a different color, or
if the author wished to define an aural style for those using speech synthesizers.
10 |O F A D 3 0 0 9 3 I N T E R N E T A N D W E B D E S I G N W I T H L A B O R A T O R Y
FOR ADMINISTRATIVE PROFESSIONALS
Classes can be a very effective method of applying different styles to structurally identical
sections of an HTML document. For example, this page uses classes to give a different style to
CSS code and HTML code.
The ID Attribute
The ID attribute is used to define a unique style for an element. A CSS rule such as
#wdg97 { font-size: larger }
may be applied in HTML through the ID attribute:
<P ID=wdg97>Welcome to the Web Design Group!</P>
Each ID attribute must have a unique value over the document. The value must be an initial
letter followed by letters, digits, or hyphens. The letters are restricted to A-Z and a-z.
Note that HTML 4 allows periods in ID attribute values, but CSS1 does not allow periods in ID
selectors. Also note that CSS1 allows the Unicode characters 161-255 as well as escaped
Unicode characters as a numeric code, but HTML 4 does not allow these characters in an ID
attribute value.
The use of ID is appropriate when a style only needs to be applied once in any document. ID
contrasts with the STYLE attribute in that the former allows medium-specific styles and can also
be applied to multiple documents (though only once in each document).
The SPAN Element
The SPAN element was introduced into HTML to allow authors to give style that could not be
attached to a structural HTML element. SPAN may be used as a selector in a style sheet, and it
also accepts the STYLE, CLASS, and ID attributes.
SPAN is an inline element, so it may be used just as elements such as EM and STRONG in
HTML. The important distinction is that while EM and STRONG carry structural meaning, SPAN
has no such meaning. It exists purely to apply style, and so has no effect when the style sheet is
disabled.
Some examples of SPAN follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<HTML>
<HEAD>
<TITLE>Example of SPAN</TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css" MEDIA="screen, print, projection">

</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=firstwords>The first few words</SPAN> of a
paragraph could be in small-caps. Style may also be inlined, such as
to change the style of a word like <SPAN STYLE="font-family: Arial">
Arial</SPAN>.</P>
The DIV Element
The DIV element is similar to the SPAN element in function, with the main difference being that
DIV (short for "division") is a block-level element. DIV may contain paragraphs, headings,
tables, and even other divisions. This makes DIV ideal for marking different classes of
containers, such as a chapter, abstract, or note. For example:
<DIV CLASS=note>
<H1>Divisions</H1>
<P>The DIV element is defined in HTML 3.2, but only the ALIGN attribute is permitted in HTML
3.2. HTML 4.0 adds the CLASS, STYLE, and ID attributes, among others.</P>
<P>Since DIV may contain other block-level containers, it is useful for marking large sections of
a document, such as this note.</P>
<P>The closing tag is required.</P>
</DIV>

Lesson 8, 9 & 10

Uploaded by

Copyright:

Available Formats

Lesson 8, 9 & 10

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lesson 8, 9 & 10

Uploaded by

Copyright:

Available Formats

Republic of the Philippines

POLYTECHNIC UNIVERSITY OF THE PHILIPPINES

LESSON 8 CREATING STYLESHEETS

• Identify the CSS structure, its capabilities and advantages.

• Differentiate inline, internal and external CSS.

CSS stands for Cascading Style Sheets.

CSS can be added to HTML elements in 3 ways:

• Inline - by using the style attribute in HTML elements

An inline CSS is used to apply a unique style to a single HTML element.

An internal CSS is used to define a style for a single HTML page.

Here is how the "styles.css" looks:

STYLING TEXT WITH CSS

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

STYLING BORDER AND TABLE IN CSS

The CSS border property defines a border around an HTML element:

• Use the HTML style attribute for inline styling

This example sets the background color for a page to powderblue:

• Use the style attribute for styling HTML elements

• Understand how CSS Selectors are used

SELECTORS, CLASS, ID, SPAN and DIV

We can divide CSS selectors into five categories:

• Simple selectors (select elements based on name, id, class)

The CSS element Selector

The CSS id Selector

Note: An id name cannot start with a number!

The CSS class Selector

In this example only <p> elements with class="center" will be center-aligned:

HTML elements can also refer to more than one class.

<p class="center large">This paragraph refers to two classes.</p>

Note: A class name cannot start with a number!

The CSS Universal Selector

The CSS Grouping Selector

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

To group selectors, separate each selector with a comma.

All CSS Simple Selectors

Selector Example Example description

.class .intro Selects all elements with class="intro"

#id #firstname Selects the element with id="firstname"

* * Selects all elements

element p Selects all <p> elements

The CLASS Attribute

.punk { color: lime; background: #ff80c0 }

These classes could be referenced in HTML with the CLASS attribute:

<H1 CLASS=punk>Proprietary Extensions</H1>

#wdg97 { font-size: larger }

may be applied in HTML through the ID attribute:

<P ID=wdg97>Welcome to the Web Design Group!</P>

The SPAN Element

Some examples of SPAN follow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

The DIV Element

You might also like