How Style Sheets Work

50 %
50 %
Information about How Style Sheets Work
Technology

Published on November 12, 2009

Author: mfcarer2

Source: slideshare.net

Description

This is a presentation that I put together to introduce style sheets to my website design class.

Cascading Style Sheets Orientation

Benefits Better type and layout control. Less work Smaller documents More accessible sites

Better type and layout control.

Less work

Smaller documents

More accessible sites

How Style Sheets Work Start with an XHTML document Write rules for how you want the document to look Attach the rules to the XHTML document

Start with an XHTML document

Write rules for how you want the document to look

Attach the rules to the XHTML document

Writing the Rules selector {declaration: value;} selector { declaration1: value; declaration2: value; declaration3: value; }

selector {declaration: value;}

selector { declaration1: value; declaration2: value; declaration3: value; }

Example Selector & Declaration p { font-size: small; font-family: sans-serif; }

p { font-size: small; font-family: sans-serif; }

Providing Measurement Values {margin: 2em}; {margin: 2 em}; Incorrect!

{margin: 2em};

{margin: 2 em}; Incorrect!

Attaching Style Sheets External Style Sheets Embedded Style Sheets Inline Style Sheets

External Style Sheets

Embedded Style Sheets

Inline Style Sheets

Attaching Style Sheets External Style Sheets - placed between the <head> tags. <LINK REL=StyleSheet HREF=”mystyle.css&quot; TYPE=&quot;text/css&quot; MEDIA=screen> Embedded Style Sheets Inline Style Sheets

External Style Sheets - placed between the <head> tags. <LINK REL=StyleSheet HREF=”mystyle.css&quot; TYPE=&quot;text/css&quot; MEDIA=screen>

Embedded Style Sheets

Inline Style Sheets

Attaching Style Sheets External Style Sheets Embedded Style Sheets - placed between the <head> tags. <style type=”text/css”> /* style rules go here */ </style> Inline Style Sheets

External Style Sheets

Embedded Style Sheets - placed between the <head> tags. <style type=”text/css”> /* style rules go here */ </style>

Inline Style Sheets

Attaching Style Sheets External Style Sheets Embedded Style Sheets Inline Style Sheets - Placed within the tags themselves (Use only when absolutely necessary) <h1 style=”color: red”>Introduction</h1>

External Style Sheets

Embedded Style Sheets

Inline Style Sheets - Placed within the tags themselves (Use only when absolutely necessary) <h1 style=”color: red”>Introduction</h1>

Inheritance XHTML elements pass down certain properties to the elements they contain. Original text uses the browser’s default styling. Ex: “Look at the stars!” p {font-size: small; font-family:sans-serif;} “Look at the stars!”

XHTML elements pass down certain properties to the elements they contain.

Original text uses the browser’s default styling. Ex: “Look at the stars!” p {font-size: small; font-family:sans-serif;} “Look at the stars!”

Parents & Children All of the h1, h2, p, em, and img elements are descendants of the body element. They are the children of the body parent element.

All of the h1, h2, p, em, and img elements are descendants of the body element.

They are the children of the body parent element.

Style Sheet Hierarchy Browser Default Settings User Style Setting set in a Browser Linked external style sheet Embedded Style Sheets Inline Style Sheets

Browser Default Settings

User Style Setting set in a Browser

Linked external style sheet

Embedded Style Sheets

Inline Style Sheets

Box Model Every element on the page is considered as being contained in a rectangular box.

Every element on the page is considered as being contained in a rectangular box.

Selectors can be grouped h1, h2, p, em, img {border: 1px solid red;}

h1, h2, p, em, img {border: 1px solid red;}

CSS Reference http://www.w3.org/Style/CSS http://www.css-discuss.org http://www.csszengarden.com http://www.cssbeauty.com http://www.w3schools.com/CSS/CSS_reference.asp

http://www.w3.org/Style/CSS

http://www.css-discuss.org

http://www.csszengarden.com

http://www.cssbeauty.com

http://www.w3schools.com/CSS/CSS_reference.asp

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

learn web standards :: css guide - how do they work?

complete css guide << what's a style sheet? | linking & embedding >> How do style sheets work? All right, we've seen that style sheets are just text files ...
Read more

How Cascading Style Sheets work - TechRepublic

Cascading Style Sheets (CSS) are groups of style rules. Take a look at how they work.
Read more

Lesson 2: How does CSS work?entutorial - HTML.net

Lesson 2: How does CSS work? In this lesson you will learn how to make your first style sheet. You will get to know about the basic CSS model and which ...
Read more

How Cascading Style Sheets (CSS) Work - Joy Of Code

If you are not sure how Cascading Style Sheets (CSS) works or even what it is, you've come to the right place!! CSS is what gives life to a web
Read more

Style Sheets - How do Style Sheets work with Dreamweaver

Why are Style Sheets Useful? Style sheets allow more control over visible elements of a web site. For example, style sheets can distinguish between a ...
Read more

How Cascading Style Sheets (CSS) Work - For Dummies

To get your CSS capabilities off the ground, you start by defining a series of styles for each element you want to affect, whether it’s an HTML component ...
Read more

Style Sheets in HTML documents - World Wide Web Consortium ...

These techniques work for some ... HTML documents may contain style sheet rules directly in them or they may import style sheets. Any style sheet language ...
Read more

How To Use Styles In Microsoft Word To Save A Lot Of Work

How To Use Styles In Microsoft Word To Save A ... You have explained style sheets extremely clearly ... Something as important as styles should work as ...
Read more

How Cascading Style Sheets Work - YouTube

Demonstration of the Browser, User and Designer style sheets in web design and how they blend together to provide all the styling requirements ...
Read more

Web Style Sheets - World Wide Web Consortium (W3C)

W3C's authoritative overview of style sheets for the web.
Read more