cascading style sheets - css
DESCRIPTION
Cascading Style Sheets - CSS. basics. CSS use in html. Internally ……css…… Externally . Selectors. terminology to remember! Selectors “select” items on the page such as: - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/1.jpg)
Cascading Style Sheets - CSS
basics
![Page 2: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/2.jpg)
CSS use in htmlInternally
<head>…<style>…css…</style>…</head>
<tag style=”…”>
Externally
<link rel="Stylesheet" href= "ICS255.css" media="screen">
![Page 3: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/3.jpg)
Selectors
terminology to remember!
Selectors “select” items on the page
such as:
all H1 tags & all H2 tags
1 tag with the ID “fred”
all tags classified “cats”
![Page 4: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/4.jpg)
Selectors = What/how to “select” the tags you want to apply style attributes to
3 CSS Selectors
tagname (aka element name)
.classname (class attribute)
#idname (id attribute)
3 ways to apply a style
![Page 5: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/5.jpg)
SillyPhrase
Animal
The fox jumped over the lazy dog
<p id=”sillyphrase”>The <span
class=”animal”>fox</span> jumped over the lazy
<span class=”animal”>dog</span
></p>
![Page 6: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/6.jpg)
Selectors: (3 ways to apply a style)
IDs - can only be used ONCE
Class - can be used many times
tag - all of that tag, ex: b is all <b> tags
SillyPhrase
Animal
The fox jumped over the lazy dog
![Page 7: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/7.jpg)
similar to Java/C/JavaScript syntax ;;;;
/* block comments, no line comments*/
Selector { property: value; }
is a tagname, #idname, or .classname
Selector1 selector2 selector3 {…}
CSS Syntax
![Page 8: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/8.jpg)
<p id=”sillyphrase”>The
<span class=”animal”>fox</sp
an> jumped over the lazy <span
class=”animal”>dog</span></p>
SillyPhrase
Animal
The fox jumped over the lazy dog
.animal {
color: blue;font-weight: bold;}
#sillyphrase {
background-color: green;
}
![Page 9: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/9.jpg)
<div> <span>Do nothing - exist so you can use class=””
Two for technical reasons
Block tags - take 100% width: <p><h1>
Inline tags - “flow” within: <b><em>
Modern browsers handle this old problem but you shouldn’t push your luck
![Page 10: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/10.jpg)
SillyPhrase
Animal
The fox jumped over the lazy dog<p
id=”sillyphrase”>The <span
class=”animal”>fox</span> jumped over the
lazy <span class=”animal”>dog</s
pan></p>
.animal {
color: blue;font-weight: bold;}
#sillyphrase {
background-color: green;
}
![Page 11: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/11.jpg)
SillyPhrase
Animal
The fox jumped over the lazy dog
.animals is applied to everything that has the class= “animals”
#sillyphase could be made RED, and then the fox and dog (animals) would inherit the RED color
.animals are black, no matter what color #sillyphrase is
<p id=”sillyphrase”>The <span
class=”animal”>fox</span> jumped over the lazy <span
class=”animal”>dog</span></p>
![Page 12: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/12.jpg)
Backgroundsbackground-color: #ff00ff
background-image: url( )
background-repeat: repeat-x, repeat-y, repeat, no-repeat, inherit
background-position: x y;
background-attachment: scroll, fixed
![Page 13: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/13.jpg)
Typical Selector Useclasses are the most flexible
multiple selectors (or complex query)
.classname {…properties...}
.classname h1 {…properties...}
all class=”classname” tags
filter search results: all <h1> tags
![Page 14: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/14.jpg)
<p>The <span class=”animal”>fox</span> jumped over
the lazy <span class=”animal”>dog
</span></p>
animal
The fox jumped over the lazy dog
p .animal {
color: yellow;}
p.animal {
background-color: red;}
![Page 15: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/15.jpg)
Naming Conventions
If you didn’t notice…
it is all LOWERCASE + no spaces on names
background color = background-color
colors in CSS
named (a short list) red, blue, green…
#99CC33 → #9C3
![Page 16: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/16.jpg)
Use CSS references / tools
Most HTML tags come with built-in properties, which you can override with CSS
Use LIVE CSS editor to learn (Firefox) part of the Web Developer Tool add-on
FireBug for Firefox & Google Chrome
Next…
![Page 17: Cascading Style Sheets - CSS](https://reader035.vdocuments.net/reader035/viewer/2022081501/56814a42550346895db75e46/html5/thumbnails/17.jpg)
CSS3 properties
Draft finalized end of 2005? still in draft 2010…
Browser support initially limited
Problems:
buggy limited support
POORLY designed standard