Scribd
Upload
33 views

L3 Cascading Style Sheets

This document discusses cascading style sheets (CSS) and how they can be used to control formatting and layout of web pages. It covers three ways to insert style sheets - external, internal, and inline styles. External style sheets allow changing the look of an entire website by changing one file, while internal style sheets define styles within the <head> section for a single document. Inline styles can be used to apply a unique style to a single element. The document also discusses CSS syntax, properties, selectors like classes and IDs, and how to add background images and colors with CSS.

Uploaded by

dmwale2003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
33 views

L3 Cascading Style Sheets

This document discusses cascading style sheets (CSS) and how they can be used to control formatting and layout of web pages. It covers three ways to insert style sheets - external, internal, and inline styles. External style sheets allow changing the look of an entire website by changing one file, while internal style sheets define styles within the <head> section for a single document. Inline styles can be used to apply a unique style to a single element. The document also discusses CSS syntax, properties, selectors like classes and IDs, and how to add background images and colors with CSS.

Uploaded by

dmwale2003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 59

CUIT 216:

WEB DESIGN AND E-BUSINESS

CASCADING STYLE SHEETS - CSS

1
HTML AND FORMATTING

The original HTML 3.2 was never intended to contain tags


for formatting a document.
Development and maintainance of web sites where fonts
and colour information were added to every single HTML
element, became a long and expensive process.
In HTML 5.0 all formatting can be removed from the
HTML document, and stored in a style sheet. 2
STYLESHEETS

Stylesheets can be used to control the presentation.


Main stylesheet language is CSS (Cascading
Stylesheets).
A stylesheet specifies how different elements should be
displayed, e.g.
body {background-color: blue}
h1 {color: red; font-family: times} 3
CASCADING STYLE SHEETS

CSS is used to control the style and layout of multiple


Web pages all at once.
With CSS, all formatting can be removed from the HTML
document and stored in a separate file.
CSS gives you total control of the layout, without messing
up the document content.
4
CSS SYNTAX

CSS Syntax Definition Example


Selector (HTML) element that identifies this style h1, body, p, div

Property Describes the selector font-variant, font-color


5
Value Value used to define the property 10pts, purple, 85%
GROUPING PROPERTIES
More than one property may appear between the curved
brackets; however you must separate the properties using a
semicolon ( ; ).
blockquote {
background: ffff00;
color: black;
6

}
GROUPING SELECTORS
You can group HTML Selectors together:

h2, h3, h4, h5, h6 {


font-family: "Arial", "sans-serif";
font-style: italic;
font-size: large; 7

}
CSS
When a browser reads a style sheet, it will format the
document according to it.
There are three ways of inserting a style sheet:
External style sheet
Internal style sheet
Inline styles
8
SETTING UP STYLE SHEETS: 3 APPROACHES
Style Type Placement Affected How?
As part of an HTML tag
Inline The specific tag the style is
placed in between the <body>
aka: Local Style attached to in that occurrence.
tags

Embedded As part of a style placed in All occurrences of that tag in


aka: Document-Wide Style between <head> tags that specific document only.

Can be linked to any HTML


Linked As part of a style created in a
document affecting the tags in
aka: External Style Sheet separate text file (.CSS)
that HTML document 9
INLINE STYLE SHEETS

10
INLINE STYLE SHEET
An inline style can be used if a unique style is to be applied to one
single occurrence of an element.
To use inline styles, use the style attribute in the relevant tag. The
style attribute can contain any CSS property.
The example shows how to change the text color and left margin
of a paragraph:

<p style="color:blue;margin-left:20px">This is a paragraph.</p> 11


INLINE STYLE SHEET –
EXERCISE 1

Start with a normal HTML


web-page without any
stylesheets applied, to give
the following output:

12
INLINE STYLE SHEET –
EXERCISE 1

Let’s add style

13
INLINE STYLE SHEET –
EXERCISE 1

The Styles

14
INTERNAL (DOCUMENT-LEVEL) STYLE SHEET

15
INTERNAL (DOCUMENT-LEVEL) STYLE SHEET
An internal style sheet can be used if one single document has a unique
style.
 Internal styles are defined in the <head> section of an HTML page, by
using the <style> tag, like this:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style> 16

</head>
INTERNAL STYLE SHEET –
EXERCISE 2

Suppose we add 2 paragraphs,


whose styles are not defined in
any way

Lets add a generic style for the


<p> tag.

17
INTERNAL STYLE SHEET –
EXERCISE 2

Add the code


in the header

18
INTERNAL STYLE SHEET –
EXERCISE 2

Result demonstrates the Order


of priority.

19
EXTERNAL STYLE SHEET

20
EXTERNAL STYLE SHEET

 An external style sheet is ideal when the style is applied to many pages.
 With an external style sheet, you can change the look of an entire Web
site by changing one file.
 Each page must link to the style sheet using the <link> tag. The <link>
tag goes inside the <head> section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" /> 21

</head>
EXTERNAL STYLE SHEET –
EXERCISE 3

Lets take the styles defined in


the heading out into an
external sheet called styles.css

22
EXTERNAL STYLE SHEET –
EXERCISE 3
What does the code look like?

23
COMMENTS FOR STYLE SHEETS

To open a comment, use: /*


To close a comment, use */

24
STYLE SHEET STRATEGIES

Wherever possible, place your styles in external style


sheets
Take advantage of the power of CSS to have control over
an entire Web site

25
SELECTORS

26
1. CLASS SELECTOR

The class selector is used to specify a style for a group of


elements. The class selector is most often used on several
elements.
This allows you to set a particular style for any HTML elements
with the same class.
It is a good idea to keep the class name simple and descriptive,
based on how you will use the class in your document. 27
1. CLASSES

The class selector uses the HTML class attribute, and the
class name always begins with a “.”
In the example below, all HTML elements with
class="center" will be center-aligned:

.center {text-align:center;} 28
TYPES OF CLASSES

There are two types of classes that you can


create:
a) Independent
b) Dependent
29
A. INDEPENDENT CLASS
Can be used with any HTML tag.
As in the example below, you can see that the class,
“.supersize” is independent and can be used with any HTML
tag.

i. A class defined: .supersize {font-size: 72pt;}


ii. Used in an HTML tag: <big class= “supersize”>text</big>
30
B. DEPENDENT CLASS

Can only be used with a particular HTML tag.


As in this example below, you can see that the class “urgent” is
associated with the BOLD tag and thus dependent on it.

i. A class defined: b.urgent {font-style: underline; font-size:


20pt;}
31

ii. Used in an HTML tag: <b class= “urgent”>text</b>


B. DEPENDENT CLASS

You can also control the images that are displayed in your site
from a central point with Style Sheets.
To do this, you will use another of the Classification Properties.

32
EXERCISE 4

33
34
EXERCISE 4 - OUTPUT

35
EXERCISE 5 - OUTPUT

Write the code for the following output:

36
EXERCISE 5 - CODE

37
EXERCISE
6

Write the
code for
the
output:

38
2. ID SELECTOR
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is
defined with a "#".
The style rule below will be applied to the element with id="para1":
#para1
{
text-align:center;
color:red; 39

}
USE OF ID

Identifying major page sections (for example, header, content,


footer)
Identifying unique content or modules (for example, search,
navigation, ad)
Identifying an element to be used with Javascript.
40
BACKGROUND STYLES FOR CSS

41
A. BACKGROUND IMAGE

42
A. BACKGROUND IMAGE - CODE
<html> </p>
<head> <br/><br/>
<link href="CSSExample.css" rel="stylesheet"
type="text/css"> <p>
<style type="text/css"> <h1 style= "color:orange; font-family: sans-
sarif">This is an in-line style sheet</h1>
h2 {font-family: sans-serif; color: purple} </p>
body { background-image:url("pattern.jpg");
background-repeat:no-repeat; <br/><br/>
background-position:top;
} <p>
<h2> And finally, an embedded style sheet</h2>
</style> </p>

</head> </body>
</html>
<body>

<h1> Welcome to style </h1>

<p> 43
<b>Now this is an example of an external style sheet</b>
B. COLOR, BORDER AND MARGINS
Putting a gradient color at the background.
 Syntax:
background : linear – gradient(direction, color-stop1, color-stop2, ….)
background : linear – gradient(angle, color-stop1, color-stop2)
background : repeating- linear – gradient(red, yellow 10%, green 20%)
Putting a border around text
Inserting a margin and padding
44

Inserting an image
GRADIENT COLOR BACKGROUND

45
GRADIENT COLOR BACKGROUND - CODE
<html> img { size: 100px 100px;
<head> position:absolute;
<link href="CSSExample.css" rel="stylesheet" left:500px;
type="text/css"> top:0px;
<style type="text/css"> z-index:-1;}
</style>
h2 {font-family: sans-serif; color: purple}
body { background-image:url("dancer.png"); </head>
background-repeat:no-repeat;
background-position:top right; <body>

background-color:; <h1> Welcome to style </h1>


background:linear-gradient(to
right,#C8C8C8,blue ); <p>
paddding:500px; <b>Now this is an example of an external style
margin-left:100px; sheet</b>
margin-top:50px; </p><br/><br/>
margin-right:100px;
padding-top:10px; <img src="dancer.png">
padding-left:10px
} <p> 46
h3 { border-style:solid; <h1 style= "color:orange; font-family: sans-
border-color:#F8F8F8} sarif">This is an in-line style
GRADIENT COLOR BACKGROUND - CODE
img { size: 100px 100px; <p>
position:absolute; <h2> And finally, an embedded style sheet</h2>
left:500px; </p>
top:0px;
z-index:-1;} <h3>What about a layer 3 heading??</h3>
</style>
</body>
</head> </html>

<body>

<h1> Welcome to style </h1>

<p>
<b>Now this is an example of an external style sheet</b>
</p><br/><br/>

<img src="dancer.png">

<p>
<h1 style= "color:orange; font-family: sans-sarif">This is 47
an in-line style sheet</h1></p><br/><br/>
C. MENUS, IMAGES, SPAN AND PARAGRAPHS

The next example demonstrates the following CSS styles:


Vertical menu
Adding image hyperlinks
Putting span elements
Positioning a paragraph on the page
Adding a background color to a paragraph 48
A MENU CAN BE DONE HORIZONTALLY AS IN THE EXAMPLE BELOW

49
A MENU CAN BE DONE HORIZONTALLY AS IN THE
EXAMPLE BELOW - CODE

50
C. MENUS, IMAGES, SPAN AND PARAGRAPHS

51
C. MENUS, IMAGES, SPAN AND PARAGRAPHS

52
C. MENUS, IMAGES, SPAN AND PARAGRAPHS

53
C. MENUS, IMAGES, SPAN AND PARAGRAPHS

54
EXERCISE 7
Write the HTML and CSS code for the following:

55
EXERCISE 7 - CSS

56
EXERCISE 7 - HTML

57
PRACTICE QUESTION:

Create a web page that has the following layout


dimensions:
Container : Width = 800px ; Height = 800px
Header : Height = 150px
Side bar: Width =120px ; Height=500px
Main body: Width =680px ; Height=500px
Footer :Height = 90px
58
PRACTICE QUESTION:

59

You might also like