Chapter 2

Working with CSS

Cascading Style Sheets
OBJECTIVES:
 At the end of this module, the students will be able to:
 Explain the basic idea of Cascading Style Sheet
 Discuss the different methods to apply style sheets to
the web page
 Discuss the important style properties
 Apply color schemes using name, rgb and hexadecimal
values.
 Understand the ways, how to insert CSS

Univeristy of Technology & Applied Sciences 2

What is CSS?
 CSS stands for Cascading Style Sheets.
 Describes the appearance, layout, and presentation
of information on a web page
 CSS saves a lot of work. It can control the layout of
multiple web pages all at once.
 CSS enables us to make all pages of our website look
similar and consistent.
 Can be embedded in HTML document or placed into
separate .css file
Univeristy of Technology & Applied Sciences 3
How to create CSS in Blue Griffon
1. Enable the options “Style Properties and Stylesheets” from the
“Panels” as shown below.
2. Both the options will appear on the right-side when it is enabled.

Univeristy of Technology & Applied Sciences 4

How to create Inline CSS

1.Highlight the text.

2.Select “Apply styles to”
3.Choose “this element through inline styles”
4.Then select any properties for applying the styles from the “Style Properties”.

Univeristy of Technology & Applied Sciences 5

How to create Internal CSS
1. Choose the “Stylesheets” tab.
2. Click the + button below
3. Choose the “Embedded in the document”
4. Click the OK button

Univeristy of Technology & Applied Sciences 6

How to apply Internal CSS
1. Highlight the text.
2. Select “Apply styles to”
3. Choose all elements of same type”
4. Apply any formatting needed.

Univeristy of Technology & Applied Sciences 7

How to create External CSS
1. Choose the “Stylesheets” tab.
2. Click the + button below
3. Choose the “Linked to the document”
4. Click the “ New file” option and save the file in the folder with any name.
5. Put check mark for “Make URL relative to page location”
6. Click OK button

Univeristy of Technology & Applied Sciences 8

How to apply External CSS
1. Highlight the text.
2. Select “Apply styles to”
3. Choose all elements of same type”
4. Apply any formatting needed.

Univeristy of Technology & Applied Sciences 9

How to create ID selector
1. Highlight the text.
2. Select “Apply styles to”
3. Choose “this element only through its ID”
4. Apply any formatting needed.
5. Then assign any name for the ID and click ok button.

Univeristy of Technology & Applied Sciences 10

How to create Class selector
1. Highlight the text.
2. Select “Apply styles to”
3. Choose “all elements of class”
4. Assign any name for the class
5. Apply any formatting needed.

Univeristy of Technology & Applied Sciences 11

CSS Syntax
 Syntax:

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

 The declaration block contains one or more declarations separated by
semicolons.
 Each declaration includes a CSS property name and a value, separated
by a colon.
 A CSS declaration always ends with a semicolon, and declaration
blocks
Univeristy are& Applied
of Technology surrounded
Sciences by curly braces. 12
CSS Syntax: Selector Strings
 Single element type:

 Multiple element types:

 All element types:

 Specific elements by id:

Univeristy of Technology & Applied Sciences 13

Three Ways to Insert CSS
 There are three ways of inserting a style sheet:

 External style sheet (in the head section)

CSS code is placed into a separate computer file
and then linked to a web page. Save in .CSS file
extension

 Internal style sheet (in the head section)

 Inline style (inside an TML element)

Univeristy of Technology & Applied Sciences 14
Inline CSS
 To define an inline CSS style, simply add the style attribute
to an HTML element with the CSS declaration as the attribute
value:

<h2 style="color:red;"> CAUTION: Icy Road Conditions</h2>

<h2>Please Slow Down!</h2>

Univeristy of Technology & Applied Sciences 15

Example: Inline CSS

 SAMPLE OUTPUT

Univeristy of Technology & Applied Sciences 16

Internal (embedded) CSS
 To use an internal CSS style sheet, add a <style> section within the <head>
of the page. All CSS declarations go within this section:
<head>
...
<style>
h2 {color:red;}
</style>
</head>
<body>
<h2>CAUTION: Icy Road Conditions</h2>
<h2>Please Slow Down!</h2>
</body>

 Styles declared in the internal style sheet affect all matching elements on the
page. In this example, all <h2> page elements are displayed in the color red.
Univeristy of Technology & Applied Sciences 17
Example: Internal/Embedded CSS

Code: Output:

Univeristy of Technology & Applied Sciences 18

External CSS
 To use an external CSS style sheet, create a new file (with a .css
extension) and write the style declarations into this file. Then add a
<link> element into your HTML file, right after the opening <head> tag:
<head>
<link rel="stylesheet“ href="style.css"/>
...
</head>
<body>
<h2>CAUTION: Icy Road Conditions</h2>
<h2>Please Slow Down!</h2>
</body>

 The <link> element instructs the browser to load the external file
specified by the href attribute and to apply the CSS style declarations
contained there.
Univeristy of Technology & Applied Sciences 19
Example: External CSS (mySample.css)

Code Output

Univeristy of Technology & Applied Sciences 20

Example: External CSS (sample.html)

Univeristy of Technology & Applied Sciences 21

ID (#) Selector
 Used to specify a style for a single, unique element.
 Uses the id attribute of the HTML element.
 Defines with “#”.

 Syntax:

Univeristy of Technology & Applied Sciences 22

Example: ID Selector
 HTML (Assigning name)

 CSS (Calling a ID selector)

Univeristy of Technology & Applied Sciences 23

 Example: ID Selector

OUTPUT

Univeristy of Technology & Applied Sciences 24

Class (.) Selector
 Class selector is used to specify a style for a group of
elements.
 Use to define different style for the same type of a HTML
element.
 Uses HTML class attribute, and defined with a “.”

 Syntax:

Univeristy of Technology & Applied Sciences 25

Example: Class Selector
 HTML (Class Assignment or Naming)

 CSS Class Selector (Calling a Class)

Univeristy of Technology & Applied Sciences 26

Example: Class Selector

OUTPUT:

Univeristy of Technology & Applied Sciences 27

CSS comments /*…*/

 Syntax:

 Example:

Univeristy of Technology & Applied Sciences 28

Overview of Visual Formatting With
CSS
Visual Formatting
Fonts
Colors
Position
Box model and Borders

Univeristy of Technology & Applied Sciences 29

 CSS Text Properties
The following properties can be specified for any element that contains
text, such as <h1> through <h6>, <p>, <ol>, <ul>, and <a>:

Property Values
text-align : center, left, right, justify
text-decoration : underline, line-through, blink, overline,
underline
color : blue, rgb(255,0,0), #ff0000
text-shadow : H-shadow, V-shadow, blur radius and
color
text-transform : Lowercase, Uppercase and Capitalize
text-indent : Length (in px,pt and %)
letter-spacing : Length (negative and positive values)
Note: The properties and values
word-spacing : listed above
Lengthare
(in the mostpt)
px and common for formatting text via
CSS.
Univeristy of Technology & Applied Sciences 30
 CSS Font Properties
The following properties can be specified for any element that contains
text, such as <h1> through <h6>, <p>, <ol>, <ul>, and <a>:

Property Values
font-family : Arial, Verdana, Times New Roman
font-size : large, small, medium,120%, 20px
(pixels)
font-weight : bold, bolder, lighter, normal
font-style : italic, oblique, normal
font-variant : small-caps

Note: The properties and values listed above are the most common for formatting text via
CSS.
Univeristy of Technology & Applied Sciences 31
 CSS Color Properties
The following properties can be specified for any element that contains
text, such as <h1> through <h6>, <p>, <ol>, <ul>, and <a>:

Property Values
background-color : SlateBlue, #F08080, RGB(128, 0, 0)
color : SlateBlue, #F08080,
RGB(128, 0, 0)

Note: The properties and values listed above are the most common for formatting text via
CSS.
Univeristy of Technology & Applied Sciences 32
 Example: CSS properties for colors

CSS code

p {
color: red;
background-color: yellow;
}

OUTPUT
This paragraph uses the style above

Univeristy of Technology & Applied Sciences 33

 CSS Background Properties
The following properties can be specified for <body> element

Property Values
background-color : Color name, Hexadecimal
and RGB
background-image : URL(“filename”)
background-repeat : Repeat, No-Repeat, Repeat-x,
Repeat-y
background-attachment : fixed, scroll
background-position : Left Top, Left Center, Left
Bottom, Right Top,
Right Center, Right, Bottom, Center Top,
Center Center, Center Bottom

Univeristy of Technology & Applied Sciences 34

Example: CSS Background
CSS Code
body {
background-image: url("images/draft.jpg");
}

OUTPUT

Univeristy of Technology & Applied Sciences 35

 CSS Borders Properties
The CSS border properties allow you to specify the style, width, and
color of an element's border.

Property Values
border : Style, Width, and
Color
border-color : Color name /
Hexadecimal / RGB
border-style : Solid, double, dotted,
dashed, grooved,
Inset, outset
and ridge
border-Width : Medium, thick, thin or length (in
px)
border-radius : Rounded Corners
Four
Univeristy of Technology & Applied Sciences 36
Values, Three values, two values
and one value.(in px or %)
Sample Border Style

Univeristy of Technology & Applied Sciences 37

The Box Model

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

Univeristy of Technology & Applied Sciences 38

 CSS Margins Properties
The CSS margin properties are used to create space around elements,
outside of any defined borders. There are properties for setting the margin
for each side of an element (top, right, bottom, and left).

Property Values
margin : auto, px or %
margin-left : Length in px or %
margin-right : Length in px or %
margin-top : Length in px or %
margin-bottom : Length in px or %

Univeristy of Technology & Applied Sciences 39

 CSS Padding Properties
The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.There are properties for
setting the padding for each side of an element (top, right, bottom, and left).

Property
Values
padding : auto, px or
%
padding-left : Length in px
or %
padding-right : Length in px or %
padding-top : Length in px
or %
padding-bottom : Length in px or %

Univeristy of Technology & Applied Sciences 40

Understanding the Margins and Padding
 margin:10px 5px 15px 20px;  padding:10px 5px 15px 20px;
 top margin is 10px  top padding is 10px
 right margin is 5px  right padding is 5px
 bottom margin is 15px  bottom padding is 15px
  left padding is 20px
left margin is 20px

  padding:10px 5px 15px;

margin:10px 5px 15px;
  top padding is 10px
top margin is 10px
  right and left padding are 5px
right and left margins are 5px
  bottom padding is 15px
bottom margin is 15px

 padding:10px 5px;
 margin:10px 5px;  top and bottom padding are 10px
 top and bottom margins are 10px  right and left padding are 5px
 right and left margins are 5px
 padding:10px;
 margin:10px;  all four paddings are 10px
Univeristy of all four margins are 10px
Technology & Applied Sciences 41
The End

 Resources:
 www.w3schools.com
 https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors
 https://msu.edu/course/lbs/126/.../HTML%20Basics%20and%20CSS%20style.ppt
 https://web.stanford.edu/group/csp/cs22/css.ppt

Univeristy of Technology & Applied Sciences 42