Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.

Slides:



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

Cascading Style Sheets
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.
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
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.
Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:
Introducing Cascading Style Sheets  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles  Text Formatting with CSS.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic CSS: Cascading Style Sheets.
Cascading Style Sheets Scripting with Style. CSS versus HTML  Ways to format in HTML –HTML Tag extensions –Converting Text to images –Page Layout with.
SM5312 week 6: basic CSS syntax1 An Introduction to Cascading Style Sheets Basic CSS Syntax Nick Foxall.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.
Cascading Style Sheet (CSS) Instructor: Dr. Fang (Daisy) Tang
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
 Missing (or duplicate) semicolons can make the browser completely ignore the style rule.  You may add extra spaces between the properties/values to.
Principles of Web Design 6 th Edition Chapter 4 – Cascading Style Sheets.
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.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
Review: Three parts to a webpage: - Content - Structure  XHTML - Presentation  CSS In this chapter we will focus on introducing and examining the mechanics.
Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
Week 4.  Three ways to apply CSS: Inline CSS Internal style sheets ( header style information) External style sheets.
Today’s objectives  Complete web page  Using xhtml & CSS  Adding CSS to documents Embed url(File);  CSS.
Cascading Style Sheets CSS. CSS Positioning Normal Flow Top -> bottom | left -> right Arranged in the order they appear in the code make room for one.
Cascading Style Sheets CSS. div … Used like a container to group content Gives context to the elements in the grouping Give it a descriptive name with.
Cascading Style Sheets. Defines the presentation of one or more web pages Similar to a template Can control the appearance of an entire web site giving.
CSS – Presentation of Information. Types of Style Sheets External Embedded h1{color:red; font-family: Arial;} Inline Text is here.
I NTRO TO CSS IAT100 Spring I NTRO TO CSS Covered in this lesson: Overview What is CSS? Why to use CSS? CSS for Skinning your Website Structure.
Part 1: CSS - Why? - How it works - Writing rules - Examples.
Cascading Style Sheets CSS by Pavlovic Nenad by. 2Cascading Style Sheets Presentation Contents What are CSS? What are CSS? History of CSS History of CSS.
Today’s objectives  Review  CSS | Rules | Declarations  HTML Structure document  Class asignment.
Css. Definition Cascading style sheet (CSS) Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
Cascading Style Sheets Orientation Learning Web Design: Chapter 11.
CO1552 – Web Application Development Cascading Style Sheets.
The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 7.
Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,
CSS Cascading Style Sheets. CSS Advantages Greater typography and page layout control Style is separate from structure Styles can be stored in a separate.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.
Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
HTML - Quiz #2 Attendance CODE:
HTML – Organizing Page Content. HTML Images img tag Required attribute: src
Chapter 6 Introducing Cascading Style Sheets Principles of Web Design, 4 th Edition.
Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes.
HTML – Organizing Page Content. HTML Images img tag Required attribute: src
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1.
Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April 2013.
Cascading Style Sheets Level 2. Course Objectives, Session 1 Level 1 Quick Review Chapter 8: Adding Graphics to Web Pages Chapter 9: Sprucing Up Your.
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
Cascading Style Sheets (CSS). A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such.
XP Review 2 New Perspectives on JavaScript, Comprehensive1 Introducing Cascading Style Sheets Formatting Web Pages with CSS.
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 Hadas Kahsay. Overview  What is CSS  Basic syntax of CSS Rules  How to link CSS style to html documents  Browsers and CSS  Advantages of CSS.
Cascading Style Sheets Primary readings Presentations Explain & review projects with class mates.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
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.
Chapter 11 & 12 CSS Style Sheets: Intro. Why CSS? Separate presentation from content – more accessible Less work – can change appearance of whole site.
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 Robin Burke ECT 270. Outline CSS properties Fonts Alignment Color CSS selection selectors.
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 Developer & Design Foundations with XHTML
Cascading Style Sheets
Presentation transcript:

Cascading Style Sheets CSS

 Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3 (in development)  CSS2  Well supported by most modern browsers

CSS Allows you to separate the structure of a page from the presentation Presentation = displayed/delivered Presentation and formatting of content is defined by the CSS rules Structure & meaning is handled by XHTML Before CSS, if you wanted all of your text to be blue, you might assign a blue value to all of the color tags one-by- one in the XHTML.

CSS - Benefits  Offers more control  Type: control line spacing, and type size; Rollovers: create rollover effects that don’t require images and javascript; Layout: you can layout entire pages  Less work: one css file can style an entire site (100s of pages)  Smaller files / faster downloads (no redundant styling tags & nested tables)  More accessible (meaningful content)  Improved browser support

CSS Structural Layer - Meaningful markup (XHTML) accurately describe the meaning of content with XHTML tags Presentation Layer - CSS Style Rules describing how an element should look (selectors & declarations) Attach them: Structural Layer + Presentation Layer External, Embedded, Inline

CSS - Rule Structure Separate language with its own syntax 2 Parts Selector: Selects the element to be affected Declaration: “declares” a style for an selected element Declaration block: property & value

CSS - Structure Declaration block Property: identifies what to change Value: how to change it Selector – example h1{ font-size: small; font-family: Georgia, ‘Times New Roman’, Times, serif; color: #CC3300; margin-top: 4em; margin-bottom: 10em; }

Types of Style Sheets External (linked) Most powerful A single style sheet can format hundreds of pages (linked to each page) To make changes – update the external style sheet all page that are linked to it are updated.

Types of Style Sheets External Not part of the XHTML document Saved in a separate.css file You create a link from your XHTML document to the.css file

Types of Style Sheets Embedded Embedded into the XHTML document (an internal part of the XHTML) All code placed inside the tag Affects only the one page its embedded in <!-- h1{color:red; font-family: Arial;} -->

Types of Style Sheets Inline Used when you need to override some other style defined in an embedded or external style sheet Part of the XHTML document Less powerful Usually used only to override other styles or when you have an exception to a rule

Types of Style Sheets Inline Part of the XHTML document Written as an attribute of the tag Text is here.

CSS - The Cascade Inheritance (parents, children, ancestors, siblings) All XHTML elements are contained within one another Children inherit properties from a parent (Ex: if font-family: “helvetica” is applied to the tag, all children (,,, etc) will be helvetica as well.

CSS - The Cascade Cascade System of hierarchy that determines which rules will be followed when several sources of style info is assigned to the same elements Style Sheet Hierarchy (the closer the style is to the content the more weight it is given) Browser default User Settings (reader style sheets) External Style Sheets (linked, then imported) Embedded Style Sheets Inline Style Sheets Author !important Reader !important

CSS - The Cascade Cascade System of hierarchy that determines which rules will be followed when several sources of style info is assigned to the same elements Style Sheet Hierarchy (the closer the style is to the content the more weight it is given) Browser default User Settings (reader style sheets) External Style Sheets (linked, then imported) Embedded Style Sheets Inline Style Sheets Author !important Reader !important

Meaningful Markup …

Generic Elements … Generic block-level element … Generic inline element Name them using id or class

div … Used like a container to group content Gives context to the elements in the grouping Give it a descriptive name with id or class Ex: can be used to group an with to show they are conceptually related Ex: can be used to group a section of content for context, structure or layout purposes.

span … Generic inline element Used to add meaning to content Ex: Andy: Joe:

Element identifiers - id Id identifier Used to identify a piece of data Unique element in the document Value of id must be used only once in a document (masthead & navigation here) (main content elements here) (list of links here) (news sidebar items here) (copyright info, etc)

Element identifiers - class class identifier Used to group similar elements Multiple elements may share a class name The Complete Manual of Typography, James Felici A combination of type history and examples of good and bad type. A combination of type history and examples of good and bad type.

Type Selectors Used to redefine a specific XHTML tag body, td, th{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 2em; color: #33CCFF; }

Descendant Selectors Targets elements that are contained within another element Ex: li em { color: silver; } targets emphasized text only when it appears in a list item (li) Ex: ol a em { font-varient: small-caps; }

ID Selectors Targets elements by their id value Used to style a specific element in a site or group of pages #divSidebar{ margin-left: 10 px; text-align: center; } In your XHTML document you’d need the following: This is the sidebar area of the page. Ex: In the xhtml file: Item #1 in list In the.css - #nameofstyle {color:red;}

Class Selectors Used to “classify” elements into a conceptual group Multiple elements can share a class name Used to specify a custom selector name and apply that style to an XHTML element Ex: In your.css file:.smallprint {font-size: 10px;} In your XHTML document: This is small text.

Hierarchy of Selectors Most to least specific ID Selectors Class Selectors Contextual Selectors Individual Element Selectors (type selectors)

Pseudo-Class Selectors Used to describe the state of an element. Assigns a style that happens when an object is a certain state A:hover{ text-decoration:none; color: #33CC33

Pseudo-Class Selectors Common Pseudo-Classes :link- A style applied to an element that has not yet been visited :visited – A style applied to an element that has been visited :hover – A style applied to an element when a mouse hovers over it (link) :active – A style applied to an element when the user clicks or activates the element

Resources  Niederst, J. (2007). Learning Web Design. O'Reilly Meida, Inc.Chapter 11: Cascading Style Sheets Orientation  Andrew, R. (2007). CSS Anthology. Sitepoint  Meyer, E. (2006). CSS Web Site Design. Peachpit Press  Eric Meyer:

Let’s see how this works…