OV 3 - 1 Copyright © 2008 Element K Content LLC. All rights reserved.  Format Text  Format Lists  Format Images  Modify Page Background Applying Styles.

Slides:

Advertisements

Similar presentations

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.

Advertisements

Tutorial 3 Introducing Cascading Style Sheets. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Learn about Cascading Style Sheets Write.

Web Development & Design Foundations with HTML5

Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.

Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:

Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.

Controlling Page Style: Cascading Style Sheets (CSS) References: 1.Wang, P.S & Katila, S. (2004). A Introduction to Web Design and Programming. CA: Thomson.

Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.

More HTML Chapter 4. 2 Nesting Tags How do you write the following in HTML? The wrong way: This is really, REALLY fun ! Tags must be correctly nested.

W EB S ITE L ECTURE C ASCADING S TYLE S HEETS. Cascading Style Sheets (CSS) Introduction CSS Objectives – Provide more control over web site content presentation.

Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.

HIGHER COMPUTING CSS. WHAT IS CSS? CSS: Cascaded Style Sheets used to separate a web site’s content(information) from its style(how it looks).

TECH2018 Multimedia and the Internet More about CSS and Page Layouts.

© 2012 Adobe Systems Incorporated. All Rights Reserved. LEARNING THE LANGUAGE OF THE WEB INTRODUCTION TO HTML AND CSS.

Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.

HTML - Quiz #2 Attendance CODE:

Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2.

INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 09: Cascade Style Sheets - Spring 2011.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.

CSS Cascading Style Sheets By Garrett Garman. CSS Why use Style Sheets? Separates Appearance and Structure Modularity Quick and Easy changes Flexibility.

Tutorial #3 Cascading Style Sheets. Review: Last Class Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission.

Today’s objectives  Complete web page  Using xhtml & CSS  Adding CSS to documents Embed url(File);  CSS.

Today’s objectives  Presentational | Inline | Block | Validate  CSS | Rules | Declarations.

Chapter 12 Cascading Style Sheets: Part II The Web Warrior Guide to Web Design Technologies.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.

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.

(CSS) More Details Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.

HTML, Third Edition--Illustrated Introductory 1 HTML, Third Edition Illustrated Introductory Unit E Formatting with Cascading Style Sheets.

Using Cascading Style Sheet As you create more web pages, you may wish to impose a consistent look for all of your web pages or for group of related pages.

CSS My favourite ICT lesson By Federico Boschi Cascading Style Sheets.

Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.

XHTML/CSS Week 3. This Week  Quiz to revise last week (XHTML and DW)  CSS - Part 2  Using HTML Tables.

Working with Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 5.

CO1552 – Web Application Development Cascading Style Sheets.

Tutorial 5 Formatting with CSS. Objectives Session 5.1 – Evaluate why CSS styles are used – Determine where to write styles – Create an element selector.

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.

Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To me Local.

Cascading Style Sheets (css) HTML and css 2012 Brian Davison.

Introduction to CSS. What is CSS?  Cascading Style Sheets  Used for styling HTML  Also important in javascript and jquery for selectors  External.

Cascading Style Sheets Class 2, Lecture 2 Rachel A Ober

The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1.

ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS  Quiz  Announcements/questions/etc  Some functional HTML elements.

Introduction to Programming the WWW I CMSC Winter 2003 Lecture 7.

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.

Stylin’ with CSS Monday October 8 th and Tuesday October 9 th.

CSS Cascading Style Sheets. CSS Advantages Greater typography and page layout control Style is separate from structure Styles can be stored in a separate.

Files you will need ... Black Goose Bistro Summer Menu

Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes.

CCT260H - Christopher Evan Jones 1 CCT260H Styles and Colours.

Lesson 15: Cascading Style Sheets. Objectives Identify ways to apply Web page formatting with Cascading Style Sheets (CSS1 and CSS2) using various methods.

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.

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.

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.

Style Sheets. Coding Style Sheets  Style sheets use RULES to create the style  A selector (a tag or user-defined style name)  and then declarations.

CSS Cascading Style Sheets *referenced from

OV Copyright © 2008 Element K Content LLC. All rights reserved. Working with Web Pages  An Introduction to Cascading Style Sheets  Format a Web.

Creating Layouts with CSS. Span tag Here is some underlined text. Here is some blinking text. Here's some bold text.

JavaScript and Ajax (JavaScript Dynamic HTML (DHTML)) Week 7 Web site:

Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.

Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.

CSS Cascading Style Sheets. Session Checklist ► Learn why style sheets are needed and their advantages and disadvantages ► Learn the format of a style.

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.

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents Dr. Irwan Sembiring,ST.,M.Kom.

>> Introduction to CSS

Web Design and Development

Presentation transcript:

OV Copyright © 2008 Element K Content LLC. All rights reserved.  Format Text  Format Lists  Format Images  Modify Page Background Applying Styles Using CSS

OV Copyright © 2008 Element K Content LLC. All rights reserved. Styles Styles define the font and color of the text Background color applied using styles Image positioned at the right using styles

OV Copyright © 2008 Element K Content LLC. All rights reserved. Cascading Style Sheets body { background-color: #cccccc; font-size: 12px; } h1 { color: navy; } p { color: #cccccc; } Set of Rules

OV Copyright © 2008 Element K Content LLC. All rights reserved. Selectors and Properties p { font-size: 10 pt } Selector Declaration Property Value

OV Copyright © 2008 Element K Content LLC. All rights reserved. Classes While we take care to ensure the accuracy and quality of this Web site, we cannot guarantee the accuracy of the information presented herein. XHTML Element Class

OV Copyright © 2008 Element K Content LLC. All rights reserved. Class Selectors p.disclaimer { font-family: Times, serif; font-size: 6px; font-style: italic; }.warning { color: red; font-weight: bold; } Class Selector Independent Class Selector Declaration XHTML Tag

OV Copyright © 2008 Element K Content LLC. All rights reserved. ID Selectors p#logo { font-family: arial,verdana,sans-serif; color: #800000; font-size: 13px; } ID Selector Declaration XHTML Tag ID (Unique Identifier)

OV Copyright © 2008 Element K Content LLC. All rights reserved. Foreground and Background Colors Foreground Color Background Color

OV Copyright © 2008 Element K Content LLC. All rights reserved. Background Images Background Image

OV Copyright © 2008 Element K Content LLC. All rights reserved. Reflective Questions 1. What are the styles that you would apply to improve the visual appeal of your company website? 2. Which selector and style sheet types do you think you'll use most often, and why?