Slide 1

Slide 2 CSS Cascading Style Sheets Please fasten your seat belt. Slide 3 Lets talk about the weather. What are some of the characteristics that you could use to describe the weather? For example: Max Temperature 122.5 Slide 4 Defining the characteristics of the weather. weather { rain: 4in; hi-temp: 107; low-temp: 82; sky: ps; } Selector Property value pair Slide 5 How styles are defined Selector(s) { One or more attribute-value pairs; } For example: h3 { text-align: center; font-size: 16px; } or h3 { text-align: center; font-size: 16px; } Slide 6 Style syntax these rules are different than HTML. p { line-height: 1.6em; font-family: verdana, arial, helvetica, sans-serif; } Pay special attention to: Spellig { } : ; You should never have HTML in your styles. Slide 7 Example 1 Traditional one property value pair per line h1 { text-align: right; color: blue; } h2 { text-align: right; color: blue; } h3 { text-align: right; color: blue; } Example2 - You can define styles for multiple selectors. h1, h2, h3 { text-align: right; color: blue; } Example3 property value pairs can be on the same line. h1, h2, h3 { text-align: right; color: blue; } How can style rules be formatted? Slide 8 What 5 items are wrong here? bdy{ font-size 12px; width: 150px margn: 10px; > body{ font-size: 12px; width: 150px; margin: 10px; } Slide 9 Where can CSS rules be used? 1. In-line 2. Embedded styles in the head section 3. CSS file separate file that your web page links to A style defined in a CSS file will be overridden by an embedded style. An embedded style will be overridden by an in-line style. Slide 10 Slide 11 In-line style Use the style attribute in HTML elements. Center-aligned heading This is a paragraph. Heading without style This is a paragraph. Slide 12 Embedded style a.k.a. Internal styles or header styles Use the style element in the head section. body{ font-size: 12px; margin: 20px; } h3{ text-align: center; } An HTML body tag would be This body is a style definition. Slide 13 Lets use our time machine to take a look at your future. TRAVEL TO YOUR FUTURE TRAVEL TO YOUR FUTURE Slide 14 I have decided that you should update some of our web pages. They should use the Verdana font, a larger font size, wider margins and have the new company logo. How soon will you have this done? How many pages do you want updated? About 600 pages. Is there a problem getting them update by next Monday? I know you had a good CIS133 teacher. Right? What are you going to do? June 6, 2017 - You working as a web person at a medium sized company. Slide 15 External style sheet External style sheet are ideal when the style is applied to many pages. You can change the look of an entire site by changing just one file. CSS files are text files that are created and updated with a text editor notepad. External styles are connected to the web page by the element in the section of the page: Slide 16 What can be a selection in your CSS? 1. Html element p, h1, body 2. Id defined with id= can only be one with that name 3. Class defined with class= and can be used repeatedly Slide 17 Slide 18 ID's - unique Each element can have only one ID Each page can have only one element with that ID Code will not pass validation if you use the same ID on more than one element. Classes - NOT unique You can use the same class on multiple elements. You can use multiple classes on the same element. Any styling information that needs to be applied to multiple objects on a page should be done with a class. IDs vs Classes Slide 19 Id Selectors aka ID Rules Veterinarian Seeking associate veterinarians, full or part-time considered.... T.A.S.K. 123 Main St Springfield BA #comp-name { text-align: center; } #comp-add { text-align: right; } Slide 20 Class Selectors aka Class Rules Veterinarian Seeking associate veterinarians, full or part-time considered.... T.A.S.K. 123 Main St Springfield BA For more information contact .thin { width: 60em; } Slide 21 Selecting a block of code div tag lets you select a block of code multiple paragraphs, headings, images etc. div can have an id. HTML We have a various items on sale every fourth Wednesday .. CSS #sale { text-align: center; } Slide 22 Each student is uniquely Identified. # Many students can be in a class. A class has a class meeting time called the class period. Examples: lesson-C/jobs1.html lesson-C/jobs2.html added div tags lesson-C/jobs3.html added id and class Slide 23 Lakeland Reeds Bed and Breakfast Lakeland Reeds Bed and Breakfast About Us Lakeland Reeds is an ideal place to unplug from your daily routine, whether on the shore of Twin Lakes watching the sundown over the cattails or just curled up in a hammock on our screened wraparound porch with a good book. We're here to help you get the most out of your time with us, from canoes and life vests for a day out on the lake, to DVDs and popcorn for a quiet evening in. We look forward to welcoming you! Philip Blaine, Proprietor 45 Marsh Grass Ln. Marble, MN 55764 (218) 555-5253 Alex b Cook HTML5 Unit z Find the 10 errors in this code. Slide 24 /* Lakeland Reeds Bed and Breakfast h2 { textalign: center; } #contact { text-align: right } #box { Border: 0.25em; border-style: solid; border-color: black; wide: 50em; margin-left: auto; margin-right: auto; padding: 1em; maintext { font: Verdana, Geneva, san-serif; text-align: left; width: 60%; margin-left: auto; margin-right: auto; color: clear; } Alex b Cook HTML5 Unit Z Find the 10 errors in this code. Slide 25 Notepad++ This text editor can be downloaded for free. http://notepad-plus-plus.org/ Save it to your USB for easy use any time you are editing a web page or a css file. Color coding will show once the file type is indicated. Has a run option to see in the browser. Slide 26 Notice that in code on the left that at line 8, the #box is black in color instead of light blue. As you go backwards (up) you may notice in line 7 the closing bracket is the wrong bracket. By correcting this error the code after it now works. One of the advantages of Notepad++ Slide 27 1. Read again the instructions or steps. Did you misread or skip a step? 2. Develop and test small portions of code at a time. If there was not an error before you did an edit and now there is an error then, most likely the error is caused by something you edited. 3. Always check quotes and brackets. 4. Save and refresh. 5. Is what you are looking at in the browser the same file as the one you are editing? Always develop and test on your Flash drive. 6. Check for spelling properties, file names and extensions, tags 7. Use different browser for viewing code. 8. Consider using a text editor like Notepad++ ROT - Rules of Thumb Slide 28 If you are still stumped then publish your page, your style sheet, and any other needed items (images, scripts, fonts) to your eGCC space. Send me an e-mail to tim.sylvester@gccaz.edu (not a Canvas message) with a link to the published address (i.e. http://web/gccaz/edu/~abc1234567/lesson17/project 17.html) If I have the web address, I can look at both the html and the css (and any other items). Then I can e-mail you back and describe what is not working. Do not submit your URL in Canvas until you are ready to have your work graded. Slide 29