View
12
Download
0
Category
Preview:
Citation preview
CSS Basics
1
CSS Basics
2
What is CSS ?Why use CSS ?How does it work ?
CSS Basics
3
What is CSS ?
It is NOT the same as HTMLIt is a different language (code)It is more complex than HTML
CSS Basics
4
What is CSS ?
A language for specifying appearanceSeparate FORM from CONTENTHTML for the content (data)CSS for the form (presentation)
CSS Basics
5
Content
<body> … </body><p> Lots of text </p><h1> Titles </h1><img src=”picture.jpg” /><ol> … </ol><div> … </div>etc.
Data/Structurecolor:green;margin:20px;padding:5px;border:2px solid black;background:yellow;font-weight:bold;etc.
Visual Style
Form vs
CSS Basics
6
<body> … </body><p> Lots of text </p><h1> Titles </h1><img src=”picture.jpg” /><ol> … </ol><div> … </div>etc.
HTMLcolor:green;margin:20px;padding:5px;border:2px solid black;background:yellow;font-weight:bold;etc.
CSS
Content Form vs
CSS Basics
7
Why use CSS ?
More powerful for controlling visuals than HTMLMore efficient for browsers than HTMLMore flexible for complex sites
CSS Basics
8
Why use CSS ?
Separation of CONTENT and FORM is importantEasily change the look without touching the contentDifferent people do those jobs
CSS Basics
9
Why use CSS ?
http://www.csszengarden.com/
CSS Basics
10
How does CSS work ?
Define a style specificationApply it to HTML elements
<body style="background:goldenrod;">
CSS Basics
11
How does CSS work ?
Inline stylesInternal style sheetsExternal style sheets
3 Methods
CSS Basics
12
Inline styles
<body style="background:goldenrod;"><hr style="height:3px;background-color:dimgray;"><ul style="list-style-image:url('cd-bullet.png');"><div style="background:yellow; margin:20px;}">
CSS Basics
13
But ...
What if you had 100<div style=”…”>boxes</div>
that you wanted to restyle ???
CSS Basics
14
Internal style sheets<head> <title>Davidson @ RHS</title> <style> body {background:goldenrod;} hr {height:3px;background-color:dimgray;} ul {list-style-image:url('cd-bullet.png');} div {background:yellow; margin:20px;} </style></head>
CSS Basics
15
Internal style sheets <style> body {background:goldenrod;} hr {height:3px; background-color:dimgray;} ul {list-style-image:url('cd-bullet.png');} div {background:yellow; margin:20px;} </style>These apply to ALL occurrences of the HTML element on the page.
CSS Basics
16
But ...
What if you want to apply different styles to
different occurrences of an element on the page ???
CSS Basics
17
<div>!<p>Today some very misguided person set a fire in one of the bathrooms at school. This was not a good thing, by any means. But it spawned a wonderful, impromptu assembly in the gym while we waited to go back to classes.</p>
</div>
<div>!<p>I played some of one version of "Hallelujah" in my classes today and was pleasantly surprised to see that many of my students responded to it and know it from some recent popular culture appearances.</p>
</div>
For instance ...
CSS Basics
18
<style> div {background:yellow; margin:20px;} </style>
Using this style definition would make all of the <div>s have yellow backgrounds.
CSS Basics
19
There is a way...
We can give different names to different styles, and apply them to different occurrences
of an element.
CSS Basics
20
CSS Classeselement.class
<style>div.bright {background:yellow;}div.neon {background:green;}
</style>
<div class="bright"><div class="neon">
CSS Basics
21
<div class="bright">!<p>Today some very misguided person set a fire in one of the bathrooms at school. This was not a good thing, by any means. But it spawned a wonderful, impromptu assembly in the gym while we waited to go back to classes.</p>
</div>
<div class="neon">!<p>I played some of one version of "Hallelujah" in my classes today and was pleasantly surprised to see that many of my students responded to it and know it from some recent popular culture appearances.</p>
</div>
<style>div.bright {background:yellow; margin:20px;}div.neon {background:green; margin:20px;}
</style>
CSS Basics
22
Internal style sheets
Blog Page Example
Recommended