LESSON 9

CASCADING STYLE SHEET

TOPICS
1. Introducing Cascading Style Sheet
2. Formatting Text
3. Colors and Backgrounds
4. Thinking inside the Box
5. Margin Properties
6. Padding Properties
7. Border Properties
8. Box Sizing

LEARNING OUTCOMES
At the end of the lesson, you should be able to:
1. Recognize the difference between HTML and CSS.
2. Use CSS in designing Web Pages.
3. Demonstrate the use of different properties to improve the
design of Web Pages.
4. Use the concept of Box Model properly

TOPIC 1: INTRODUCING CASCADING STYLE SHEET

• CSS was developed in 1997 for Web designers, as a way for Web designers to define
the attractive look and feel of their Web pages.
• CSS is used for design web pages.
• CSS works with HTML only.
• HTML is only Markup language, we can use some attributes and values in tags, but
it's not capable of creating attractive web page design.
• The World Wide Web Consortium (W3C) has created CSS to solve this problem.
• In HTML 4.0, all formatting could be removed from the HTML document and can be
stored in a separate CSS file.
• Today all web browsers are supporting CSS.
Things to Know and have before started learning CSS:
• Use of any Text editor such as notepad, notepad++, vi editor, Sub-lime text-Editor,
etc.
• Create directories and files on your PC.
• Navigation of files and paths in your drive for any file.
• About the different formats of images and multimedia files and their extensions
• Saving contents to files in drives.

CSS BASIC SYNTAX

There are few common CSS terms needed to be familiarized with. This include
selectors, properties, and values. Here’s a quick little list of common CSS terms, and what
they represent in CSS code. Much of this is pretty easy stuff for most experienced
developers, but some is not as often colloquially or in writing, so a refresher could help clear
up some inconsistencies.
Comment
A comment has no effect on the display of the page that’s styled; it’s for the CSS
author to read and better understand the code. Comments are universal to (as far as I know)
all programming and related languages.
Sample Code:
/* example */
#box{
width: 200px;
}

Rule Set
A rule set is a single section of CSS including the selector, the curly braces, and the
different lines with properties and values.
Sample Code:
body {
font-family: Arial, san-serif;
color: #555;
font-size: 14px;
}

Declaration Block
A declaration block is the section of CSS where the property/value pairs appear.
Sample Code:
body {
font-family: Arial, san-serif; /* starts with this line */
color: #555;
 font-size: 14px;
line-height: 20px; /* ends here, before the closing curly brace */
}

Declaration
A declaration is generally any single line of CSS that appears between the curly
braces, whether shorthand or longhand.
Sample Code:
body
{
font-family: Arial, sans-serif; /* this line is a declaration */
}

Property
A property is what appears before the colon in any line of CSS.
Sample Code:
#box {
width: 200px; /* the property is “width” (without the colon) */
}
Value
A value is what appears immediately after the colon in any line of CSS.
Sample Code:
#box {
width: 200px; /* 200px is the value */
}

Selector
A selector is the part of the CSS line that selects what element to target with the
property/value pair. In the example below “#container #box” is the selector:
Sample Code:
/* the selector is everything on the first line */
/* excluding the opening curly brace */
#container #box {
width: 200px;
}

Class Selector
The selector in the example below targets an element by its class name. So every
element with a class of “navigation” will receive the styles in question:
Sample Code:
/*matches HTML element with class=”navigation” */
.navigation{
 Width:960px;
Margin: 0 auto;
}

ID Selector
The selector in the example below targets an element by its ID. So every element with
an ID of “navigation” will receive the styles in question:

Sample Code:
/*matches HTML element with class=”navigation” */
#navigation{
width:960px;
margin: 0 auto;
}

Fig.18. ID Selector.

Cascading
Within CSS, all styles cascade from the top of a style sheet to the bottom that allows
styles to be added or even overwritten as the style sheet progress.
The given code below illustrates the selected paragraph elements at the top of the style
sheet and set the background color to yellow and the font size of 29 pixels. Towards the
bottom of the style sheet, by selecting all paragraph elements again and set their
background color to blue.
Sample Code:
p {
background: yellow;
font-size: 24px;
}
p {
 background: blue;
}

Cascading Properties
The cascade works with the properties inside individual selectors. Selecting
all the paragraph elements and set the background color to yellow.
Sample Code:
p {
background: orange;
}

Specificity Points
Every selector in CSS has a specificity weight. It identifies how styles are being
rendered. Specificity points are intentionally hyphenated, as the values are not
computed from a base of 10. Class selectors do not hold a point value of 10, and ID
selectors do not hold a point value of 100. These points should be read as 0-1-0 and
1-0-0.
Remember that, the higher the specificity weight of a selector, the more
superiority the selector is given when a styling conflict occurs.
Sample Code:
_HTML_Code:
<p id= “food”>…</p>

_CSS_Code:
#food{
background: green;
}
p{
background: orange;
}

Combining Selectors
Aside from know how to use different types of selectors individually, we also need to
know how to use the selectors together. By combining selectors we can be more specific
about which element or group of elements we would like to select.
An example below shows that, the selected paragraph elements that reside within an
element with a class attribute value of Web Programming and set its background color to
brown. However, if one of those paragraphs happens to have the class attribute value of
programming, we want to set its background color to yellow.

Sample Code:
 _HTML_Code:
<div class=”webprogramming”>
<p>…</p>
<p>…</p>
<p class=”programmer”>…</p>
</div>

_CSS_Code:
.webprogramming p {
Background: brown;
}
.webprogramming p.programmer {
Background: yellow;
}

Layering Styles with Multiple Classes

We can tie styles we want to continually reuse to one class and layer on additional
styles from another class. Let’s say for example we want all of our buttons to have a font
size of 20 pixels, but we want the background color of our buttons to vary depending on
where the buttons are used, then we can create a few classes and layer them on an element
as necessary to apply the desired styles.
Sample Code:
_HTML_Code:
<a class=”btn btn-danger”>…</a>
<a class=”btn-success”>…</a>

_CSS_Code:
.btn {
font-size:16px;
}
.btn-danger {
background: red;
}
.btn-success {
background: green;
}
The btn is used to apply a font size of 16 pixels to each of the elements. Then the first
anchor element uses an additional class of btn-danger to apply a red background color while
the second anchor element uses an additional class of btn-success to apply a green
background color.

TOPIC 2: FORMATTING TEXT

 We were limited long time ago with the small number of typefaces that we could use
on a website. Now, with the ability to embed fonts, we have a much larger palette of
typefaces to choose from, including those that we add to a website. So, there is in need to
know the basic principles of typography.

Typeface vs. Font

Typeface and Font are often interchanged because of its confusion. Here are some
tips to remember the difference of the two.
A typeface is what we see. It is the artistic impression of how text looks, feels, and
reads. A font is a file that contains a typeface. Using a font on a computer allows the
computer to access the typeface.

Adding Color to Text

The only property we need to set the color of text is the color property. The color
property accepts one color value, but in many different formats.
Sample Code:
html {
Color: #555;
}

Changing Font Properties

CSS offered two categories to edit the looks and feelings of our text on a page. These
properties falls into two categories: font-based properties and text-based properties.
Font Family
Font-family property is used to declare which font as well as which fallback or
substitute fonts should be used to display text. The value of the font-family property
contains multiple font names, all comma separated.
The first declared font, starting from the left, is the primary font choice. An
alternative fonts are declared after it in order of preference from left to right.
Sample Code:
body {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
}

Font Size
 Font-size property provides the ability to set the size of text using common
length values, including pixels, em units, percentages, points, or font-size keywords.
Sample Code:
body {
font-size: 14px;
}

Font Style
To change text to italics, or to prevent text from being italicized, the use of the
font-style property accepts four keyword values: normal, italic, oblique, and inherit.
Of these four, the most commonly used are italic and normal.
Sample Code:
.special {
Font-style: italic;
}

Font Variant
The font-variant property that accepts three values: normal, small-caps, and
inherit are used to switch typefaces between normal and small caps variants. To
switch all elements with a class firm, font-variant of small-caps must be used.
Sample Code:
.firm {
Font-variant: small-caps;
}

Font Weight
The font-weight property that accepts either keyword or numeric values are
applied to style text as bold or to change the specific weight of a typeface. Keyword
values include normal, bold, bolder, lighter, and inherit. However, it is recommended
to primarily use normal and bold to change text from normal to bold and vice versa.
Rather than using keyword values bolder or lighter, and it is better to use a numeric
value for more specific control.
Sample Code:
.daring {
font-weight: bold;
}

The numeric values of 100 to 900 pertains specifically to typefaces that have
multiple weights. The thinnest weight starts with 100 up to the thickest weight of 900.
 Line Height
The distance between two lines of text is declared using the line-height
property.
Sample Code:
body {
line-height: 22px;
}

Line height may also be used to vertically center a single line of text within an
element. Using the same property value for the line-height and height properties will
vertically center the text.

Sample Code:
_HTML_Code:
_CSS_Code:

.btn {
height: 22px;
line-height: 22px;
}

Shorthand Font Properties

The shorthand value is used to bind all of the font-based properties. It accepts
multiple font based property values. The order of these property values are: font-
style, font-variant, font-weight, font-size, line-height, and font-family. The used of a
forward slash /, is a separator needed in between the font-size and line-height
property values.
Sample Code:
html {
font: italic small-caps bold 14px/22px “Helvetica Neue”. Helvetica,
arial, sans-serif;
}

TOPIC 3: COLORS AND BACKGROUND

The CSS property values relate to colors and length measurements.

Colors
 All color values within CSS are defined on an sRGB (or standard red, green, and blue)
color space. Varied colors are formed by mixing red, green, and blue color channels
together.
Keyword Colors
Keyword color values are names (such as red, green, or blue) that map to a given
color. These keyword names and their corresponding colors are determined by the CSS
specification. Most common colors, along with a few oddities, have keyword names.
Sample Code:
_CSS_Code:
.web {
background: marron;
}
.web1 {
background: yellow;
}

• Hexadecimal Colors
Hexadecimal color values consist of a pound, or hash, #, followed by a three-
or six-character figure. The figures 0 through 9 and the letters a through f, upper or
lower case are valid. These values map to the red, green, and blue color channels.

In six-character notation, the first two characters represent the red channel,
the third and fourth characters represent the green channel, and the last two
characters represent the blue channel. In three-character notation, the first
character represents the red channel, the second character represents the green
channel, and the last character represents the blue channel.

If in six-character notation the first two characters are a matching pair, the
third and fourth characters are a matching pair, and the last two characters are a
matching pair, the six-character figure may be shortened to a three-character figure.
To do this the repeated character from each pair should be used once. For example,
a shade of orange represented by the hexadecimal color #ff6600 could also be written
as #f60.

# ff 66 00

R G B

Fig.19. Six-Character Hexadecimal Values.

 • RGB & RGBa Colors
RGB color values are stated using the rgb () function. The function accepts
three coma-separated values, each of which is an integer from 0 to 255. A value of 0
would be pure black while a values of 255 would be pure white.
The code below illustrates the shade of orange from before as an RGB color
value, and it does represents as rgb (255, 102, 0).
Sample Code:
.web {
background: rgb (255, 102,0)
}

Lengths
Length values within CSS are similar to colors in that there are a handful of different
types of values for length. It comes from different values of different forms: they are
absolute and relative that uses different units of measurement.
Sample Code:
div {
height: 200px;
width: 50%;
background-color: powderblue;
}

• Absolute Lengths
Absolute length values are the simplest length values, as they are fixed
to a physical measurement, such as inches, centimeter, or millimeters. The
most popular absolute unit of measurement is known as the pixel and is
represented by the px unit notation.
Pixels
The pixel is equal to 1/96th of an inch; thus there are 96 pixel in an inch.
But it differ from the density of viewing devices.
Sample Code:
p{
font-size: 14px;
}
• Relative Lengths
Relative length values are a little more complicated, as they are not
fixed units of measurement; they rely on the length of another measurement.
 • Percentages
Percentages represented by the % unit notation, and are one of the
most popular relative values. Percentage lengths are defined in relation to the
length of another object. For example, to set the width of an element to 50%,
we have to know the width of its parent element, the element it is nested
within, and then identify 50%of the parent element’s width.
Em

The em unit is also a very popular relative value. The em unit is

represented by theem unit notation, and its length is calculated based on an
element’s font size.

A single em unit is equivalent to an element’s font size. So, for example,

if an element has a font size of 14 pixels and a width set to 5em, the width would
equal70 pixels (14 pixels multiplied by 5).

Sample Code:
.web{
font-size: 14px;
Width: 5em;
}

Note:
1in is always 96px;
3pt is always 4ps;
25.4mm is always 96px.

TOPIC 4: THINKING INSIDE THE BOX

We already know how to perform basics and familiar already working with HTML and
CSS. In this lesson, we will know how the elements looks like on a page and how to resize it
through a box model.
Generally, a block-level elements used for a large pieces of content by occupying any
available width. Thus, inline-level elements generally, used smaller pieces of content, such
a few words selected to be modified.
Display
 Display property determined how elements are shown as a block-level elements,
inline and elements. Knowing that, every element is being displayed with its default
appearance. However, property values may be overwritten. The block, inline, inline-block
has greater values for the display property compared to the display property.
Sample code:
Showing the value of block as the element of display property.
p {
display: block;
}

Showing the value of inline as the element of display property.

p {
display: inline;
}

Showing the value of inline-block as the element of display property.

p {
display: inline-block;
}

First Paragraph. Second Paragraph. Third Paragraph

Fig.20. Three paragraphs displayed together in a horizontal line.

Showing the value of none as the element of display property.

p {
display: none;
}
Here, the value of none completely hides the element to render the page as if the
element doesn’t exist.
Principles of a Box Model
The principles behind the box model concept is that, every element on a page is in a
rectangular box. It may have width, height, padding, borders, and margins. Here, every
element declared conforms to a box model.

Learn how to love me..

I’m Froggie

Fig.21. Text and image wrapped individually in a rectangular shapes.

Working with the Box Model
We learned that every element is a rectangular box. The properties that determine
the size of the box are: The core of the box that is defined by the width and height of an
element which may be determined by the display property; The specified width and height
properties; Padding; The border that expand the dimensions of the box outward from the
element’s width and height; and lastly, The Margin that specifies the border.
Thus, each part of the box model corresponds to a CSS property like the width, height,
padding, border, and the margin.
Sample code:
div {
border: 6px solid #949599;
height: 10 px;
margin: 20px;
padding: 20px;
width: 400px;
}

Note:
In box model, the total width of an element can be calculated using this
formula:

margin-right + border-right + padding-right + width + padding-left + border-left

+margin-left

In box model, the total width of an element can be calculated using this
formula:

Margin-top + border-top + padding-top + height + padding-bottom + border-

bottom + margin bottom

Width: 492px = 20px+ 6px+ 20px +400px+ 20px+ 6px+20px

Height: 192px = 20px+ 6px+ 100px+ 20px+ 6px+ 20px

Margin 20
Border 6

Padding 20

20 6 20 20 6 20
 20
6
6

20

Fig.22. Total Width and Height of the Box Model.

Note:
The width is set with the property value of 400 pixels, but the actual width of
the elements is 492.

Therefore, by default the box model is additive.

Width & Height

The width and the height may start with 0 pixels. Since, every element has default
width and height the browsers by default, renders every element with size.
Width
The default width of an element depends on its display value. Block-level
elements have a default width of 100%, consuming the entire horizontal space
available. Inline and inline-block elements expand and contract horizontally to
accommodate their content. Inline-level elements cannot have a fixed size, thus the
width and height properties are only relevant to non-inline elements. To set a specific
width for a non-inline element, use the width property:
Sample Code:
div {
}

Height
The default height of an element is determined by its content. An element will
expand and contract vertically as necessary to accommodate its content. To set a
specific height for a non-inline element, use the height property:
Sample Code:
div {
}
Margin & Padding
Browsers applies default margins and padding to an element to help with legibility
and clarity. Remember that, the default margins and padding for these elements may differ
from browser to browser to element. Lesson 1 discussed CSS reset to tone all of the default
values down to zero and this may be the ground to specify our own values.

TOPIC 5: MARGIN PROPERTIES

Margin The margin property allows us to set the amount of space that surrounds an
element. Margins for an element fall outside of any border and are completely transparent
in color. Margins can be used to help position elements in a particular place on a page or to
provide breathing room, keeping all other elements a safe distance away. Here’s the margin
property in action:
Sample Code:
div {
margin: 20px;
}

To set one value for the top and bottom and another value for the left and right
sides of an element, specify two values: top and bottom first, then left and right. Here
we are placing margins of 10 pixels on the top and bottom of a
and margins of 20 pixels on the left and right:

Sample Code:
div {
margin: 10px 20px;
}

To set unique values for all four sides of an element, specify those values in
the order of top, right, bottom, and left, moving clockwise. Here we are placing
margins of 10 pixels on the top of a , 20 pixels on the right, 0 pixels on the bottom, and
15 pixels on the left.
Sample Code:
div {
margin: 10px 20px 0 15px;
}

TOPIC 6: PADDING PROPERTIES

The padding property is very similar to the margin property; however, it falls
inside of an element’s border, should an element have a border. The padding
property is used to provide spacing directly within an element. Here’s the code:
Sample Code:
div {
padding: 20px;
}
 Using the margin or padding property alone, with any number of values, is
considered shorthand. With longhand, we can set the value for one side at a time
using unique properties. Each property name (in this case margin or padding) is
followed by a dash and the side of the box to which the value is to be applied: top,
right, bottom, or left. For example, the padding-left property accepts only one value
and will set the left padding for that element; the margin-top property accepts only
one value and will set the top margin for that element.

Sample Code:
div {
margin-top: 10px;
}

Note:
Margins only work horizontally - left and right on inline-level-elements.

Padding works on all four sides of inline-level elements; however, the verical
padding-the top and bottom-may bleed into the lines above and below an
element.

TOPIC 7: BORDER PROPERTIES

Borders
Borders fall between the padding and margin. The border property requires: width,
style, and color. Shorthand values for the border property are stated in that order—width,
style, color. In longhand, these three values can be broken up into the border-width, border-
style, and border-color properties. These longhand properties are useful for changing, or
overwriting, a single border value.
Borders can have different appearances. The most common style values are solid,
double, dashed, dotted, and none, but there are several others to choose from.
Sample code for a 6-pixel-wide, solid, gray border that wraps around all four sides of
a <div>:
div {
border: 6px solid #949599;
}
div {
border: 6px solid #949599;
}
_HTML_Code:
<code class="border-solid">2px <br> solid</code>
<code class="border-double">6px <br> double</code>
<code class="border-dashed">8px <br> dashed</code>
<code class="border-dotted">4px <br> dotted</code>
_CSS_Code:
code {
background: #eaeaed;
color: #666;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console",
Terminal, "Courier New", Courier;
display: inline-block;
height: 70px;
margin: 0 14px;
padding-top: 20px;
text-align: center;
width: 90px;
}
.border-solid {
border: 2px solid #9799a7;
}

Note:
Border may be specify with the values of: double, dashed, and
dotted.

Individual Border Sides

As with the margin and padding properties, borders can be placed on one side of an
element at a time if we’d like. Doing so requires new properties: border-top, border-right,
border-bottom, and border-left. The values for these properties are the same as those of the
border property alone: width, style, and color. If we want, we can make a border appear only
on the bottom of an element:

Sample Code:
div {
border-bottom: 6px solid #949599;
}
Additionally, styles for individual border sides may be controlled at an even finer
level. For example, if we wish to change only the width of the bottom border we can use the
following code:
Sample Code:
div {
border-bottom-width: 12px;
}

Border Radius
 The border-radius property enables us to round the corners of an element. The
border-radius property accepts length units, including percentages and pixels that identify
the radius by which the corners of an element are to be rounded.
Consider the code given below, they move in a clockwise fashion starting at the top
left of an element.

Sample code_1:
_HTML_Code:

_CSS_Code:
div {
border-radius: 5px;
}

Sample code_2:
_HTML_Code:
<code class="border-rounded">5px</code>
<code class="border-circle">50%</code>
<code class="border-football">15px 75px</code>

_CSS_Code:
code {
background: #eaeaed;
color: #666;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console",
Terminal, "Courier New", Courier;
display: inline-block;
height: 90px;
line-height: 90px;
margin: 0 14px;
text-align: center;
width: 90px;
}
.border-rounded {
border-radius: 5px;
}
.border-circle {
border-radius: 50%;
}
.border-football {
border-radius: 15px 75px;
}

5px 50%
 Fig.23. Different Border-Radius Sizes.

TOPIC 8: BOX SIZING

Box Sizing
Until now the box model has been an additive design. If you set the width of an
element to 400 pixels and then add 20 pixels of padding and a border of 10 pixels on every
side, the actual full width of the element becomes 460 pixels. Remember, we need to add
the width, padding, and border property values together to get the actual, full width of an
element.

Content Box
The content-box value is the default value, leaving the box model as an additive
design. If we don’t use the box-sizing property, this will be the default value for all elements.
The size of an element begins with the width and height properties, and then any padding,
border, or margin property values are added on from there.

Sample Code:
div {
webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-moz-box-sizing: content-box;
}

Padding Box
The padding-box value alters the box model by including any padding property values
within the width and height of an element. When using the padding-box value, if an element
has a width of 400 pixels and a padding of 20 pixels around every side, the actual width will
remain 400 pixels. As any padding values increase, the content size within an element
shrinks proportionately. If we add a border or margin, those values will be added to the width
or height properties to calculate the full box size. For example, if we add a border of 10 pixels
and a padding of 20 pixels around every side of the element with a width of 400 pixels, the
actual full width will become 420 pixels.
Sample Code:
div {
box-sizing: padding-box;
}
 TEST YOURSELF

Analyze the given cases below:

1. Encode the CSS code that demonstrates the different possibilities when styling text. And
try to modify it by putting all of the font-based properties together.
h2,
p {
color: #555;
font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
color: #0087cc;
}
a:hover {
color: #ff7b29;
}
h2 {
font-size: 22px;
font-weight: bold;
margin-bottom: 6px;
}
.byline {
color: #9799a7;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
margin-bottom: 18px;
}