Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2016 Terry Ann Morris, Ed.D.

Slides:



Advertisements
Similar presentations
Table, List, Blocks, Inline Style
Advertisements

CSS-Formatting Review Cascading Style Sheets addstyle to your HTML web pages.
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.
Web Development & Design Foundations with XHTML Chapter 3 Key Concepts.
Cascading Style Sheets
CSS Cascading Style Sheets Cascading Style Sheets 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 Basics. Why use Cascading Style Sheets? Allows you to set up a series of rules for all pages in a site. The series may be changed.
1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.
Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.
กระบวนวิชา 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.
Web Development & Design Foundations with XHTML Chapter 3 Key Concepts.
XP Introducing Cascading Style Sheets With Cascading Style Sheets (CSS), you can create one or more documents that control the appearance of some or all.
Tutorial 3 Introducing Cascading Style Sheets. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Learn about Cascading Style Sheets Write.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
1 Web Developer Foundations: Using XHTML Chapter 9 Cascading Style Sheet Concepts.
Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
Today’s objectives  Presentational | Inline | Block | Validate  CSS | Rules | Declarations.
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
Bare bones notes. Suggested organization for main folder. REQUIRED organization for the 115 folder.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
Cascading Style Sheets
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
CSS Cascading Style Sheets. CSS Advantages Greater typography and page layout control Style is separate from structure Styles can be stored in a separate.
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
Jozef Goetz, © 2009 Pearson Education Copyright (c) 2007 Prentice-Hall. All rights reserved. expanded by J. Goetz, 2010.
XHTML Formatting font with a style declaration. Formatting Font HTML uses the font tag to change size and family of font But… the font tag is being deprecated.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
Cascading Style Sheets Part 1 1 IT 130 – Internet and the Web.
CONFIGURING COLOR AND TEXT WITH CSS Chapter 3. Cascading Style Sheets (CSS) Used to configure text, color, and page layout. Launched in 1996 Developed.
WEB FOUNDATIONS CSS Overview. Outline  What is CSS  What does it do  Where are styles stored  Why use them  What is the cascade effect  CSS Syntax.
CSS for Styling By Jinzhu Gao.
Web Development & Design Foundations with XHTML
CSS Cascading Style Sheets.
Style Sheets.
Cascading style sheets basics
4.01 Cascading Style Sheets
Web Development & Design Foundations with HTML5 8th Edition
Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.
Bare boned notes.
Web Development & Design Foundations with HTML5
Introduction to the Internet
Bare bones notes.
Madam Hazwani binti Rahmat
CX Introduction to Web Programming
Web Developer & Design Foundations with XHTML
Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.
Introduction to Web programming
Copyright (c) 2007 Prentice-Hall. All rights reserved.
Web Development & Design Foundations with HTML5
Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.
Introduction to Cascading Style Sheets (CSS)
Web Programming– UFCFB Lecture 11
What are Cascading Stylesheets (CSS)?
Cascading Style Sheets
Web Development & Design Foundations with H T M L 5
Web Development & Design Foundations with H T M L 5
Bare bones notes.
Tutorial 3 Working with Cascading Style Sheets
Made By : Lavish Chauhan & Abhay Verma
4.01 Cascading Style Sheets
CS332A Advanced HTML Programming
Presentation transcript:

Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2016 Terry Ann Morris, Ed.D

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

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, 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

Types of Cascading Style Sheets Inline Styles Embedded Styles External Styles Imported Styles

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 Similar to External Styles We’ll concentrate on the other three types of styles.

The “Cascade”

CSS Syntax Style sheets are composed of "Rules" that describe the styling to be applied. Each rule contains a Selector and a Declaration

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; }

CSS Syntax for Color Values Table 4.2  Syntax to configure a paragraph with red text CSS Syntax Color Type p { color: red } Color name p { color: #FF0000 } Hexadecimal color value p { color: #F00 } Shorthand hexadecimal (one character for each hexadecimal pair – only used with web safe colors) p { color: rgb(255,0,0) } Decimal color value (RGB triplet) p { color: rgba(255,0,0,0.5) } CSS3: Decimal color value (RGB triplet) followed by the alpha opacity (a value from 0 to 1). The CSS3 Color Module is in draft status and is not yet uniformly supported by browsers. p { color: hsl(0, 100%, 50%) } HSL color values. The CSS3 Color Module is in draft status and is not yet uniformly supported by browsers. See http://www.w3.org/TR/css3-color/#hsl-color

Inline CSS with the Style Attribute 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> <h1 style="color:#FF0000;background-color:#cccccc">This is displayed as a red heading with gray background</h1>

Configure Embedded CSS with the Style Element Configured in the head section of a web page. Use the HTML <style> element Apply to the entire web page document Style declarations are contained between the opening and closing <style> tags The optional type attribute indicates the MIME type of text/css Example: <style> body { background-color: #000000; color: #FFFFFF; } </style>

CSS Embedded Styles <style> body { background-color: #E6E6FA; color: #191970; } h1 { background-color: #191970; color: #E6E6FA; } h2 { background-color: #AEAED4; </style> The body selector sets the global style rules for the entire page. These global rules are overridden for <h1> and <h2> elements by the h1 and h2 style rules.

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

External Style Sheets - 2 Multiple web pages can associate with the same external style sheet file. index.html site.css clients.html body { background-color: #E6E6FA; color: #000000; } h2 { color: #003366; } about.html etc…

The <link> Element 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">

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">

Common Types of Selectors: CSS Selectors Common Types of Selectors: HTML element name selector class selector id selector descendant selector

Using CSS with “class” class Selector Configure with .classname Apply a CSS rule to ONE OR MORE elements on a web page Does not associate the style to a particular HTML element Configure with .classname The sample creates a class called “new” with red italic text. To use the class, code the following HTML: <p class="new">This text is red</p> <style> .new { color: #FF0000; } </style> This text is red.

Using a CSS id Selector id Selector <style> Apply a CSS rule to ONLY ONE element on a web page. Configure with #idname The sample creates an id called “new” with red, large, italic text. To use the id, code the following HTML: <p id="new">This text is red.</p> <style> #new { color: #FF0000; } </style> This text is red.

Using a CSS Descendant Selector Apply a CSS rule within the context of the container (parent) element. Sometimes called a 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 located within the footer element. <style> footer p {color: #00ff00; } </style>

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.

<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>

W3C CSS Validation http://jigsaw.w3.org/css-validator

CSS Troubleshooting Tips Verify you are using the : and ; symbols in the right spots—they are easy to confuse. Check that you are not using = signs instead of : between each property and its value. Verify that the { and } symbols are properly placed Check the syntax of your selectors, their properties, and property values for correct usage. If part of your CSS works, and part doesn’t: Review your CSS Determine the first rule that is not applied. Often the error is in the rule above the rule that is not applied. Validate your CSS at http://jigsaw.w3.org/css-validator

Summary This chapter introduced you to Cascading Style Sheet Rules associated with color on web pages. You configured inline styles, embedded styles, and external styles. You applied CSS style rules to HTML, class, and id selectors. You are able to submit your CSS to the W3C CSS Validation test.