Cascading Style Sheets Level 2. Course Objectives, Session 1 Level 1 Quick Review Chapter 8: Adding...
23
Cascading Style Sheets Level 2
-
Upload
meryl-mcdaniel -
Category
Documents
-
view
216 -
download
2
Transcript of Cascading Style Sheets Level 2. Course Objectives, Session 1 Level 1 Quick Review Chapter 8: Adding...
Cascading Style SheetsLevel 2
Course Objectives, Session 1• Level 1 Quick Review
•Chapter 8: Adding Graphics to Web Pages
•Chapter 9: Sprucing Up Your Site’s Navigation
•Begin Chapter 11: Formatting Tables and Forms
Course Objectives, Session 2
• Finish Chapter 11: Formatting Tables and Forms
•Chapter 12: Introducing CSS Layout
•Chapter 14: Responsive Web Design
• If time, Chapter 16: CSS for the Printed Page
http://reference.sitepoint.com/css/css
3 Layers of Web Page Construction
CSS Level 1 Review, HTML Tags• <div> tag• HTML Block level element, creates spacing before and after itself
• <span> tag• HTML Inline level element, does not affect the spacing before and after itself• Additional tags are referenced on page 23
CSS Structure
p { color: red; font-size: 1.5em;
}
Selector Property Value
DeclarationBlock
Page 37 - 38
Declaration
CSS Level 1 Review, Where CSS Lives• Internal (Embedded) Style Sheets• Goes inside the <head> of the html page• All internal styles are encased around the <style> tag
<head>
<meta charset="UTF-8">
<title>Inheritance In Action</title>
<style>p { color: #FF6600; border-left: solid 25px #BD8100;
}.pageStyle { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 18px;}
</style>
</head>
Page 40
CSS Level 1 Review, Where CSS Lives• External Style Sheets• CSS lives in a separate file with a .css extension• Use the <link> tag to reference the CSS file (within the <head>)
<head>
<meta charset="UTF-8">
<title>Inheritance In Action</title>
<link href=“styles/styles.css" rel="stylesheet">
</head>
Page 41
CSS Level 1 Review, Selectors• Tag Selectors• Can use any HTML tag as a selector• body, div, section, nav, footer…
• Class & Id Selectors• You create the name, should be something meaningful• Only allowed to use letters, numbers, hyphens and underscores• Class name always starts with a period “.” and then a letter• ID name always starts with a period “#” and then a letter• Case sensitive• 2 step deal: Needs to be a definition (internal or external location) and a
reference (class=“alert” or id=“main-content”)• Class can be referenced in multiple HTML tags on the same page• ID can only be reference ONCE per page (try to avoid creating ID CSS)
Pages 56-61
CSS Level 1 Review, Selectors• Grouped Selectors• Selector names are separated with a comma “,”• Think of the comma as “or”• Use to keep code efficient and more organized
• Descendent Selectors• Pinpointing to a specific situation
h1 strong {
color: red;
}• The above example means, Look for a <h1> tag and then inside there, look
for a <strong> tag. If this situation is found, change the font color of whatever is inside the <strong> tag to red.
• Try not to create overly complex descendent selectors
Pages 62-66
CSS Level 1 Review, Family Tree• Ancestor
• Descendent
• Parent
• Child
• Sibling
Pages 64-65
CSS Level 1 Review, Inheritance
• The process by which some CSS properties applied to one tag are passed on to nested tags• font property is inherited• border property is not inherited
Pages 93-96
CSS Level 1 Review, The Cascade• Inherited Styles Accumulate
• The most specific selector wins
Pages 103-116
Selector Type Points
Tag (h1) 1
Class (.alert) 10
ID (#main-content) 100
Inline (<h1 style=“font:blue;”>) 1000 (try to avoid this)
Selector ID CLASS TAG Total Points
p 0 0 1 1
.byline 0 1 0 10
p.byline 0 1 1 11
#banner 1 0 0 100
a:link 0 1 1 11
h2 strong 0 0 2 2
CSS Level 1 Review, Formatting Text• Properties• Multitude of formatting like changing the font family, color,
bolding, spacing, and even adding a drop shadow• Remember older browsers will not recognize new CSS
properties. Can go to http://www.w3schools.com/ to check
• Popular Units of Measurements• px – pixels (finite)• % - percentage (relative)• em – ems (relative)
• Styling Lists
Pages 127-178
CSS Level 1 Review, Box Model
• Colliding Margins
• Using Negative Numbers (with margin property)
• Borders
• Rounded Corners
• Drop Shadows
Pages 193-212
Margin
Border
Padding
CSS Level 1 Review, Box ModelPages 193-212
Margin
Border
Padding
Element Dimensions
300px W
Content
10 px padding all around
300 + 10 + 10 = 320 px wide element
Pages 212-213
Element Dimensions
300px W
Content
10 px padding all around
300 + 10 + 10 = 320 px wide element
1 px borderall around
300 + 10 + 10 + 1 +1 = 322 px wide element
Element Dimensions
300px W
Content
10 px padding all around
300 + 10 + 10 = 320 px wide element
1 px borderall around
300 + 10 + 10 + 1 +1 = 322 px wide element
25 px margin-left
300 + 10 + 10 + 1 +1 + 25 = 347 px wide element
Element Dimensions
300px W
Content
10 px padding all around
300 + 10 + 10 = 320 px wide element
300 + 10 + 10 + 1 +1 = 322 px wide element
1 px borderall around
25 px margin-left
300 + 10 + 10 + 1 +1 + 25 = 347 px wide element
347 px wide
Let’s now begin CSS Level 2
Starting on page 239,
Adding Graphics to
Web Pages
![[MS-CSS21E]: Internet Explorer Extensions to Cascading ......The [CSS-Level2-2009] specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet](https://static.fdocuments.in/doc/165x107/6129665d6880a628087bd76b/ms-css21e-internet-explorer-extensions-to-cascading-the-css-level2-2009.jpg)
