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.

Slides:

Advertisements

Similar presentations

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.

Advertisements

CSS-Formatting Review Cascading Style Sheets addstyle to your HTML web pages.

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

Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.

Cascading Style Sheets

CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.

/k/k 1212 Cascading Style Sheets Part one Marko Boon

Cascading Style Sheets: Basics I450 Technology Seminar Copyright 2003, Matt Hottell.

Cascading Style Sheets (CSS) “Styles” for short. Pg. 418.

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.

CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.

Introduction to CSS.

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.

กระบวนวิชา 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.

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.

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

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

Cascading Style Sheets Controlling the Display Of Web Content.

1 Creating Web Pages Part 3. 2 CASCADING STYLE SHEETS (CSS): What exactly are they? Set of rules that define how a web browser should display an HTML.

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,

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

Basics of HTML.

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

STYLING THE WEBSITE - EXTERNAL CSS BY JORGE MARTINEZ.

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

The Characteristics of CSS

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.

 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.

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.

CO1552 – Web Application Development Cascading Style Sheets.

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)

WRT235: Writing in Electronic Environments Basic CSS.

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

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

Slide 1 CMPS 211 Internet Programming Spring 2008 Style Sheet Building Blocks Chapter 7 & 8 4/8/08.

DIV, Span, CSS.

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.

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.

Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.

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.

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.

1 Introduction to HTML. 2 Definitions  W W W – World Wide Web.  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web.

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

4.01 Cascading Style Sheets

>> Introduction to CSS

INTRODUCTION TO HTML AND CSS

Madam Hazwani binti Rahmat

Intro to CSS CS 1150 Fall 2016.

Website Design 3

Cascading Style Sheets - Building a stylesheet

Introduction to CSS.

Intro to CSS CS 1150 Spring 2017.

Intro to CSS Mr. Singh.

Introduction to Cascading Style Sheets (CSS)

INTRODUCTION TO HTML AND CSS

Web Design and Development

Web Design & Development

Cascading Style Sheets - Building a stylesheet

Stylin’ with CSS.

4.01 Cascading Style Sheets

Stylin’ with CSS.

Presentation transcript:

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 one or more rules that determine – through properties and values – how the elements on your Web page should be displayed.

Page Design ICSS 3Instructor: Sean Griffin What Can They Control? Font size, color, kerning, leading, alignment Size & position of layers Border size, color & style (e.g., dotted / dashed) Page breaks for printing Background images List formatting and much, much more!

Page Design ICSS 4Instructor: Sean Griffin What Browswers Support Them? Most browsers support CSS 2 – a guideline from our friends at the W3C. No browser fully supports all of CSS 2.

Page Design ICSS 5Instructor: Sean Griffin Anatomy of a CSS Rule Each style rule in a style sheet has two main parts: –Selectors: determines which elements are affected (Example: the tag) –Declarations: consists of one or more property/value pairs. Declarations are enclosed within curly brackets. (Example: {color:green})

Page Design ICSS 6Instructor: Sean Griffin Embedded Styles Embedded styles are placed within the head tag and contain all of the following: – element: this is a container for CSS rules –The type attribute: refers to MIME type which tells the browser which style sheet syntax to use. –CSS rule: the select and declaration

Page Design ICSS 7Instructor: Sean Griffin Example 1 Changes all tags to green.

Page Design ICSS 8Instructor: Sean Griffin Example 2 Changes all tags to green and their backgrounds to red.

Page Design ICSS 9Instructor: Sean Griffin Example 3 Changes all tags so they have a solid red 4 pixel border.

Page Design ICSS 10Instructor: Sean Griffin Example 4 Changes all tag text to blue.

Page Design ICSS 11Instructor: Sean Griffin Example 5 Changes the page background to an image.

Page Design ICSS 12Instructor: Sean Griffin Example 6 Changes all paragraphs to green text.

Page Design ICSS 13Instructor: Sean Griffin Example 7 Changes all tags to red and all paragraphs to green text.

Page Design ICSS 14Instructor: Sean Griffin Example 8 Changes all body text to blue, all tags to red and images will have a orange 4 pixel dashed border.

Page Design ICSS 15Instructor: Sean Griffin Example 9 Changes the body to a green background, all body text to blue, all tags to red and images will have a orange 4 pixel dashed border.

Page Design ICSS 16Instructor: Sean Griffin Example 10 Changes all paragraphs to 12pt blue Verdana text.