Scribd
Upload
24 views

Info 655 Intro Web Programing: Week 1: CSS Cascading Style Sheets

This document provides an introduction to Cascading Style Sheets (CSS) including the three styles/approaches of inline, embedded, and external stylesheets. It describes CSS selectors and various CSS properties. It emphasizes using an external stylesheet for consistency and better performance. Examples of CSS code are provided to demonstrate different CSS concepts.

Uploaded by

Shaam Jha
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
24 views

Info 655 Intro Web Programing: Week 1: CSS Cascading Style Sheets

This document provides an introduction to Cascading Style Sheets (CSS) including the three styles/approaches of inline, embedded, and external stylesheets. It describes CSS selectors and various CSS properties. It emphasizes using an external stylesheet for consistency and better performance. Examples of CSS code are provided to demonstrate different CSS concepts.

Uploaded by

Shaam Jha
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/ 32

INFO 655 INTRO WEB PROGRAMING

Week 1: CSS
Cascading Style Sheets

Weimao Ke, Drexel University, wk@drexel.edu


Outline

• Introduction to CSS
• Three styles/approaches
• CSS Selectors
• Some CSS Properties
• CSS Validation

|2
CSS
• Cascading Style Sheets (CSS)
– Used to specify the presentation (formatting) of elements
separately from the structure and content of the page
• Three approaches:
– In-line
– Embedded
– External link
• CSS validator
jigsaw.w3.org/css-validator/

3
Cascading Style Sheets (CSS)
Inline, Embedded, Linking External

4
Inline CSS

|5
CSS: Inline Styles
• Inline style
– declare a style for an individual element by using the style
attribute in the element’s start tag
• CSS rule syntax:
– Each CSS property is followed by a colon and the value
– Multiple property:value pairs are separated by a semicolon

<p style = "font-size: 20pt; color: blue”>…</p>

6
CSS: Inline Styles (Cont.)

<p style = "font-size: 20pt; color: green;"></p>


<p style = "font-size: 20pt; color: #00ff00;”></p>

• 7 color property sets


Embedded CSS

8
CSS: Embedded Style Sheets

• 9 Styles that are placed


CSS: Embedded Style Sheet

<head>
<style type="text/css">
h1 {color: #666;}
p{
font-size: 90%;
font-family: Verdana, sans-serif;
}
</style>
<title>Style Sheets</title>
</head>

10
CSS Selector
• CSS syntax selector {property: value;}
– Type (element) selector
h1 {color: red;}
– Class selector (starts with a dot)
.classname {font-weight: bold;}
p.classname {color: blue;}
– ID selector (starts with a pound sign #)
#idname {font-size: 0.5em;}
div#idname {background-color: #bbbbbb;}
– Contextual selector: descendant, child, adjacent/sibling selector, etc.
• Using space, comma, or plus (+) to indicate the relationship

11
CSS: Embedded Style Sheets

• CSS rules in a style


12
Linking External CSS File
(Recommended in this class)

13
CSS: Linking External Style Sheets

• External style
14
CSS: Linking External Style Sheets

• 15link element
CSS: Linking External Style Sheets

• Recommended:

<head>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
</head>

16
External CSS: Media Types

• CSS media types


17
External CSS: Media Types

• A block of styles
18
External CSS: Media Types

• 19Other media types in


Example
/* for comments in CSS */
css/main.css h1 {color: red;}

.special {font-weight: bold;}

p.special {color: blue;}

#welcome {font-size: 12pt;}

div#conclusion {
background-color: #bbbbbb;
text-style: italic;
}

p a{
text-decoration: none;
}

20
Software Engineering Observation

Always use an external style sheet when


developing a website with multiple pages.
External style sheets separate content
from presentation, allowing for more
consistent look-and-feel, more efficient
development, and better performance.

21
CSS STYLE PROPERTIES

22
Font Weight

• font-weight property
23
Text Decoration

• text-
24
Pseudoclasses

• Special effects:
25
Backgrounds

• background-color
26
Element Dimensions

• Dimensions of
27
Length measurement

• Relative length
28
measurements:
More CSS properties:

• More CSS properties can be found at:


– http://www.w3schools.com/cssref/default.asp

29
CSS VALIDATION

30
HTML and CSS Validation

• HTML validation
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
</a>

• CSS validation
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>

31
Resources

• W3 Schools HTML tutorial:


– http://www.w3schools.com/html/default.asp
• W3 Schools HTML reference:
– http://www.w3schools.com/tags/default.asp
• W3 Schools CSS tutorial:
– http://www.w3schools.com/css/default.asp
• W3 Schools CSS reference:
– http://www.w3schools.com/cssref/default.asp

32

You might also like