Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.

Slides:



Advertisements
Similar presentations
Introduction to HTML & CSS
Advertisements

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
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.
Part 2 Introduction to CSS. CSS Syntax – class selector 1 With the class selector you can define different styles for the same type of HTML element. You.
Making Things Look Nice: Visual Appearance and CSS CMPT 281.
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
Chapter 3 Working with Text and Cascading Style Sheets.
Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:
Cascading Style Sheets. Slide 2 Lecture Overview Overview of Cascading Style Sheets (CSS) Ways to declare a CSS CSS formatting capabilities New features.
4.01 Cascading Style Sheets
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,
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
 Missing (or duplicate) semicolons can make the browser completely ignore the style rule.  You may add extra spaces between the properties/values to.
© 2012 Adobe Systems Incorporated. All Rights Reserved. LEARNING THE LANGUAGE OF THE WEB INTRODUCTION TO HTML AND CSS.
© 2010 Delmar, Cengage Learning Chapter 7 Using Styles and Style Sheets for Design.
Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
Cascading Style Sheets Part 1 Library and Information Services, University of St Andrews.
Chapter 3 Working with Text and Cascading Style Sheets.
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.
Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2.
CSS Cascading Style Sheets By Garrett Garman. CSS Why use Style Sheets? Separates Appearance and Structure Modularity Quick and Easy changes Flexibility.
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
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.
1 WDMD 170 – UW Stevens Point WDMD 170 Internet Languages eLesson: CSS Introduction to Style Sheets (NON-audio version) © Dr. David C. Gibbs
1 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles are normally stored in Style Sheets  Styles.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
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.
Doing It With Style Style Sheets: Separating Form from Function.
Working with Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 5.
CSS CSS is short for C ascading S tyle S heets. It is a new web page layout method that has been added to HTML to give web developers more control over.
Form Tag How to use Form Tag Something NEW ? PARAMETER Attribute NAME Specifies the name for a form To specify which form to submit with JavaScript, this.
IS 360 Declaring CSS Styles. Slide 2 Introduction Learn about the three ways to declare a style Inline / embedded / external Learn about the effect of.
Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
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 – Organizing Page Content. HTML Images img tag Required attribute: src
HTML – Organizing Page Content. HTML Images img tag Required attribute: src
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.
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
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. Source W3Schools
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.
Cascading Style Sheets
Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.
Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
Microsoft Expression Web 3 – Illustrated Unit D: Structuring and Styling Text.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
How to… Cascading Style Sheets. How to Insert a Style Sheet When a browser reads a style sheet, it will format the document according to it. There are.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
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.
CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, we’ll cover:  Brief CSS review  Creating sections with the tag  Creating inline.
CM143- WEB CM143-WEB Page Layout live sites HTML Images User Considerations Planning Navigation CSS Architecture File Management Cascading Style Sheets.
Cascading Style Sheets Using HTML. What are they? A set of style rules that tell the web browser how to present a web page or document. In earlier versions.
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.
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.
IS 360 Declaring CSS Styles
Website Design 3
Introduction to Cascading Style Sheets (CSS)
What are Cascading Stylesheets (CSS)?
Web Design and Development
Presentation transcript:

Cascading Style Sheets Dreamweaver

Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more control Gives designers much more control –Over the look of the page –With page layout

Style Sheet List of Rules List of Rules –Each Rule has a Selector and a Definition –Each Rule can have one or more Definitions –Each Definition can be applied to one or more selector

Syntax of Style Rules Syntax: Syntax: –Selector { definition;} Selector { attribute: value;} Selector { attribute: value;} h1 { font-size: 130%; }

Style Rules h1,h2,h3,h4 { color: #ff3300; font-family: Arial; } h1,h2,h3,h4 { color: #ff3300; font-family: Arial; } h1{ font-size: 160%; } h1{ font-size: 160%; }

Three Kinds of Styles Inline Inline Internal (Embedded) Internal (Embedded) External (Linked) External (Linked)

Inline Very similar to regular HTML styles Very similar to regular HTML styles Applied to each individual instance Applied to each individual instance content</style> Must be hand coded in Dreamweaver except with layers for positioning. Must be hand coded in Dreamweaver except with layers for positioning.

Internal Placed in the of your document Placed in the of your document Rules are wrapped in style tags Rules are wrapped in style tags Styles are wrapped in comment markers Styles are wrapped in comment markers <!– H1 { font-size: 16px; } --> </style>

External Totally separate from the HTML Document Totally separate from the HTML Document Can be linked or imported Can be linked or imported Referenced in the section Referenced in the “styles.css” Can be used by many web pages Can be used by many web pages

Cascading Order Browser default Browser default External style sheet External style sheet Internal style sheet (inside the tag) Internal style sheet (inside the tag) Inline style (inside an HTML element) Inline style (inside an HTML element)

Methods Redefine HTML tags Redefine HTML tags Create a new.Class Create a new.Class Advanced Selectors Advanced Selectors –Multiple tags –#ID’s

Redefine HTML Use any HTML tag Use any HTML tag Override Browser defaults Override Browser defaults Make the HTML item look the way you want Make the HTML item look the way you want Make all of the same tags look alike Make all of the same tags look alike

.Class Created as needed Created as needed You decide the name You decide the name You decide the rules You decide the rules Can be applied to sections of a page Can be applied to sections of a page Can be used multiple times on a page Can be used multiple times on a page

#ID’s Similar to a class Similar to a class You create the name You create the name You decide the rules You decide the rules Can only be used once per page Can only be used once per page Layers use ID selectors Layers use ID selectors

Compound Selectors HTML tags and/or other selectors can be combined to target specific areas HTML tags and/or other selectors can be combined to target specific areas Allows different look of the same tags in different areas of the page Allows different look of the same tags in different areas of the page

Layout Use tags for inline elements Use tags for inline elements –No break created Like a wrapper for an element or section of text. Like a wrapper for an element or section of text. Use tags for block elements Use tags for block elements –Create whitespace like a paragraph –Pulls content out of the page flow