Cascading Style SHEETS for formatting and layout control CSS HTML HTML HTML HTML HTML.

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

Computer Applications II.  A Style Sheet is a web page development tool that allows the developer to make global changes to a web page (or web site)

Today CSS HTML A project.

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.

Introduction to CSS. What is CSS? A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. Use your (X)HTML.

CSS. CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.

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 Understanding styles. The term cascading describe the capability of a local style to override a general style. CSS applies style.

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.

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.

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

CSS Pertemuan 12 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.

4.01 Cascading Style Sheets

CSSMR.Mostafa badr1. Lesson 3 Creating an Style Sheet Lesson 2 Structure of the Style Lesson 1: What Cascading Style Sheets are?

Working with Text and Cascading Style Sheets Adobe Dreamweaver Chapter 3.

Basics of HTML.

STYLING THE WEBSITE - EXTERNAL CSS BY JORGE MARTINEZ.

CSS Style Rules Guang Tong, Zhan L;lo’p[ Css Style Rule Guang Tong Zhan Three ways to insert CSS 1 External style sheet 2 Internal style sheet 3 Inline.

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

1 WDMD 170 – UW Stevens Point WDMD 170 Internet Languages eLesson: CSS Introduction to Style Sheets (NON-audio version) © Dr. David C. Gibbs

Introduction To CSS.. HTML Review What is HTML used for? Give some examples of formatting tags in HTML? HTML is the most widely used language on the Web.

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

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.

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

CO1552 – Web Application Development Cascading Style Sheets.

INTRODUCTION TO CSS. OBJECTIVES: D EFINE WHAT CSS IS. K NOW THE HISTORY OF CSS. K NOW THE REASON WHY CSS IS USED. CSS SYNTAX. CSS ID AND CLASS.

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.

CSS Basic (cascading style sheets)

Cascading Style Sheets. What is CSS? Short for Cascading Style Sheets, a new feature being added to HTML that gives more control over how pages are displayed.

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.

The Teacher HTML HTML (3) Cascading Style Sheets.

© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.

Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,

CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.

Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

Definition CSS “Short for Cascading Style Sheets, a new feature being added to HTML that gives both Web site developers and users more control over how.

© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.

HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.

Cascading Style Sheets Creating a Uniform Site. Style Sheets  Style sheets are used for conformity on a web page or web site.  Style sheets eliminate.

Cascading Style Sheets

CSS Cascading Style Sheets. Cascading Style Sheet (CSS) A cascading style sheet (CSS) is a set of rules that define styles to be applied to entire Web.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 8: Working with Style Sheets.

Cascading Style Sheets Objective: Create an external style sheet, embedded style sheet, and an inline style to change the look and feel of a web site.

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.

DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.

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 August 25-26, What is CSS? a means for web authors to separate the appearance of web pages from the content of web pages.

 Look especially at › File Tips and Shortcuts › Student video.

Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.

External Style Sheets Exploring Computer Science – Lesson 3-6.

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.

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.

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.

HTML5 and CSS3 Illustrated Unit C: Getting Started with CSS.

Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.

1 Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size, font color etc…

CASCADING STYLE SHEET CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem.

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 Basics: HTML/CSS/JavaScript What are they?

Getting Started with CSS

>> Introduction to CSS

Website Design 3

CS134 Web Design & Development

Working with Text and Cascading Style Sheets

Web Design & Development

One Set of Styles Connected to As Many Pages as You Want!!!

Presentation transcript:

Cascading Style SHEETS for formatting and layout control CSS HTML HTML HTML HTML HTML

Why Use CSS? Consistency and standardization (W3C)W3C Additional and consistent control to look and layout of all web pages in a site SAVES TIME!!!Changes can be made to multiple pages through a single external source – SAVES TIME!!! Allows for more structurally sound code CSS HTML HTML HTML HTML HTML

Vocabulary Equivalents CSS HTML SelectorsSelectors DeclarationsDeclarations –Properties –Values SyntaxSyntax –{Curly Braces} –Colons : –No quotes –Semi-colons ; Elements/TagsElements/Tags DefinitionsDefinitions –Attributes –Values SyntaxSyntax – –Equal signs = –Quotes “ ” –Spaces

HTML Code CSS Code body {font-size: medium; font-family: verdana} Located in AREA WITHIN TAG Located in area within tag LINKED to outside CSS file in area in area within tag

Locations for CSS linkheadWithin a separate Notepad file with a.css extension then linked with a tag in the section of an HTML page headstyleWithin the area within a tag Embedded within a line of HTML code as a “style” attribute with declarations listed in one set of quotes

In Notepad, linked to HTML page <html><head> CSS Sample CSS Sample </head>

In the section <html><head> CSS Sample CSS Sample </head> Takes precedence over External CSS

Embedded in HTML code <html><head> CSS Sample CSS Sample </head><body> Sample text Sample text Takes precedence over External CSS AND CSS embedded in the section

CSS Online RESOURCES Creating Order from Chaos Creating Order from Chaos Webmonkey - CSS Resource Pages de/Webmonkey - CSS Resource Pages de/ de/ de/ Cascading Style Sheets Style Sheets The CSShark Answers FAQs The CSS Know-How Site CSShark Answers FAQs The CSS Know-How Site W3Schools CSS Samples CSS Samples

Read the introduction at WebMonkey nkey/reference/stylesheet_guide/ Yes…RIGHT NOW!!!

Go to the class agenda for today Click on the link within the item CSS Practice CSS Practice Read it NOW… …START it TODAY!!!

SAMPLE CSS