FM-AA-CIA-15 Rev.

0 10-July-2020

Study Guide in WD101 Web Development Module No.1

STUDY GUIDE FOR MODULE NO. 4

Introduction to CSS3
MODULE OVERVIEW

This module covers all the fundamentals of CSS, including the idea of selectors, methods of
setting colors and backgrounds, way of formatting fonts and text, styling UI elements such as
hyperlinks, lists, tables and so on.

MODULE LEARNING OBJECTIVES

At the end of this module, students are expected to:

1. Understand what CSS is and learn how you can use it to style your website.
2. Learn how to insert CSS in different ways.
3. Learn how to use CSS selectors and properties.
4. Learn how to use CSS colors in background.
5. Learn how to style fonts on a web page.
6. Learn how to style text on your web page.
7. Learn how to style different states of a link.
8. Learn how to format HTML Lists using CSS.
9. Learn how to style HTML tables.

LEARNING CONTENTS (Introduction to CSS3)

4.1 What is CSS?

CSS stands for Cascading Style Sheets. CSS is a standard style sheet language used for
describing the presentation (i.e. the layout and formatting) of the web pages. Prior to CSS,
nearly all of the presentational attributes of HTML documents were contained within the HTML
markup (specifically inside the HTML tags); all the font colors, background styles, element
alignments, borders and sizes had to be explicitly described within the HTML. As a result,
development of the large websites became a long and expensive process, since the style
information were repeatedly added to every single page of the website.

To solve this problem CSS was introduced in 1996 by the World Wide Web Consortium
(W3C), which also maintains its standard. CSS was designed to enable the separation of
presentation and content. Now web designers can move the formatting information of the web
pages to a separate style sheet which results in considerably simpler HTML markup, and better
maintainability. CSS3 is the latest version of the CSS specification. CSS3 adds several new
styling features and improvements to enhance the web presentation capabilities.

What you can do with CSS?

There are lot more things you can do with CSS.

 You can easily apply same style rules on multiple elements.

 You can control the presentation of multiple pages of a website with a single style sheet.
 You can present the same page differently on different devices.
 You can style dynamic states of elements such as hover, focus, etc. that isn't possible
otherwise.
 You can change the position of an element on a web page without changing the markup.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

 You can alter the display of existing HTML elements.

 You can transform elements like scale, rotate, skew, etc. in 2D or 3D space.
 You can create animations and transitions effects without using any JavaScript.
 You can create print friendly version of your web pages.

The list does not end here, there are many other interesting things that you can do with CSS.
You will learn about all of them in detail in upcoming chapters.

Advantages of using CSS

The biggest advantage of CSS is that it allows the separation of style and layout from the
content of the document. Here are some more advantages, why one should start using CSS?

 CSS Save Lots of Time — CSS gives lots of flexibility to set the style properties of an
element. You can write CSS once; and then the same code can be applied to the groups
of HTML elements, and can also be reused in multiple HTML pages.
 Easy Maintenance — CSS provides an easy means to update the formatting of the
documents, and to maintain the consistency across multiple documents. Because the
content of the entire set of web pages can be easily controlled using one or more style
sheets.
 Pages Load Faster — CSS enables multiple pages to share the formatting information,
which reduces complexity and repetition in the structural contents of the documents. It
significantly reduces the file transfer size, which results in a faster page loading.
 Superior Styles to HTML — CSS has much wider presentation capabilities than HTML
and provide much better control over the layout of your web pages. So you can give far
better look to your web pages in comparison to the HTML presentational elements and
attributes.
 Multiple Device Compatibility — CSS also allows web pages to be optimized for more
than one type of device or media. Using CSS the same HTML document can be presented
in different viewing styles for different rendering devices such as desktop, cell phones,
etc.

Note: Now most of the HTML attributes are being deprecated and it's not recommended to use.
So it's a good idea to use as much CSS as possible to increase the adaptability your website and
make them compatible to future browsers, as well.

4.2 Anatomy of a CSS

Let's dissect the CSS code for red paragraph text to understand how it works :

The whole structure is called a ruleset. (The term ruleset is often referred to as just rule.) Note
the names of the individual parts:

Selector

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

 This is the HTML element name at the start of the ruleset. It defines the element(s) to
be styled (in this example, <p> elements). To style a different element, change the
selector.

Declaration
 This is a single rule like color: red;. It specifies which of the element's properties you
want to style.
Properties
 These are ways in which you can style an HTML element. (In this example, color is a
property of the <p> elements.) In CSS, you choose which properties you want to affect
in the rule.
Property value
 To the right of the property—after the colon—there is the property value. This chooses
one out of many possible appearances for a given property. (For example, there are
many color values in addition to red.)

Note the other important parts of the syntax:

 Apart from the selector, each ruleset must be wrapped in curly braces. ({})
 Within each declaration, you must use a colon (:) to separate the property from its value
or values.
 Within each ruleset, you must use a semicolon (;) to separate each declaration from the
next one.

To modify multiple property values in one ruleset, write them separated by semicolons, like
this:

p{
color: red;
width: 500px;
border: 1px solid black;
}

Selecting Multiple Elements

You can also select multiple elements and apply a single ruleset to all of them. Separate
multiple selectors by commas. For example:

p, li, h1 {
color: red;
}

4.3 CSS Selectors

There are many different types of selectors. The examples above use element selectors, which
select all elements of a given type. But we can make more specific selections as well. Here are
some of the more common types of selectors:

Selector name What does it select Example

Element selector All HTML elements of the specified p

(sometimes called type. selects <p>

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

a tag or type
selector)

#my-id{
The element on the page with the
}
ID selector specified ID. On a given HTML page,
selects <p id="my-
each id value should be unique.
id"> or <a id="my-
id">

.my-class
The element(s) on the page with the
selects <p class="my-
Class selector specified class. Multiple instances of
class"> and <a
the same class can appear on a page.
class="my-class">

img[src]
The element(s) on the page with the selects <img
Attribute selector
specified attribute. src="myimage.png">
but not <img>

a:hover
The specified element(s), but only
selects <a>, but only
Pseudo-class when in the specified state. (For
when the mouse
selector example, when a cursor hovers over
pointer is hovering
a link.)
over the link.

4.4 Inserting CSS

Adding CSS in HTML Documents

CSS can either be attached as a separate document or embedded in the HTML document itself.
There are three methods of including CSS in an HTML document:

 Inline styles — Using the style attribute in the HTML start tag.
 Embedded styles/Internal — Using the <style> element in the head section of a
document.
 External style sheets — Using the <link> element, pointing to an external CSS file.

Inline Styles

Inline styles are used to apply the unique style rules to an element by putting the CSS rules
directly into the start tag. It can be attached to an element using the style attribute.

The style attribute includes a series of CSS property and value pairs. Each "property: value"
pair is separated by a semicolon (;), just as you would write into an embedded or external style
sheets. But it needs to be all in one line i.e. no line break after the semicolon, as shown here:

<h1 style="color:red; font-size:30px;">This is a heading</h1>

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

<p style="color:green; font-size:22px;">This is a paragraph.</p>

<div style="color:blue; font-size:14px;">This is some text content.</div>

Using the inline styles are generally considered as a bad practice. As style rules are embedded
directly inside the HTML tag, it causes the presentation to become mixed with the content of the
document; which makes the code hard to maintain and negates the purpose of using CSS.

Note: It's become impossible to style pseudo-elements and pseudo-classes with inline styles.
You should, therefore, avoid the use of style attributes in your code. Using external style sheets
is the preferred way to add styles to the HTML documents.

Embedded/Internal Style Sheets

Embedded or internal style sheets only affect the document they are embedded in. Embedded
style sheets are defined in the <head> section of an HTML document using the <style>
element. You can define any number of <style> elements in an HTML document but they must
appear between the <head> and </head> tags. Let's take a look at an example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

Note: The type attribute of the <style> and <link> tag (i.e. type="text/css") defines the
language of the style sheet. This attribute is purely informative. You can omit this since CSS is
the standard and default style sheet language in HTML5.

External Style Sheets

An external style sheet is ideal when the style is applied to many pages of the website. An
external style sheet holds all the style rules in a separate document that you can link from any
HTML file on your site. External style sheets are the most flexible because with an external style
sheet, you can change the look of an entire website by changing just one file. You can attach
external style sheets in two ways — linking and importing.

Linking External Style Sheets

Before linking, we need to create a style sheet first. Let's open your favorite code editor and
create a new file. Now type the following CSS code inside this file and save it as "style.css".

body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

color: orange;
}

An external style sheet can be linked to an HTML document using the <link> tag. The <link>
tag goes inside the <head> section, as you can see in the following example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

Note: Among all the three methods, using external style sheet is the best method for defining
and applying styles to the HTML documents. As you can clearly see with external style sheets,
the affected HTML file require minimal changes in the markup.

Importing External Style Sheets

The @import rule is another way of loading an external style sheet. The @import statement
instructs the browser to load an external style sheet and use its styles. You can use it in two
ways. The simplest is within the header of your document. Note that, other CSS rules may still
be included in the <style> element. Here's an example:

<style>
@import url("css/style.css");
p{
color: blue;
font-size: 16px;
}
</style>

Similarly, you can use the @import rule to import a style sheet within another style sheet.

@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}

Note: All @import rules must occur at the start of the style sheet. Any style rule defined in the
style sheet itself override the conflicting rules in the imported style sheets. However, importing
a style sheet within another style sheet is not recommended due to performance issue.

4.5 CSS Color

Setting Color Property

The color property defines the text color (foreground color in general) of an element. For
instance, the color property specified in the body selector defines the default text color for the

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

whole page. Let's try out the following example to see how it works:

body {
color: #ff5722;
}

Note: The color property normally inherits the color value from their parent element, except
the case of anchor elements. For example, if you specify color for the body element it will
automatically be passed down to the headings, paragraphs, etc.

Defining Color Values

Colors in CSS most often specified in the following formats:

 a color keyword - like "red", "green", "blue", "transparent", etc.

 a HEX value - like "#ff0000", "#00ff00", etc.
 an RGB value - like "rgb(255, 0, 0)"

CSS3 has introduced several other color formats such as HSL, HSLA and RGBA that also support
alpha transparency. We'll learn about them in greater detail in CSS3 color chapter.

For now, let's stick to the basic methods of defining the color values:

Color Keywords

CSS defines the few color keywords which lets you specify color values in an easy way. These
basic color keywords are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, and yellow. The color names are case-insensitive.

h1 {
color: red;
}
p{
color: purple;
}

Modern web browsers however practically support many more color names than what are
defined in the CSS standard, but to be on the safer side you should use hex color values
instead.

HEX Color Values

Hex (short for Hexadecimal) is by far the most commonly used method of defining color on the
web. Hex represent colors using a six-digit code, preceded by a hash character, like #rrggbb, in
which rr, gg, and bb represents the red, green and blue component of the color respectively.
The value of each component can vary from 00 (no color) and FF (full color) in hexadecimal
notation, or 0 and 255 in decimal equivalent notation. Thus #ffffff represents white color and
#000000 represents black color. Let's take a look the following example:

h1 {
color: #ffa500;
}
p{
color: #00ff00;
}

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

Note: Hexadecimal or Hex refers to a numbering scheme that uses 16 characters as its base. It
uses the numbers 0 through 9 and the letters A, B, C, D, E and F which corresponds to the
decimal numbers 10, 11, 12, 13, 14 and 15 respectively.

Tip: If hexadecimal code of a color has value pairs, it can also be written in shorthand notation
to avoid extra typing, for example, the hex color value #ffffff can be also be written as #fff,
#000000 as #000, #00ff00 as #0f0, #ffcc00 as #fc0, and so on.

RGB Color Values

Colors can be defined in the RGB model (Red, Green, and Blue) using the rgb() functional
notation. The rgb() function accepts three comma-separated values, which specify the amount
of red, green, and blue component of the color. These values are commonly specified as
integers between 0 to 255, where 0 represent no color and 255 represent full or maximum
color’. The following example specifies the same color as in the previous example but in RGB
notation.

h1 {
color: rgb(255, 165, 0);
}
p{
color: rgb(0, 255, 0);
}

Note: You can also specify RGB values inside the rgb() function in percentage, where 100%
represents full color, and 0% (not simply 0) represents no color. For example, you can specify
the red color either as rgb(255, 0, 0) or rgb(100%, 0%, 0%).

Tip: If R, G, and B are all set to 255, i.e. rgb(255, 255, 255), the color would be white.
Likewise, if all channels are set to 0, i.e. rgb(0, 0, 0), the color would be black. Play with the
RGB values in the following demonstration to understand how it actually works.

Affect of Color Property on Borders and Outlines

The color property is not just for text content, but for anything in the foreground that takes a
color value. For instance, if border-color or outline-color value hasn't been defined explicitly for
the element, the color value will be used instead. Let's check out an example: Try this code
below:

p.one {
color: #0000ff;
border: 2px solid;
}
p.two {
color: #00ff00;
outline: 2px solid;
}

4.6 CSS Background

Setting Background Properties

Background plays an important role in the visual presentation of a web page. CSS provide
several properties for styling the background of an element, including coloring the background,
placing images in the background and managing their positioning, etc. The background
properties are background-color, background-image, background-repeat, background-

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

attachment and background-position. In the following section we will discuss each of these
properties in more detail.

Background Color

The background-color property is used to set the background color of an element. The following
example demonstrates how to set the background color of the whole page.

body {
background-color: #f0e68c;
}

Color values in CSS are most often specified in the following formats:

 a color name - like "red"

 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255, 0, 0)"

Background Image

The background-image property set an image as a background of an HTML element. Let's check
out the following example which sets the background image for the whole page.

body {
background-image: url("images/tile.png");
}

Note: When applying the background image to an element, make sure that the image you
choose does not affect the readability of the element's text content.

Tip: By default browser repeats or tiles the background image both horizontally and vertically
to fill the entire area of an element. You can control this with background-repeat property.

Background Repeat

The background-repeat property allows you to control how a background image is repeated or
tiled in the background of an element. You can set a background image to repeat vertically (y-
axis), horizontally (x-axis), in both directions, or in neither direction.

Let's try out the following example which demonstrates how to set the gradient background for
a web page by repeating the sliced image horizontally along the x-axis.

body {
background-image: url("images/gradient.png");
background-repeat: repeat-x;
}

Similarly, you can use the value repeat-y to repeat the background image vertically along the
y-axis, or the value no-repeat to prevent the repetition altogether.

body {
background-image: url("images/texture.png");
background-repeat: no-repeat;
}

Let's take a look at the following illustration to understand how this property actually works.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

Background Position

The background-position property is used to control the position of the background image. If no
background position has been specified, the background image is placed at the default top-left
position of the element i.e. at (0,0), let's try out the following example:

body {
background-image: url("images/robot.png");
background-repeat: no-repeat;
}

In the following example, the background image is positioned at top-right corner.

body {
background-image: url("images/robot.png");
background-repeat: no-repeat;
background-position: right top;
}

Note: If two values are specified for the background-position property, the first value
represents the horizontal position, and the second represents the vertical position. If only one
value is specified, the second value is assumed to be center.

Besides keywords, you can also use percentage or length values, such as px or em for this
property. Let's take a look at the following illustration to understand how this property actually
works.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

Background Attachment

The background-attachment property determines whether the background image is fixed with
regard to the viewport or scrolls along with the containing block.

Let's try out the following example to understand how it basically works:

body {
background-image: url("images/bell.png");
background-repeat: no-repeat;
background-attachment: fixed;
}

The Background Shorthand Property

As you can see in the examples above, there are many properties to consider when dealing with
the backgrounds. However, it is also possible to specify all these properties in one single
property to shorten the code or avoid extra typing. This is called a shorthand property.

The background property is a shorthand property for setting all the individual background
properties, i.e., background-color, background-image, background-repeat, background-
attachment and the background-position property at once. Let's see how this works:

body {
background-color: #f0e68c;
background-image: url("images/smiley.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 250px 25px;

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

Using the shorthand notation the above example can be written as:

body {
background: #f0e68c url("images/smiley.png") no-repeat fixed 250px 25px;
}

When using the background shorthand property the order of the property values should be.

background: color image repeat attachment position;

If the value for an individual background property is missing or not specified while using the
shorthand notation, the default value for that property will be used instead, if any.

Note: The background properties do not inherit like the color property, but the parent
element's background will be visible through by default, because of the initial or default
transparent value of the background-color CSS property.

4.7 CSS Fonts

Styling Fonts with CSS

Choosing the right font and style is very crucial for the readability of text on a page. CSS
provide several properties for styling the font of the text, including changing their face,
controlling their size and boldness, managing variant, and so on. The font properties are: font-
family, font-style, font-weight, font-size, and font-variant. Let's discuss each of these font
properties one by one in more detail.

Font Family

The font-family property is used to specify the font to be used to render the text. This property
can hold several comma-separated font names as a fallback system, so that if the first font is
not available on the user's system, browser tries to use the second one, and so on. Hence, list
the font that you want first, then any fonts that might fill in for the first if it is not available. You
should end the list with a generic font family which are five — serif, sans-serif, monospace,
cursive and fantasy. A typical font family declaration might look like this:
body {
font-family: Arial, Helvetica, sans-serif;
}

Note: If the name of a font family contains more than one word, it must be placed inside
quotation marks, like "Times New Roman", "Courier New", "Segoe UI", etc.

The most common font families used in web design are serif and sans-serif, because they are
more suitable for reading. While monospace fonts are commonly used to display code, because
in this typeface each letter takes up the same space which looks like typewritten text. The
cursive fonts look like cursive writing or handwriting. The fantasy font represents artistic font,
but they're not used widely because of poor availability across the operating systems.

Difference Between Serif and Sans-serif Fonts

Serif fonts have small line or stroke at the extremities of characters, whereas sans-serif fonts
are straighter and do not have these small strokes. See the following illustration.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

Font Style

The font-style property is used to set the font face style for the text content of an element. The
font style can be normal, italic or oblique. The default value is normal. Let's try out the
following example to understand how it basically works:

p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}

Note: At first glance both oblique and italic font styles appear the same thing, but there is a
difference. The italic style uses an italic version of the font while oblique style on the other hand
is simply a slanted or sloped version of the normal font.

Font Size

The font-size property is used to set the size of font for the text content of an element. There
are several ways to specify the font size values e.g. with keywords, percentage, pixels, ems,
etc.

Setting Font Size with Pixels

Setting the font size in pixel values (e.g. 14px, 16px, etc.) is a good choice when you need the
pixel accuracy. Pixel is an absolute unit of measurement which specifies a fixed length. Let's try
out the following example to understand how it basically works:

h1 {
font-size: 24px;
}
p{
font-size: 14px;
}

Defining the font sizes in pixel is not considered very accessible, because the user cannot
change the font size from the browser settings. For instance, users with limited or low vision
may wish to set the font size much larger than the size specified by you. Therefore, you should
avoid using the pixels values and use the values that are relative to the user's default font size
instead if you want to create an inclusive design.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

Tip: The text can also be resized in all browsers using the zoom feature. However, this feature
resizes the entire page, not just the text. The W3C recommends using the em or percentage
(%) values in order to create more robust and scalable layouts.

Setting Font Size with EM

The em unit refers to the font size of the parent element. When defining the font-size property,
1em is equal to the size of the font that applies to the parent of the element. So, if you set a
font-size of 20px on the body element, then 1em = 20px and 2em = 40px. However, if you
haven't set the font size anywhere on the page, then it is the browser default, which is normally
16px. Therefore, by default 1em = 16px, and 2em = 32px. Let's take a look at the following
example to understand how it basically works:

h1 {
font-size: 2em; /* 32px/16px=2em */
}
p{
font-size: 0.875em; /* 14px/16px=0.875em */
}

Using the Combination of Percentage and EM

As you've observed in the above example the calculation of em values doesn't look
straightforward. To simplify this, a popular technique is to set the font-size for the body
element to 62.5% (that is 62.5% of the default 16px), which equates to 10px, or 0.625em.
Now you can set the font-size for any elements using em units, with an easy-to-remember
conversion, by dividing the px value by 10. This way 10px = 1em, 12px = 1.2em, 14px = 1.4em,
16px = 1.6em, and so on. Let's take a look at the following example:

body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p{
font-size: 1.4em; /* 1.4em = 14px */
}
p span {
font-size: 2em; /* 2em = 28px */
}

Setting Font Size with Root EM

To make things even more simpler CSS3 has introduced rem unit (short for "root em") which is
always relative to the font-size of the root element (html), regardless of where the element lies
in the document (unlike em which is relative to parent element's font size). This means that
1rem is equivalent to the font size of the html element, which is 16px by default in most
browsers. Let's try out an example to understand how it actually works:

html {
font-size: 62.5%; /* font-size 1em = 10px */
}
p{
font-size: 1.4rem; /* 1.4rem = 14px */
}
p span {
font-size: 2rem; /* 2rem = 20px (not 28px) */
}

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

Setting Font Size with Keywords

CSS provide several keywords that you can use to define font sizes. An absolute font size can
be specified using one of the following keywords: xx-small, x-small, small, medium, large, x-
large, xx-large. Whereas, a relative font size can be specified using the keywords: smaller or
larger. Let's try out an example and see how it works:

body {
font-size: large;
}
h1 {
font-size: larger;
}
p{
font-size: smaller;
}

Note: The keyword medium is equivalent to the browsers default font-size, which is normally
16px. Likewise, xx-small is the equivalent of 9 pixels, x-small is 10 pixels, small is 13 pixels,
large is 18 pixels, x-large is 24 pixels, and xx-large is 32 pixels.

Tip: By setting a font size on the body element, you can set the relative font sizing everywhere
else on the page, giving you the ability to easily scale the font size up or down accordingly.

Setting Font Size with Viewport Units

The font sizes can be specified using viewport units such as vw or vh. Viewport units refer to a
percentage of the browser's viewport dimensions, where 1vw = 1% of viewport width, and 1vh
= 1% of viewport height. Hence, if the viewport is 1600px wide, 1vw is 16px. Try out the
following example by resizing the browser window and see how it works:

body {
font-size: 1vw;
}
h1 {
font-size: 3vw;
}

However, there is a problem with the viewport units. On small screens fonts become so small
that they are hardly readable. To prevent this you can utilize CSS calc() function, like this:

html {
font-size: calc(1em + 1vw);
}
h1 {
font-size: 3rem;
}

In this example, even if the viewport width becomes 0, the font-size would be at least 1em or
16px.

Font Weight

The font-weight property specifies the weight or boldness of the font. This property can take

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

one of the following values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700,
800, 900 and inherit.

 The numeric values 100-900 specify the font weights, where each number represents a
weight greater than its predecessor. 400 is same as normal & 700 is same as bold.
 The bolder and lighter values are relative to the inherited font weight, while the other
values such as normal and bold are absolute font weights.

Let's try out an example to understand how this property basically works:

p{
font-weight: bold;
}

Note: Most of the fonts are only available in a limited number of weights; often they are
available only in normal and bold. In case, if a font is not available in the specified weight, an
alternate will be chosen that is the closest available weight.

Font Variant

The font-variant property allows the text to be displayed in a special small-caps variation.
Small-caps or small capital letters are slightly different to normal capital letters, in which
lowercase letters appear as smaller versions of the corresponding uppercase letters. Try out the
following example to understand how this property actually works:

p{
font-variant: small-caps;
}

The value normal removes small caps from the text which is already formatted that way.

4.8 CSS Text

Formatting Text with CSS

CSS provides several properties that allows you to define various text styles such as color,
alignment, spacing, decoration, transformation, etc. very easily and effectively. The commonly
used text properties are: text-align, text-decoration, text-transform, text-indent, line-height,
letter-spacing, word-spacing, and more. These properties give you precise control over the
visual appearance of the characters, words, spaces, and so on. Let's see how to set these text
properties for an element in more detail.

Text Color

The color of the text is defined by the CSS color property. The style rule in the following
example will define the default text color for the page

body {
color: #434343;
}

Although, the color property seems like it would be a part of the CSS text, but it is actually a

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

standalone property in CSS.

Text Alignment

The text-align property is used to set the horizontal alignment of the text. Text can be aligned
in four ways: to the left, right, centre or justified (straight left and right margins). Let's take a
look at an example to understand how this property basically works.

h1 {
text-align: center;
}
p{
text-align: justify;
}

Note: When text-align is set to justify, each line is stretched so that every line has equal width
(except the last line), and the left and right margins are straight. This alignment is generally
used in publications such as magazines and newspapers.

Let's take a look at the following illustration to understand what these values actually mean.

Text Decoration

The text-decoration property is used to set or remove decorations from text. This property
typically accepts one of the following values: underline, overline, line-through, and none. You
should avoid underline text that is not a link, as it might confuse the visitor. Let's try out the
following example to understand how it basically works:

h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}

Removing the Default Underline from Links

The text-decoration property is extensively used to remove the default underline from the HTML
hyperlinks. You can further provide some other visual cues to make it stand out from the
normal text, for example, using dotted border instead of solid underline. Let's take a look at the
following example to understand how it basically works:

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

a{
text-decoration: none;
border-bottom: 1px dotted;
}

Note: When you create an HTML link, browsers built in style sheet automatically underline it
and applies a blue color, so that the readers can clearly see which text is clickable.

Text Transformation

The text-transform property is used to set the cases for a text. Text are often written in mixed
case. However, in certain situations you may want to display your text in entirely different case.
Using this property you can change an element's text content into uppercase or lowercase
letters, or capitalize the first letter of each word without modifying the original text. Let's try
out the following example to understand how it basically works:

h1 {
text-transform: uppercase;
}
h2 {
text-transform: capitalize;
}
h3 {
text-transform: lowercase;
}

Text Indentation

The text-indent property is used to set the indentation of the first line of text within a block of
text. It is typically done by inserting the empty space before the first line of text. The size of the
indentation can be specified using percentage (%), length values in pixels, ems, etc. The
following style rule will indent the first line of the paragraphs by 100 pixels.

p{
text-indent: 100px;
}

Note: Whether the text is indented from the left or from the right depends on the direction of
text inside the element, defined by the CSS direction property.

Letter Spacing

The letter-spacing property is used to set extra spacing between the characters of text. This
property can take a length value in pixels, ems, etc. It may also accept negative values. When
setting letter spacing, a length value indicates spacing in addition to the default inter-character
space. Let's check out the following example to understand how it really works:

h1 {
letter-spacing: -3px;
}
p{
letter-spacing: 10px;
}

Word Spacing

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

The word-spacing property is used to specify additional spacing between the words. This
property can accept a length value in pixels, ems, etc. Negative values are also allowed. Let's
try out the following example to understand how this property works:

p.normal {
word-spacing: 20px;
}
p.justified {
word-spacing: 20px;
text-align: justify;
}
p.preformatted {
word-spacing: 20px;
white-space: pre;
}

Note: Word spacing can be affected by text justification. Also, even though whitespace is
preserved, spaces between words are affected by the word-spacing property.

Line Height

The line-height property is used to set the height of the text line. It is also called leading and
commonly used to set the distance between lines of text. The value of this property can be a
number, a percentage (%), or a length in pixels, ems, etc.

p{
line-height: 1.2;
}

When the value is a number, the line height is calculated by multiplying the element's font size
by the number. While, percentage values are relative to the element's font size.

Note: Negative values for the line-height property are not allowed. This property is also a
component of the CSS font shorthand property.

If the value of the line-height property is greater than the value of the font-size for an element,
this difference (called the "leading") is cut in half (called the "half-leading") and distributed
evenly on the top and bottom of the in-line box. Let's check out an example:

p{
font-size: 14px;
line-height: 20px;
background-color: #f0e68c;
}

4.9 CSS Links

Styling Links with CSS

Links or hyperlinks are an essential part of a website. It allows visitors to navigate through the
site. Therefore styling the links properly is an important aspect of building a user-friendly
website. See the tutorial on HTML links to learn more about links and how to create them. A link
has four different states — link, visited, active and hover. These four states of a link can be
styled differently through using the following anchor pseudo-class selectors.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

 a:link — define styles for normal or unvisited links.

 a:visited — define styles for links that the user has already visited.
 a:hover — define styles for a link when the user place the mouse pointer over it.
 a:active — define styles for links when they are being clicked.

You can specify any CSS property you'd like e.g. color, font, background, border, etc. to each of
these selectors to customize the style of links, just like you do with the normal text.

a:link { /* unvisited link */

color: #ff0000;
text-decoration: none;
border-bottom: 1px solid;
}
a:visited { /* visited link */
color: #ff00ff;
}
a:hover { /* mouse over link */
color: #00ff00;
border-bottom: none;
}
a:active { /* active link */
color: #00ffff;
}

The order in which you are setting the style for different states of links is important, because
what defines last takes precedence over the style rules defined earlier.

Note: In general, the order of the pseudo classes should be the following
— :link, :visited, :hover, :active, :focus in order for these to work properly.

Modifying Standard Link Styles

In all major web browsers such as Chrome, Firefox, Safari, etc. links on the web pages have
underlines and uses the browser's default link colors, if you do not set the styles exclusively for
them. By default, text links will appear as follow in most of the browsers:

 An unvisited link as underlined blue text.

 A visited link as underlined purple text.
 An active link as underlined red text.

However, there is no change in the appearance of link in case of the hover state. It remains
blue, purple or red depending on which state (i.e. unvisited, visited or active) they are in. Now
let's see how to customize the links by overriding its default styling.

Setting Custom Color of Links

Simply use the CSS color property to define the color of your choice for different state of a link.
But when choosing colors make sure that user can clearly differentiate between normal text and
links. Let's try out the following example to understand how it basically works:

a:link {
color: #1ebba3;
}

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

a:visited {
color: #ff00f4;
}
a:hover {
color: #a766ff;
}
a:active {
color: #ff9800;
}

Removing the Default Underline from Links

If you don't like the default underline on links, you can simply use the CSS text-decoration
property to get rid of it. Alternatively, you can apply other styling on links like background
color, bottom border, bold font, etc. to make it stand out from the normal text a little better.
The following example shows how to remove or set underline for different states of a link.

a:link, a:visited {
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}

Making Text Links Look Like Buttons

You can also make your ordinary text links look like button using CSS. To do this we need to
utilize few more CSS properties such as background-color, border, display, padding, etc. You
will learn about these properties in detail in upcoming chapters. Let's check out the following
example and see how it really works:

a:link, a:visited {
color: white;
background-color: #1ebba3;
display: inline-block;
padding: 10px 20px;
border: 2px solid #099983;
text-decoration: none;
text-align: center;
font: 14px Arial, sans-serif;
}
a:hover, a:active {
background-color: #9c6ae1;
border-color: #7443b6;
}

4.10 CSS Lists

Types of HTML Lists

There are three different types of list in HTML:

 Unordered lists — A list of items, where every list items are marked with bullets.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

 Ordered lists — A list of items, where each list items are marked with numbers.
 Definition list — A list of items, with a description of each item.

Styling Lists with CSS

CSS provides the several properties for styling and formatting the most commonly used
unordered and ordered lists. These CSS list properties typically allow you to:

 Control the shape or appearance of the marker.

 Specify an image for the marker rather than a bullet point or number.
 Set the distance between a marker and the text in the list.
 Specify whether the marker would appear inside or outside of the box containing the list
items.

In the following section we will discuss the properties that can be used to style HTML lists.

Changing the Marker Type of Lists

By default, items in an ordered list are numbered with Arabic numerals (1, 2, 3, 5, and so on),
whereas in an unordered list, items are marked with round bullets (•). But, you can change this
default list marker type to any other type such as roman numerals, latin letters, circle, square,
and so on using the list-style-type property. Let's try out the following example to understand
how this property actually works:

ul {
list-style-type: square;
}
ol {
list-style-type: upper-roman;
}

Changing the Position of List Markers

By default, markers of each list items are positioned outside of their display boxes. However,
you can also position these markers or bullet points inside of the list item's display boxes using
the list-style-position property along with the value inside. In this case the lines will wrap under
the marker instead of being indented. Here's an example:

ol.in li {
list-style-position: inside;
}
ol.out li {
list-style-position: outside;
}

Let's take a look at the following illustration to understand how markers or bullets are
positioned.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

Using Images as List Markers

You can also set an image as a list marker using the list-style-image property. The style rule in
the following example assigns a transparent PNG image "arrow.png" as the list marker for all
the items in the unordered list. Let's try it out and see how it works:

ul li {
list-style-image: url("images/bullet.png");
}

Sometimes, the list-style-image property may not produce the expected output. Alternatively,
you can use the following solution for better control over the positioning of image markers. As a
work-around, you can also set image bullets via the background-image CSS property. First, set
the list to have no bullets. Then, define a non-repeating background image for the list element.
The following example displays the image markers equally in all browsers:

ul {
list-style-type: none;
}
ul li {
background-image: url("images/bullet.png");
background-position: 0px 5px; /* X-pos Y-pos (from top-left) */
background-repeat: no-repeat;
padding-left: 20px;
}

Setting All List Properties At Once

The list-style property is a shorthand property for defining all the three properties list-style-
type, list-style-image, and list-style-position of a list in one place. The following style rule sets
all the list properties in a single declaration.

ul {
list-style: square inside url("images/bullet.png");
}

Note: When using the list-style shorthand property, the orders of the values are: list-style-type
| list-style-position | list-style-image. It does not matter if one of the values above is missing as
long as the rest are in the specified order.

Creating Navigation Menus Using Lists

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

HTML lists are frequently used to create horizontal navigation bar or menu that typically appear
at the top of a website. But since the list items are block elements, so to display them inline we
need to use the CSS display property. Let's try out an example to see how it really works:

ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
}
ul li a {
display: block;
padding: 10px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}

4.11 CSS Tables

Styling Tables with CSS

Tables are typically used to display tabular data, such as financial reports. But when you create
an HTML table without any styles or attributes, browsers display them without any border. With
CSS you can greatly improve the appearance your tables. CSS provides several properties that
allow you to control the layout and presentation of the table elements. In the following section
you will see how to use CSS to create elegant and consistent tables.

Adding Borders to Tables

The CSS border property is the best way to define the borders for the tables.

The following example will set a black border for the <table>, <th>, and <td> elements.

table, th, td {
border: 1px solid black;
}

By default, browser draws a border around the table, as well as around all the cells, with some
space in-between, which results in double border. To get rid of this double border problem you
can simply collapse the adjoining table cell borders and create clean single line borders.

Let's take a look at the following illustration to understand how a border is applied to a table.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

Collapsing Table Borders

There are two distinct models for setting borders on table cells in CSS: separate and collapse.
In the separate border model, which is the default, each table cell has its own distinct borders,
whereas in the collapsed border model, adjacent table cells share a common border. You can
set the border model for an HTML table by using the CSS border-collapse property. The
following style rules will collapse the table cell borders and apply one pixel black border.

table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}

Note: You can also remove the space between the table cell borders through setting the value
of CSS border-spacing property to 0. However, it only removes the space but do not merge the
borders like when you set the border-collapse to collapse.

Adjusting Space inside Tables

By default, the browser creates the table cells just large enough to contain the data in the cells.
To add more space between the table cell contents and the cell borders, you can simply use the
CSS padding property. Let's try out the following example and see how it works:

th, td {
padding: 15px;
}

You can also adjust the spacing between the borders of the cells using the CSS border-spacing
property, if the borders of your table are separated (which is default). The following style rules
apply the spacing of 10 pixels between all borders within a table:

table {
border-spacing: 10px;
}

Setting Table Width and Height

By default, a table will render just wide and tall enough to contain all of its contents. However,
you can also set the width and height of the table as well as its cells explicitly using the width
and height CSS property. The style rules in the following example will sets the width of the
table to 100%, and the height of the table header cells to 40px.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

table {
width: 100%;
}
th {
height: 40px;
}

Controlling the Table Layout

A table expands and contracts to accommodate the data contained inside it. This is the default
behavior. As data fills inside the table, it continues to expand as long as there is space.
Sometimes, however, it is necessary to set a fixed width for the table in order to manage the
layout.

You can do this with the help of CSS table-layout property. This property defines the algorithm
to be used to layout the table cells, rows, and columns. This property takes one of two values:

 auto — Uses an automatic table layout algorithm. With this algorithm, the widths of the
table and its cells are adjusted to fit the content. This is the default value.
 fixed — Uses the fixed table layout algorithm. With this algorithm, the horizontal layout
of the table does not depend on the contents of the cells; it only depends on the table's
width, the width of the columns, and borders or cell spacing. It is normally faster than
auto.

The style rules in the following example specify that the HTML table is laid out using the fixed
layout algorithm and has a fixed width of 300 pixels. Let's try it out and see how it works:

table {
width: 300px;
table-layout: fixed;
}

Tip: You can optimize the table rendering performance by specifying the value fixed for the
table-layout property. Fixed value of this property causes the table to be rendered one row at a
time, providing users with information at a faster pace.

Tip: You can optimize the table rendering performance by specifying the value fixed for the
table-layout property. Fixed value of this property causes the table to be rendered one row at a
time, providing users with information at a faster pace.

Aligning the Text Inside Table Cells

You can align text content inside the table cells either horizontally or vertically.

Horizontal Alignment of Cell Contents

For horizontal alignment of text inside the table cells you can use the text-align property in the
same way as you use with other elements. You align text to either left, right, center or justify.

The following style rules will left-align the text inside the <th> elements.

th {
text-align: left;
}

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

Note: Text inside the <td> elements are left-aligned by default, whereas the text inside the
<th> elements are center-aligned and rendered in bold font by default.

Vertical Alignment of Cell Contents

Similarly, you can vertically align the content inside the <th> and <td> elements to top,
bottom, or middle using the CSS vertical-align property. The default vertical alignment is
middle. The following style rules will vertically bottom-align the text inside the <th> elements.

th {
height: 40px;
vertical-align: bottom;
}

Controlling the Position of Table Caption

You can set the vertical position of a table caption using the CSS caption-side property. The
caption can be placed either at the top or bottom of the table. The default position is top.

caption {
caption-side: bottom;
}

Tip: To change the horizontal alignment of the table's caption text (e.g. left or right), you can
simply use the CSS text-align property, like you do with normal text.

Handling Empty Cells

In tables that uses separate border model, which is default, you can also control the rendering
of the cells that have no visible content using the empty-cells CSS property. This property
accepts a value of either show or hide. The default value is show, which renders empty cells like
normal cells, but if the value hide is specified no borders or backgrounds are drawn around the
empty cells. Let's try out an example to understand how it really works:

table {
border-collapse: separate;
empty-cells: hide;
}

Note: Placing a non-breaking space (&nbsp;) inside a table cell make it non-empty. Therefore,
even if that cell looks empty the hide value will not hide the borders and backgrounds.

Creating Zebra-striped Tables

Setting different background colors for alternate rows is a popular technique to improve the
readability of tables that has large amount of data. This is commonly known as zebra-striping a
table. You can simply achieve this effect by using the CSS :nth-child() pseudo-class selector.
The following style rules will highlight every odd rows within the table body.

tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}

A zebra-striped table typically looks something like the following picture.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

Note: The :nth-child() pseudo-class select elements based on their position in a group of
siblings. It can take a number, a keyword even or odd, or an expression of the form xn+y
where x and y are integers (e.g. 1n, 2n, 2n+1, ...) as an argument.

Making a Table Responsive

Tables are not responsive in nature. However, to support mobile devices you can add
responsiveness to your tables by enabling horizontal scrolling on small screens. To do this
simply wrap your table with a <div> element and apply the style overflow-x: auto; as shown
below:

<div style="overflow-x: auto;">

<table>
... table content ...
</table>
</div>

LEARNING ACTIVITY 1

Home-based Activity

SUMMARY

In this module, you explored the basics of the CSS. You’ve learned the following:

1. What CSS is and how you can use it to style your website.
2. Insert CSS in different ways.
3. Use CSS selectors and properties.
4. Use CSS colors in background.
5. Style fonts on a web page.
6. Style text on your web page.
7. Style different states of a link.
8. Format HTML Lists using CSS.
9. Style HTML tables.

REFERENCES

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

https://www.tutorialrepublic.com/css-tutorial/

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 9