CSS Rule - PowerPoint PPT Presentation

About This Presentation
Title:

CSS Rule

Description:

CSS Rule Selector Declaration Block body {font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px;} Value Attribute Name – PowerPoint PPT presentation

Number of Views:21
Avg rating:3.0/5.0
Slides: 8
Provided by: JohnOus2
Learn more at: https://web.stanford.edu
Category:
Tags: css | rule

less

Transcript and Presenter's Notes

Title: CSS Rule


1
CSS Rule
Selector
Declaration Block
body font-family Tahoma, Arial,
sans-serif color black background
white margin 8px
Value
Attribute Name
2
Adding Styles to HTML
Separate Stylesheet
ltheadgt ... ltlink rel"stylesheet"
type"text/css" href"myStyles.css" /gt ltstyle
type"text/css"gt body font-family
Tahoma, Arial, sans-serif ...
lt/stylegt lt/headgt ltbodygt ... ltdiv
stylepadding2px ... "gt ... lt/bodygt
Page-Specific Styles
Element-Specific Styles
3
CSS Color Specifiers
  • Predefined names
  • white black red
  • 8-bit hexadecimal intensities for red, green,
    blue
  • 0-255 decimal intensities
  • Percentage intensities

ff0000
rgb(255,255,0)
R
G
B
rgb(80,80,100)
4
CSS Element Boxes
Parents background used in margin area
Border
Margin
Padding
Element Content
Padding
Elements background used in padding area
5
CSS Distances
  • 2px pixels
  • 1mm millimeters
  • 2cm centimeters
  • 0.2in inches
  • 3pt printers points
  • 2em, 4ex other printers units

6
CSS
HTML
body font-family Tahoma, Arial,
sans-serif font-size 13px color
black background white margin
8px h1 font-size 19px margin-top
15px margin-bottom 5px border-bottom
1px solid black .shaded background
d0d0ff
ltbodygt lth1gtFirst Section Headinglt/h1gt ltpgt Here
is the first paragraph, containing text that
really doesn't have any use or meaning it just
prattles on and on, with no end whatsoever, no
point to make, really no purpose for
existence at all. lt/pgt ltdiv
class"shaded"gt lth1gtAnother Section
Headinglt/h1gt ltpgt Another paragraph. lt/pgt lt
/divgt lt/bodygt
7
(No Transcript)
Write a Comment
User Comments (0)
About PowerShow.com