CT050-3-1-WAPP

WEB APPLICATIONS
CASCADING STYLESHEET
(CSS)

Module Code & Module Title Slide Title SLIDE 1

 Topic & Structure of The Lesson

• Introduction
• Inline Styles
• Embedded Style Sheets
• Linking External Style Sheets
• Conflicting Styles
• HTML Selectors
• Class Selectors
• W3C CSS Validation Service
• Web Resources

Module Code & Module Title Slide Title SLIDE 2

 Learning Outcomes

• At the end of this topic, You should be able to

• Control the appearance of a Web site by creating style sheets.
• Use a style sheet to give all the pages of a Web site the same look and feel.
• Use the class attribute to apply styles.
• Specify the precise font, size, color and other properties of displayed text.
• Specify element backgrounds and colors.
• Understand the box model and how to control the margins, borders and padding.
• Use style sheets to separate presentation from content.

Module Code & Module Title Slide Title SLIDE 3

 Key Terms You Must Be Able To Use

• If you have mastered this topic, you should be able to use the following terms
correctly in your assignments and exams:

• CSS
– Cascading Style Sheet

Module Code & Module Title Slide Title SLIDE 4

 Introduction

• Cascading Style Sheets (CSS)

– Separation of structure from presentation
• a style sheet is a document that contains instructions that define how to
display HTML elements in a Web page.
• These instructions are called styles.
• An external style sheet typically has the .css file extension.
• 3 types
– Inline
– Embedded / Internal
– External

Module Code & Module Title Slide Title SLIDE 5

 Inline Styles

• Declare an individual element’s format

– Attribute style
– CSS property
– Followed by a colon and a value <p style="font-size: 20pt; color:
• Inline style is a one-time style instruction #0000ff"> Hello </p>
placed in an individual HTML tag.
• However, using inline CSS means that you <p> Bye</p>
are not taking advantage of the true powers
of CSS, and it means that you are not
separating content from presentation.

Module Code & Module Title Slide Title SLIDE 6

 Inline Styles

Module Code & Module Title Slide Title SLIDE 7

 Embedded/ Internal Style Sheets

• Embed an entire CSS document in an XHTML document’s head section

– Multipurpose Internet Mail Extensions (MIME) type
• Describes a file’s content
– Property background-color
• Specifies the background color
– Property font-family
• Specifies the name of the font to use
– Property font-size
• Specifies a 14-point font
• it only affects the style of the page on which it is written

Module Code & Module Title Slide Title SLIDE 8

 Embedded/Internal Style Sheets

Module Code & Module Title Slide Title SLIDE 9

 Linking External Style Sheets

• External style sheets

– Can provide uniform look and feel to entire site
• One external style sheet can control the appearance of many Web pages.
• By creating a CSS file that contains all of the style information for your website, you
can:
– Maintain a consistent look across all pages that link to the style sheet.
– Easily update the look of all pages by changing the values in one file.
– Make your pages much smaller and quicker to download, because all of the style
information has been removed to one file.

Module Code & Module Title Slide Title SLIDE 10

 Linking External Style Sheets

• Each page must link to the style sheet using the <link> tag.
• The <link> tag goes inside the head section:

<link href="[Link]" rel="stylesheet" type="text/css" />

Module Code & Module Title Slide Title SLIDE 11

 Linking External Style Sheets

Module Code & Module Title Slide Title SLIDE 12

 Conflicting Styles

• You could use any or all of these types of styles in a single HTML document.
• If multiple style instructions exist, they will “cascade” into a single set of instructions,
with some instructions taking priority over others.
• This list describes the priority
1. Inline Style (affects single HTML element; overrides all other style instructions)
2. Embedded Style Sheet (affects one HTML document; overrides external style sheet)
3. External Style Sheet (affects multiple documents, overridden by #1 and #2)
4. Browser default

Module Code & Module Title Slide Title SLIDE 13

 Conflicting Styles

Some other points to keep in mind:

• If two styles are applied to the same text, the browser displays all attributes of both
styles unless specific attributes conflict.
• If attributes from two styles applied to the same text conflict, the browser displays the
attribute of the innermost style (the style closest to the text itself).
• HTML formatting will override any CSS formatting.
• Again, please understand that different browsers may implement CSS differently. It is
very important to test your Web pages in a variety of browsers to make sure your pages
display correctly.

Module Code & Module Title Slide Title SLIDE 14

 Conflicting Styles

Module Code & Module Title Slide Title SLIDE 15

 HTML Selectors

• HTML selectors are the text part of a HTML tag and are used to define the
behavior of the specific HTML tag.
• For example: H1 is the selector for <H1> tag.
• Although HTML tag and the selector appear to be identical, they are not the
same.
• The HTML selector is used to control the behavior of its specific HTML tag.

h1 { font-family: arial, sans-

serif }
p { font-size: 14pt }
Module Code & Module Title Slide Title SLIDE 16
 Class Selectors

• Class selectors are selectors that you

create from scratch.
• Can be applied to any HTML tag

.userDefineName { color: blue; }

<p class="userDefineName">Do Re
Mi</p>
<h1 class =“userDefienName”>Hello</h1>
<p>Bye</p>
Module Code & Module Title Slide Title SLIDE 17
 ID Selectors

• ID selectors matches an element based on the value of its id attribute.

• Can be applied to any HTML tag

#idname { color: red; }

<p id=“idname”>Do Re Mi</p>

<h1 id=“idname”>Hello</h1>
<p>Bye</p>

Module Code & Module Title Slide Title SLIDE 18

 Class vs ID Selector

• Class selectors can be used to identify more then one HTML element.
• ID selectors only used to identify one HTML element.

<html>
<head>
</head> CSS
<body>
<div class="main"> .main {
<h3>This is a testing of CSS styling.</h3> background-color: #FFAFA4;
<p id="demo">Sample paragraph with an ID</p> }
<p> Sample paragraph with no ID</p>
</div> #demo {
</body> background-color: #DEDAF7;

</html> }

Module Code & Module Title Slide Title SLIDE 19

 Quick Review Question

• Discuss the types of CSS and its usage in various type of web pages.

Module Code & Module Title Slide Title SLIDE 20

 SUMMARY OF MAIN TEACHING POINTS
 CSS
 Types
 Class
 ID

Module Code & Module Title Slide Title SLIDE 21

 Question and answer session

Q&A
Module Code & Module Title Slide Title SLIDE 22
 What we will cover next

• [Link]

Module Code & Module Title Slide Title SLIDE 23