cascading style sheets - css basics. css use in html internally css externally
DESCRIPTION
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”TRANSCRIPT
Cascading Style Sheets - CSS
basics
CSS use in htmlInternally
<head>…<style>…css…</style>…</head><tag style=”…”>
Externally<link rel="Stylesheet" href= "ICS255.css" media="screen">
Selectorsterminology to remember!Selectors “select” items on the pagesuch as:
all H1 tags & all H2 tags1 tag with the ID “fred”all tags classified “cats”
Selectors = What/how to “select” the tags you want to apply style attributes to3 CSS Selectors
tagname (aka element name).classname (class attribute)#idname (id attribute)
3 ways to apply a style
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>
Selectors: (3 ways to apply a style)
IDs - can only be used ONCEClass - can be used many timestag - all of that tag, ex: b is all <b> tags
SillyPhrase
Animal
The fox jumped over the lazy dog
similar to Java/C/JavaScript syntax ;;;;/* block comments, no line comments*/ Selector { property: value; }
is a tagname, #idname, or .classnameSelector1 selector2 selector3 {…}
CSS Syntax
<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;}
<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
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;}
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>
Backgroundsbackground-color: #ff00ffbackground-image: url( )background-repeat: repeat-x, repeat-y, repeat, no-repeat, inheritbackground-position: x y;background-attachment: scroll, fixed
Typical Selector Useclasses are the most flexiblemultiple selectors (or complex query)
.classname {…properties...}
.classname h1 {…properties...}all class=”classname” tags
filter search results: all <h1> tags
<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;}
Naming Conventions
If you didn’t notice…it is all LOWERCASE + no spaces on namesbackground color = background-colorcolors in CSS
named (a short list) red, blue, green…#99CC33 → #9C3
Use CSS references / toolsMost HTML tags come with built-in properties, which you can override with CSSUse LIVE CSS editor to learn (Firefox) part of the Web Developer Tool add-onFireBug for Firefox & Google Chrome
Next…
CSS3 propertiesDraft finalized end of 2005? still in draft 2010…Browser support initially limitedProblems:
buggy limited supportPOORLY designed standard