Most Popular Ice Cream Flavors

RankFlavor
1Vanilla
2Strawberry
3Chocolate
4Cookies and Cream
5Mint Chocolate Chip
Produces this page:"> I Scream For Ice Cream!

Most Popular Ice Cream Flavors

RankFlavor
1Vanilla
2Strawberry
3Chocolate
4Cookies and Cream
5Mint Chocolate Chip
Produces this page:">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

Cascading Style Sheets An Introduction

Published byVeronika Yuwono Modified over 6 years ago

Similar presentations

Presentation on theme: "Cascading Style Sheets An Introduction"— Presentation transcript:

1 Cascading Style Sheets An Introduction

2 This HTML: Produces this page: <!DOCTYPE html>
<html ><head><meta charset=utf-8" /><title>I Scream For Ice Cream!</title></head> <body> <h1>Most Popular Ice Cream Flavors</h1> <table><tr><th>Rank</th><th>Flavor</th></tr> <tr><td>1</td><td>Vanilla</td></tr> <tr><td>2</td><td>Strawberry</td></tr> <tr><td>3</td><td>Chocolate</td></tr> <tr><td>4</td><td>Cookies and Cream</td></tr> <tr><td>5</td><td>Mint Chocolate Chip</td></tr></table> </body> </html> Produces this page:

3 But the look of that page can be transformed
By adding this line: <link href="icecream.css" rel="stylesheet" type="text/css" />

4 (A CSS file tells a browser how to render HTML)
That one line of HTML: <link href="icecream.css" rel="stylesheet" type="text/css" /> Attaches a Cascading Style Sheet (CSS) to the HTML page. CSS (A CSS file tells a browser how to render HTML)

5 This is that CSS file: CSS body{
font-family: "Marker Felt","Comic Sans MS", fantasy; color:#003366; } h1 { font-size: 1.3em; text-align:center; table { margin-left:auto; margin-right:auto; text-align:left; border-collapse: collapse; cellspacing: 0 px; td { border: 1px solid #ffffff; background-color:#9FB6CD; th { color:#ffffff; background-color:#003366; This is that CSS file: CSS

6 The syntax of a Cascading Style Sheet is really quite simple:
text-align:center; color:#ffffff; background-color:#003366; }

7 The syntax of a Cascading Style Sheet is really quite simple:
1 The HTML tag (called the Selector) is assigned the styling that follows. th { text-align:center; color:#ffffff; background-color:#003366; }

8 The syntax of a Cascading Style Sheet is really quite simple:
text-align:center; color:#ffffff; background-color:#003366; } 2 An opening curly bracket starts the styling definition

9 The syntax of a Cascading Style Sheet is really quite simple:
text-align:center; color:#ffffff; background-color:#003366; } Pairs of Property:value; statements define the styling. 3 (end with a semicolon!)

10 The syntax of a Cascading Style Sheet is really quite simple:
text-align:center; color:#ffffff; background-color:#003366; } 4 A closing curly bracket ends the definition

11 This snippet of CSS script:
text-align:center; color:#ffffff; background-color:#003366; } • Defines the styling of a table header <th> • Causes all text within the header to be centered • Makes the background dark blue

12 CSS color information can be represented in different ways:
background-color:#D2691E (Hexadecimal) Or background-color:RGB(210,105,30); (Decimal RGB) background-color:chocolate; (One of 147 Named) RGB is the amount of red, green and blue.

13 You will become skilled in the use of Cascading Style Sheets if you:
1. Understand—or can reference-- what style properties a particular selector (i.e. tag) has. 2. Understand how each of those properties affects the page visually. 3. Understand the type and range of values that can be assigned to each property.

14 <th class=“warning”>
Tags of a given type can be distinguished from one another—or grouped—by using the global Class or ID attribute: <th class=“warning”> <th ID=“urgent”> All tags have Class and ID attributes available to them. You decide on the name.

15 In a CSS file, a dot is used to indicate class:
.warning { background-color:#ff0000; } Whereas a hash mark (#) indicates an ID: #urgent { background-color:#ff0000; }

16 Using the Class attribute can help turn this table:
Into this this table:

17 Simply by adding a class name to the HTML….
<!DOCTYPE html> <html ><head><meta charset=utf-8" /><title>I Scream For Ice Cream!</title></head> <body> <h1>Most Popular Ice Cream Flavors</h1> <table><tr><th>Rank</th><th>Flavor</th></tr> <tr><td>1</td><td class=“van”>Vanilla</td></tr> <tr><td>2</td><td class=“straw”> Strawberry</td></tr> <tr><td>3</td><td class=“choc”> Chocolate</td></tr> <tr><td>4</td><td class=“cc”> Cookies and Cream</td></tr> <tr><td>5</td><td class=“mint”> Mint Chocolate Chip</td></tr></table> </body> </html>

18 And adding styles to the CSS file…
.van { background-color:#ffffff; } .straw { background-color:#FFAEB9; color:#ff0000; .choc { background-color:#D2691E; .cc { background-image:url(images/cc.jpg); color:#0000ff; .mint { background-color:#9AFF9A;

Download ppt "Cascading Style Sheets An Introduction"

Similar presentations

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
Cascading Style Sheets (CSS). Cascading Style Sheets With the explosive growth of the World Wide Web, designers and programmers quickly explored and reached.

Cascading Style Sheets (CSS). Cascading Style Sheets With the explosive growth of the World Wide Web, designers and programmers quickly explored and reached.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Cascading Style Sheets

Cascading Style Sheets
/k/k 1212 Cascading Style Sheets Part one Marko Boon

/k/k 1212 Cascading Style Sheets Part one Marko Boon
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.

HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.

CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
Introducing CSS CIS 133 mashup Javascript, jQuery and XML 1.

Introducing CSS CIS 133 mashup Javascript, jQuery and XML 1.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science

End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science
กระบวนวิชา 25 3208 CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.

กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.

Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
Design, Formatting, CSS, & Colors September 9, 2010.

Design, Formatting, CSS, & Colors September 9, 2010.
CM143 Week 4 Introducing CSS. Cascading Style Sheets A definition for the style in which an element of the webpage will be displayed Border width, colour,

CM143 Week 4 Introducing CSS. Cascading Style Sheets A definition for the style in which an element of the webpage will be displayed Border width, colour,
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.

Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.

CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.

CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains.

Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains.
Designing Web Pages The case for CSS. The Power of CSS css Zen Garden

Designing Web Pages The case for CSS. The Power of CSS css Zen Garden
NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.

NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.

Similar presentations

Ads by Google