Basic CSS The Nuts and Bolts

1
Basic CSSThe Nuts and Bolts

• Week 3 - Presentation 1
• Veronica Noone

2
Objectives

• Lets Review
• CSS Syntax
• Selectors
• Properties and Values
• Applying CSS to XHTML
• Other Style Sheets?

3
Lets Review

• What was the Basics of XHTML?
• How is XHTML and CSS Related?
• What is CSS again?

4
CSS Syntax

• The jelly to XHTML peanut butter
• Has completely different Syntax
• No tags
• Selectors, properties and values

body background-color green
5
CSS Syntax Dissected
Rule

• Selectors
• Properties
• Values

Selector
statement
body background-color green
Property
Value

• The declaration has property/value pairs
  separated by semicolons

6
Selectors

• Specify what element you want to style
• Three types
• HTML selectors
• ID Selectors
• Class Selectors

7
HTML Selectors

• Define how a specific elements should be
  displayed
• The text portion of an XHTML tag
• For ltpgt - p is the selector

p color green
8
ID Selectors

• Rule that can be applied to one specific element
  that has the and id attribute
• Used when you want to apply a style to one
  specific element

myname color red
Notice the sign!
9
Class Selectors

• Rule that can be applied to any number of
  elements via the class attribute

.alert color red font-weight bold
Notice the .
10
classs and ids???

• What are these things we speak of?
• Classes and ids will emerge and make more sense
  as we learn more and more about how to structure
  our XHTML documents correctly.
• For now we are dealing with specifics of the css
  language

11
Pseudo-classe Selectors

• Increase the specificity of a CSS rule
• Not very many we will cover them in more detail
  later.

pfirst-letter font-size150
12
Grouped Selectors

• You can apply one statement to multiple selectors

h1, p, .alert font-family verdana
13
Nested Selectors

• Remember the parent child relationships elements
  have?

p em font-weight bold
14
Properties and Values

• We will cover specific Properties as we continue
  through the semester
• Values normally correspond to specific properties
  but there are common ones
• Color
• Units

15
All about Color

• Colors can be used to specify fonts, backgrounds
  and borders.
• Over 16 million!
• Specify color values by
• Name (red, green, pink, grey, etc)
• Hexadecimal (ffffff, cc9999, c99)
• RGB value ( rgb(255, 255, 255) )

16
Units

• Dealing with size, width, height, thickness, etc
• Percentage (80)
• Em (1.5em)
• Pixel (500px)
• Point (12pt)
• Pica (10pc)
• Centimeter (5cm)
• Millimeter (100mm)
• Inch (2in)

17
Now what?

• Youve got the basic rules but where does it GO?

18
Applying CSS to XHTML

• Three ways
• Inline
• Embedded
• External

19
Inline CSS

• Generally discouraged
• Add style directly to an element

ltp stylecolorredgtThis paragraph will be
redlt/pgt
20
Embedded CSS

• Goes in the head of the document using the style
  tag.
• Only be used when applying styles to one page.
• Will use a lot while learning for simplicity
• Lets take a look

21
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt lthtml xmlns"http//www.w3.org/19
99/xhtml" xmllang"en"gt ltheadgt lttitlegtClass
Examplelt/titlegt ltstyle type"text/css"gt body
background-color pink em color purple
font-size 125 font-weight bold lt/stylegt lt/h
eadgt ltbodygt lt!-- main content area
--gt lth1gtTodays Newslt/h1gt ltpgtIt was a
ltemgtgreatlt/emgt class today! Students seemed
mildly interested and they ACTUALLY learned
something!lt/pgt lt/bodygt lt/htmlgt
22
External CSS

• The Cats PJs of CSS
• Linked from the HTML file using the, ummm, link
  tag.
• Can also import using _at_import

ltlink relstylesheet typetext/css
hrefmyCSSfile.css /gt
ltstyle typetext/cssgt _at_import
url(myCSSfile.css) lt/stylegt
23
Other Style Sheets?

• What are the 3 ways we can define styles for a
  page again?
• There are 2 other styles sheets to consider..
• Do you know them? do ya? huh? Huh?

24
One thing to remember

• Nothing is absolute on the web except your
  CONTENT!