Post on 18-Jan-2016
HTML with Style!
What is a Style Sheet? CSS?
Style Sheet
CSS Cascading Style Sheets A “language” for defining style rules.
Rules that tell the browser how to present information.
Style Assignment Syntax
Target property value property2 value2
p background: YELLOW
Identifying Targets 1
Selector
Class
ID Defines a style for a single element based on the element’s ID. (Avoid)
Defines a style for all elements of a given class.
Defines a style for all elements of a given type (e.g., all paragraphs).
Examples
Selector
Class
ID
Class
ID
Identifying Targets 2
Contextual Defines a style based on the order of selectors, going from right to left.
p em strong background: YELLOW
p em background: YELLOW
Examples
Examples
Margin
Basic Property Groups
Font
₪Ω€Text
T he
Background
Padding
The contents go here!Border
BoxModel
Internal Style Sheets
Local (Inline) Styles
External Style Sheets
CSS Order Matters
1
2
3
1
Why Style Sheets?
+ Flexible, powerful presentation.
+ Control – author, user, browser.
+ Clearly separates content and presentation.
+ Transition to future technologies.
– Can get confusing (e.g., conflicts)
div And span
• Both group information.
• Great for formatting all sorts of elements!
• div– Block level.
• span– Inline.
We have just skimmed the surface of CSS! Feel free to explore.
By the way, CSS3 is under development right now.