You are on page 1of 21

Introduction to Web Design

and Applications
APT 1040
LECTURE 9 A

By Bernard Ondiek
bondiek@usiu.ac.ke

Intro to Web Design and Apllication 1


Cascading Style Sheets (CSS
What is CSS?
 CSS stands for Cascading Style Sheets
 Styles provide powerful control over the presentation of
web pages.
 CSS is a language that describes the style of an HTML
document.
 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
Intro to Web Design and Apllication 4
LAB 1: Simple CSS
 Type a simple html document that displays welcome to
the world of web!!!
 Create a new Tag <style>
 Type the below codes
body{background-color:red; font-size:30px} </style>
 Save and run

Intro to Web Design and Apllication 5


Great your First CSS Webpage

Intro to Web Design and Apllication 6


NOW TRY…

Intro to Web Design and Apllication 7


Style Sheet Syntax Explained
selector
property value rule
Internal Style Sheet

 A style sheet consists of a set of rules.


 Each rule consists of one or more selectors and a
declaration block.
 A declaration block consists of a list of declarations in
curly braces ({}).
 Each declaration consists of a property, a colon (:), a
value, then a semi-colon (;).
Basic CSS Syntax

 CSS Syntax
 selector {property: value;}
Three Different Scopes of CSS
 External CSS
 Internal CSS
 Inline CSS
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.

Intro to Web Design and Apllication 12


LAB 2: TESTING INLINE CSS
<html>
<head>
<title> Inline CSS</title>
</head>
<body>
<h1 style="color:blue;text-align:center;">MAMA OMENA DISPENSARY</h1>
<p style="color:red;">VISIT US IN LUTHULI ESTATE.</p>
</body>
</html>

Intro to Web Design and Apllication 13


LAB EXERCISE 3
<h1 style="color:white; background:orange;
font-weight:bold;">Internal Style Sheet
Applied to Header 1</h1>

What would be the


result?

Try?
Internal Style Sheet
 How to create?
 Put <style> </style> tag between <head> and </head>
tags of your HTML page
 Use type attribute to indicate the style sheet type, usually
type=“text/css”
 Specify a default style sheet language for the whole
document by
<meta http-equiv="Content-Style-Type"
content="text/css" />
 Put your set of style sheet rules in between <style> and
</style> tags
Internal Style Sheet
<head>
<title> My Page Title </title>
<style TYPE="text/css >
<! - -
element.class { property:value; }
element.class { property:value; }
-->
</style>
</head>
LAB4:TEST INTERNAL STYLE SHEET
 <html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Intro to Web Design and Apllication 17


EXTERNAL STYLE SHEET
 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.

Intro to Web Design and Apllication 18


LAB 5
 Type the below code and save with .html
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Intro to Web Design and Apllication 19


cont
 Type the below codes and save with mystyle.css

 body {
  background-color: lightblue;
}

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

 Run the html file

Intro to Web Design and Apllication 20


Q&A

Intro to Web Design and Apllication 21

You might also like