CSS Cascading Style Sheets

1
CSSCascading Style Sheets
2

• CSS
• Define style, look and presentation of the
  website content
• The way the content is presented on the page is
• determined in presentation rules in a style sheet
• layout
• background
• fonts
• margins

3

• CSS
• HTML
• is used to create logical structure of the
  content
• CSS
• is used to style the structured content

4

• Styles
• External
• reside in a separate style sheet file (.css)
• Internal
• located inside individual page within ltstylegt
  tags inside the documents ltheadgt
• Inline
• located within HTML tags themselves and only
  apply to the content of that tag

5

• Style rules Cascade
• There are rules to determine which style takes
• precedence while multiple styles can cover a
  single
• element of the page.
• When style rules conflict, the laws of
• the cascade determine how the conflict is
  settled.
• The order of the cascade
• 1. External
• 2. Internal
• 3. Inline

6

• Style rules Cascade
• The closer a rule to the element getting styled,
  the more power the rule has in the battle of
  conflicting style rules.
• The order of the cascade
• 1. External
• 2. Internal
• 3. Inline

7

• Creating CSS
• A style rule begins with a selector.
• Selector can be a
• tag
• class
• id

8

• Creating a style rule for a tag
• Redefining the style for a tag gives considerable
  control,
• as HTML has a tag for nearly any type of text you
  need to
• format.
• ltbodygt

9

• DW CSS categories
• Type
• Background
• Block
• Box
• Border
• List
• Positioning
• Extensions

10

• Creating a Custom class
• Style rule for something that does not have tag
  as
• a label.
• Custom name for a style when you create a class.
• .myclass
• Do not create classes for something that has a
  logical tag, like heading lth1, h2, h3, etcgtYou
  can simply redefine one of the heading tags.
• HTML is used to create logical structure of the
  content
• CSS used to style the structured content

11

• Creating a Custom class
• Class is reusable
• Many different elements on a page can be assigned
  to the
• same class
• Class has a name
• A period (.) precedes a class selector
• Named elements can be targeted with CSS rules

12

• Creating a Custom class
• Class style rule must be applied to the
• document

13

• Creating advanced selectors (IDs, pseudo-class
• selectors)
• An ID can only be used once per page
• IDs are unique
• Used in addition to CSS rules
• A hash or pound sign () precedes an id selector.
• subnav

14

• Creating advanced selectors (IDs, pseudo-class
• selectors)
• ID is another method for assigning names
• ID style rule must be applied to the
• document

15

• Pseudo-class selectors
• Names so because pseudo-states dont actually
  exist in
• the document
• The user must do something to trigger the
  pseudo-class,
• such as
• Visit a link
• Hover over a link
• Browse over a visited link

16

• Pseudo-class selectors L-V-H-A order
• LoVeHAte
• A link
• A visited
• A hover
• A active

17

• Verification of styles
• Previewing in a variety of browsers and browser
  versions
• Sometimes the style rules conflict and you get
  enexpected
• results

18

• CSS for layout
• Box model
• DIV
• division

19

• CSS for layout
• Box model
• Margin
• Border
• Padding
• Content
• CSS set rules
• For each element

20

• CSS for layout
• Position and float
• Static
• Relative
• Inherit
• Absolute
• Fixed

21

• CSS for layout
• Position and float
• Static
• Relative
• Inherit
• Absolute
• Fixed

22

• CSS for layout
• Float
• Left
• Right
• None
• Inherit

23

• CSS for layout
• Elements in HTML can nest.
• Inside the body tag might be a div (division)
  named
• content with a div named newitem nested inside.
• Each of these nested elements exist in a
  parent-child
• relationship that allows CSS properties to be
  inherited.
• The child elements are descendants of the parent
  and
• inherit properties from them.