Styling Your Pages with CSS

Using the CSS Styles Panel

You can use the Styles panel, the Property Inspector, the context sensitive menus, and the Format menu to control CSS.

The Styles panel has two modes:

1. All- allows you to see all the CSS rules and is best for a global view and moving rules
2. Current- allows you to see what rule is currently in effect and allows for easy editing of specific rules

Hi there! I'm styled with an INLINE style

Hi there! I'm styled with an embedded, or INTERNAL style sheet!

Oh hello! I'm styled with an EXTERNAL, or attached style sheet!

You can also use the new Code Navigator. I suggest that you disable it form showing up automatically and invoke it with a keyboard shortcut Control + Alt (Windows) or Command + Option (Mac)

Understanding Style Sheets

1. Inline styles are not separated from the HTML code
2. Embedded styles are always in the head tag
3. External styles are always in a separate .css document

Understanding Cascading

• The furthur the code is away from the element the weaker it is, thus inline styles have the most strength
• Conversely, external styles are most powerful in terms of the scope because they can be applied to multiple pages.

Creating and Modifying styles

1. Tag styles -assigned to specific html tags
2. Class styles- have unique names and are not associated with any html tag. Applied on an as-need basis.
3. Contextual Selectors- apply formatting to tags and classes when they appear in a specific combination.
4. Psuedo-Class Selectors- affects a part or state of a selected tag or class.

Div tags and CSS IDs

1. Div tags are block level elements with no other pre-defined properties.
2. Once you assign an ID to a div tag, it is easy to use CSS to control its appearance.
3. An ID should only be used once per page.