Web Design and Development Lesson 5

Lesson 5: Cascading Style Sheets (CSS)

Lesson 5: Cascading Style Sheets (CSS) ........................................................................................................ 1

5.1 Introduction .................................................................................................................................. 2
5.2 CSS Syntax / Rule .......................................................................................................................... 3
5.3 CSS Selectors................................................................................................................................. 3
5.4 Ways of defining a style ............................................................................................................... 4
5.4.1. Inline CSS ............................................................................................................................... 4
5.4.2. Internal CSS ........................................................................................................................... 4
5.4.3. External CSS........................................................................................................................... 4
5.5 CSS Colors ..................................................................................................................................... 5
5.6 CSS Background ............................................................................................................................ 5
5.7 CSS Borders ................................................................................................................................... 5
5.8 CSS Margins .................................................................................................................................. 6
Lesson 5 Discussion Session ..................................................................................................................... 6

Compiled by: Karari E.K email: [email protected] 1

Web Design and Development Lesson 5

5.1 Introduction
CSS is the language we use to style a Web page.
What is CSS?
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.
• CSS saves a lot of work. It can control the layout of multiple web pages all at once.
• External stylesheets are stored in CSS files(.css)
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.
Example of a webpage:
a) With no style

b) With style

Compiled by: Karari E.K email: [email protected] 2

Web Design and Development Lesson 5

5.2 CSS Syntax / Rule

• A CSS rule consists of a selector and a declaration block.

• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by semicolons and
surrounded by curly braces.
• Each declaration includes a CSS property name and a value, separated by a colon.
Example:

• p is a selector in CSS (it points to the HTML element you want to

p { style: <p>).
color: red;
text-align: center; • color is a property, and red is the property value
} • text-align is a property, and center is the property value
• /* This is a comment */

5.3 CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator Selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors(select elements based on a certain state)
• Pseudo-elements selectors(select and style a part of an element)
• Attribute Selectors(select elements based on an attribute or attribute value)

Compiled by: Karari E.K email: [email protected] 3

Web Design and Development Lesson 5

5.4 Ways of defining a style

There are three ways of inserting a style sheet into HTML: Inline CSS, Internal CSS, and External CSS.

When there is more than one style specified for an HTML element, inline style has the highest priority,
and will override external and internal styles and browser defaults.

5.4.1. Inline CSS

An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
<h1 style="color : blue; text-align : center;">
This is a heading
</h1>
<p style="color : red;">
This is a paragraph.
</p>
5.4.2. Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the <head> section.
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>……
5.4.3. External CSS
With an external style sheet, you can change the look of an entire website by changing just one
file! Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the <head> section. <link rel="stylesheet" href="mystyle.css">
An external style sheet can be written in any text editor, and must be saved with a .css
extension. The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks:
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Compiled by: Karari E.K email: [email protected] 4

Web Design and Development Lesson 5

5.5 CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
Color Names: Tomato, Gray, Orange, Violet etc
RGB Values: rgb(255, 99, 71)
HEX : #ff6347
HSL : hsl(9, 100%, 64%)
1. Background color: <h1 style="background-color:#ff6347;">
2. Text color: <h1 style="color:Tomato;">
3. Border color: <h1 style="border:2px solid Tomato;">

5.6 CSS Background

The CSS background properties are used to add background effects for elements.
The opacity property specifies the opacity/transparency of an element. It can take a value from
0.0 - 1.0. The lower value, the more transparent. Examples are:
1. Background Color
background-color: lightblue;
opacity: 0.3;
2. Background Image
background-image: url("bgdesert.jpg");
3. Background Repeat
By default, the background-image property repeats an image both horizontally and vertically.
You can change to: repeat-x, repeat-y, or both, or no-repeat.
background-repeat: repeat-x repeat-y;
4. Background Position
background-position: right top;- in the top-right corner.
5. Background Attachment
Specifies whether the background image should scroll or be fixed (will not scroll with the rest of
the page)
background-attachment: fixed;
6. Background Shorthand Property
Specifies all the background properties in one single property.
background: #ffffff url("img_tree.png") no-repeat fixed right top;

5.7 CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element's
border.
Style: border-style: dotted;
The following values are allowed:
• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-color value

Compiled by: Karari E.K email: [email protected] 5

Web Design and Development Lesson 5

• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border.
• hidden - Defines a hidden border.

5.8 CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined
borders.
CSS has properties for specifying the margin for each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left
All the margin properties can have the following values:
• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

Example: margin-top: 100px;

Lesson 5 Discussion Session

Read and practice on:

 CSS Padding
 CSS Outline
 CSS Text- Color, alignment, decoration, etc
 CSS Fonts- Family, Size, Style
 CSS Icons
 CSS Links
 CSS Tables
 CSS Div

Compiled by: Karari E.K email: [email protected] 6