Cascading Style Sheets - CSS basics
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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">
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”
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
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 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
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
<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: #ff00ff
background-image: url( )
background-repeat: repeat-x, repeat-y, repeat, no-repeat, inherit
background-position: x y;
background-attachment: scroll, fixed
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
<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 names
background color = background-color
colors in CSS
named (a short list) red, blue, green…
#99CC33 → #9C3
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…
CSS3 properties
Draft finalized end of 2005? still in draft 2010…
Browser support initially limited
Problems:
buggy limited support
POORLY designed standard
Related Documents
