![Page 1: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/1.jpg)
HTML with Style!
![Page 2: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/2.jpg)
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.
![Page 3: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/3.jpg)
Style Assignment Syntax
Target property value property2 value2
p background: YELLOW
![Page 4: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/4.jpg)
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).
![Page 5: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/5.jpg)
Examples
Selector
Class
ID
Class
ID
![Page 6: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/6.jpg)
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
![Page 7: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/7.jpg)
Examples
![Page 8: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/8.jpg)
Examples
![Page 9: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/9.jpg)
Margin
Basic Property Groups
Font
₪Ω€Text
T he
Background
Padding
The contents go here!Border
BoxModel
![Page 10: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/10.jpg)
Internal Style Sheets
![Page 11: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/11.jpg)
Local (Inline) Styles
![Page 12: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/12.jpg)
External Style Sheets
![Page 13: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/13.jpg)
CSS Order Matters
1
2
3
1
![Page 14: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/14.jpg)
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)
![Page 15: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/15.jpg)
div And span
• Both group information.
• Great for formatting all sorts of elements!
• div– Block level.
• span– Inline.
![Page 16: HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697bfc51a28abf838ca64f9/html5/thumbnails/16.jpg)
We have just skimmed the surface of CSS! Feel free to explore.
By the way, CSS3 is under development right now.