Scribd
Upload
6 views

CSS - Introduction

This document introduces CSS and provides an overview of its advantages and syntax. It describes how to configure color, inline styles, embedded style sheets, external style sheets, and selectors. It also covers cascading style sheets, the different types of CSS, and validation.

Uploaded by

Bwaze Marshall
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

CSS - Introduction

This document introduces CSS and provides an overview of its advantages and syntax. It describes how to configure color, inline styles, embedded style sheets, external style sheets, and selectors. It also covers cascading style sheets, the different types of CSS, and validation.

Uploaded by

Bwaze Marshall
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

CSS- INTRODUCTION

CH 4
LEARNING OUTCOMES

 Describe the purpose of Cascading Style Sheets


 List advantages of using Cascading Style Sheets
 Configure color on web pages with Cascading Style Sheets
 Configure inline styles
 Configure embedded style sheets
 Configure external style sheets
 Configure web page areas with element name, class, id, and descendant
selectors
 Test your CSS for valid syntax

2
OVERVIEW OF
CASCADING STYLE SHEETS (CSS)

 See what is possible with CSS:


 Visit http://www.csszengarden.com

 Style Sheets
 used for years in Desktop Publishing
 apply typographical styles and spacing to printed media

 CSS
 provides the functionality of style sheets
(and much more) for web developers
 a flexible, cross-platform,
3 standards-based language
developed by the W3C.
CSS ADVANTAGES

 Greater typography and page layout control


 Style is separate from structure
 Styles can be stored in a separate document
and associated with many web pages
 Potentially smaller documents
 Easier site maintenance

4
CSS SYNTAX

 Style sheets are composed of "Rules" that describe the styling to be applied.

 Each rule contains a Selector and a Declaration

5
CSS SELECTORS

Common Types of Selectors:


 HTML element name selector
 class selector
 id selector
 descendant selector
CSS SYNTAX SAMPLE

Configure a web page to display blue text and yellow background.

body { color: blue;


background-color: yellow; }

This could also be written using hexadecimal color values as shown below.

body { color: #0000FF;


background-color: #FFFF00; }

7
CSS SYNTAX FOR COLOR VALUES

CSS Syntax Color Type


p { color: red } Color name

p { color: #FF0000 } Hexadecimal color value


Shorthand hexadecimal
p { color: #F00 } (one character for each hexadecimal pair
– only used with web safe colors)

p { color: rgb(255,0,0) } Decimal color value (RGB triplet)


Decimal color value (RGB triplet) followed by
p { color: rgba(255,0,0,0.5) } the alpha opacity (a value from 0 to 1).

p { color: hsl(0, 100%, 50%) } HSL color values.


8
INLINE CSS WITH THE STYLE ATTRIBUTE

 Inline CSS
 Configured in the body of the Web page
 Use the style attribute of an HTML tag
 Apply only to the specific element

 The Style Attribute


 Value: one or more style declaration property and value pairs

 Examples

<h1 style="color:#ff0000">Heading text is red</h1>


9
TYPES OF CASCADING STYLE SHEETS

 Inline Styles
 Embedded Styles
 External Styles
 Imported Styles

10
DESCRIPTION OF THE TYPES OF
CASCADING STYLE SHEETS

 Inline Styles
◦ Configured in the body of the web page
◦ Use the style attribute of an HTML tag
◦ Apply only to the specific element
 Embedded Styles
◦ Configured in the head section of a web page.
◦ Use the HTML <style> element
◦ Apply to the entire web page document
 External Styles
◦ Configured in a separate text file with .css file extension
◦ The HTML <link> element in the head section of a web page
associates it with the .css file
 Imported Styles
11 ◦ Similar to External Styles
◦ We’ll concentrate on the other three types of styles.
THE “CASCADE”

12
CONFIGURE EMBEDDED CSS
WITH THE STYLE ELEMENT

 Configured in the head section of a web page.


<style>
 Use the HTML <style> element
body { background-color:
 Apply to the entire web page document #000000;
 Style declarations are contained between color: #FFFFFF;
the opening and closing <style> tags }
 The optional type attribute indicates </style>
the MIME type of text/css
 Example:

13
STYLES CAN FIGHT- WHO WILL WIN?

• The body selector sets the


global style rules for the entire
page.
<style>
• These global rules are body { background-color: #E6E6FA;
overridden for <h1> and <h2> color: #191970; }
elements by the h1 and h2 style h1 { background-color: #191970;
rules. color: #E6E6FA; }
h2 { background-color: #AEAED4;
color: #191970; }
</style>
EXTERNAL STYLE SHEETS - 1

 CSS style rules are contained in a text file


separate from the HTML documents.

 The External Style Sheet text file:


 extension ".css"
 contains only style rules
 does not contain any HTML tags

15
EXTERNAL STYLE SHEETS - 2

Multiple web pages


can associate
with the same clients.html

external style sheet file.


site.css
index.html

body { background-color:
#E6E6FA;
about.html
color: #000000;
}
h2 { color: #003366; }
etc…
16
THE <LINK> ELEMENT FOR EXTERNAL STYLE SHEETS

 A self-contained tag
 Placed in the header section
 Purpose: associates the external style sheet file
with the web page.
 Example:

<link rel="stylesheet" href="color.css">


17
USING AN EXTERNAL STYLE SHEET

External Style Sheet color.css body { background-color: #0000FF;


color: #FFFFFF;
}

To associate with the external style sheet called color.css,


place the following code in the head section:

<link rel="stylesheet" href="color.css">


USING CSS WITH “CLASS”

THE SAMPLE CREATES A CLASS CALLED “NEW” WITH RED


ITALIC TEXT. <style>
TO USE THE CLASS, CODE THE FOLLOWING HTML:
.new { color:
<P CLASS="NEW">THIS TEXT IS RED</P>
#FF0000;
}
</style>
 Apply a CSS rule to ONE OR MORE elements on a web page
 Does not associate the style to a particular HTML element

This text is red.

19
USING A CSS DESCENDANT SELECTOR

 Descendant Selector
 Apply a CSS
rule within the context of <style>
the container (parent) element.
footer p {color: #00ff00; }
 Sometimes called a </style>
contextual selector.

 Configure by listing the


container selector followed by the selector you are styling.
 The sample specifies a green text color
for only the paragraph elements
20
located within the footer element.
THE SPAN ELEMENT
<SPAN>

 An inline-level element
 Purpose:
 Configure a specially formatted area
displayed in-line with other elements,
such as within a paragraph.
 There is no line break before
and after the span.
21
<SPAN> EXAMPLE

 Embedded CSS:

<style>
.companyname { font-weight: bold;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.25em; }
</style>

 HTML:
<p>Your needs are important to us at <span class=“companyname">Acme
Web Design</span>. We will work with you to build your website.</p>
22
W3C CSS VALIDATION

 http://jigsaw.w3.org/css-validator

You might also like