CSS Cascading Style Sheets Unit C
First, some review questions What tag should be the very first tag in your page? What tag should be the very last tag in your page? What is the term for a tag that can be still used but is no longer recommended? Is HTML a presentation language or a semantic language? Is CSS a presentation language or a semantic language? What is the name for the location in your browser where you enter the address of a web page or web site?
A few more questions T/F HTML tags can be written in UPPER case. What is the preferred case (UPPER, Mixed or lower) to write HTML? What tag is used to indicate the language of a page? Which section of a web page contains elements that are not part of the main web page that is displayed? What tag would you use to mark a block of code (this tag has no special semantic meaning)? What viewport attribute properties will cause a web page to scale to fit a web browser?
A few more questions What would you use to save the address of a web page that you frequently visit so that you can quickly return to it without having to enter the web address? What tag would you use to indicate that text should be bold, on a separate line and have a certain size? T/F Word is the best editor to use to write HTML. What is the difference between head, header and heading? What is the purpose of http://validator.w3.org?
So fasten your seat belts and let the learning begin.
Let’s talk about the weather. What are some of the characteristics that you could use to describe the weather? For example: Max Temperature 122.5
Defining the characteristics of the weather. weather { rain: 4in; hi-temp: 107; low-temp: 82; sky: ps; } Selector Property value pair
A few definitions Style rules: lines or blocks of CSS code that specify the presentation of web page elements and contain two main parts Selectors: identify the HTML elements to which the rule applies Declarations: specify CSS property to apply to the selector and value to assign to the property Each declaration (property: value) ends with a semicolon All declarations surrounded by curly braces
How styles are defined Notice the syntax is: property: value; 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; } Notice the syntax is: property: value; There is a colon after the property and a semicolon after the value
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.
How can style rules be formatted? Example 1 –Traditional one property value pair per line h1 { text-align: right; color: blue; } h2 { h3 { 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; }
What 5 items are wrong here? bdy { font-size 12px; width: 150px margn: 10px; > body { font-size: 12px; width: 150px; margin: 10px; }
Where can CSS rules be used? In-line Embedded styles in the head section 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.
I am going to throw it to Fitzgerald – he’s open. Our game plan will be to start by running the ball and then throwing short passes once they start trying to stop our run game. Run 37 Right On 3 I am going to throw it to Fitzgerald – he’s open.
In-line style Use the style attribute in HTML elements. <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> <h1>Heading without style</h1>
Embedded style a.k.a. Internal styles or header styles Use the style tags in the head section. <head> <style type="text/css"> body { font-size: 12px; margin: 20px; } h3 { text-align: center; } </style> </head> An HTML body tag would be <body> This is a style definition for the body element. This is a style definition for any h3 elements
Let’s use our time machine to take a look at your future. TRAVEL TO YOUR FUTURE
June 6, 2022 - You working as a web person at a medium sized company. 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 really good CIS133 teacher. Right? What are you going to do?
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 <link> element in the <head> section of the page: <head> <link rel="stylesheet" href="styles.css"> </head>
What can be a selection in your CSS? 1. Html element – p, h1, body 2. Id – defined with id= Can be used only once with that name 3. Class – defined with class= Can be used repeatedly
IDs vs Classes Classes - NOT unique ID's - 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. 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.
Id Selectors aka ID Rules #comp-name { text-align: center; } #comp-add { text-align: right; <h3>Veterinarian</h3> <p>Seeking associate veterinarians, full or part-time considered. ..........</p> <h3 id="comp-name">T.A.S.K.</h3> <p id=“comp-add”>123 Main St Springfield BA</p>
Class Selectors aka Class Rules .thin { width: 60em; } <h3>Veterinarian</h3> <p class="thin">Seeking associate veterinarians, full or part-time considered. ...</p> <h3>T.A.S.K.</h3> <p>123 Main St Springfield BA</p> <p class="thin">For more information contact …</p>
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 <div id="sales">We have a various items on sale every fourth Wednesday ….. </div> CSS #sales { text-align: center; }
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.
One of the advantages of Notepad++ 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.
What is ‘improper’ in this sample? <style type="text/css"> : #who { text-align:center; } </style> </head> <body> <div id="resp"> <h2>T. A. S. K. -- Tim's Animal Services and Kennel</h2> <p>We offer a variety of classes -- both obedience and social. The benefits of taking a class are a happier dog and a happier owner.</p> <p id="who" >Your name: Alex B Cook</p> <p id="who">Your section number: CIS133DA</p> </div> What is ‘improper’ in this sample?
<style type="text/css"> : #who { text-align:center; } </style> </head> <body> <div id="resp"> <h2>T. A. S. K. -- Tim's Animal Services and Kennel</h2> <p>We offer a variety of classes -- both obedience and social. The benefits of taking a class are a happier dog and a happier owner.</p> <p id="who" >Your name: Alex B Cook <br />Your section number: CIS133DA</p> </div>
<style type="text/css"> : #who { text-align:center; } </style> </head> <body> <div id="resp"> <div id="who" > <p>Your name: Alex B Cook <br />Your section number: CIS133DA</p> </div> Now if you add more elements within the who div they will all have the same style.
Each student is uniquely Identified. # Many students can be in a class. A class has a class meeting time called the class period. Examples: web.gccaz.edu/~timgo00001/cis133/lesson-03 lesson-C/jobs1.html lesson-C/jobs2.html – added div tags lesson-C/jobs3.html – added id and class
MORE ROT - Rules of Thumb 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++ MORE ROT - Rules of Thumb
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/unitq/projectq.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.
Find the 10 errors in this code. <DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Lakeland Reeds Bed and Breakfast</title> <link rel="spreadsheet" type="text/css" href="lakeland.css"/> <div id="box"> <h1>Lakeland Reeds Bed and Breakfast</h1> <h2 class="maintext">About Us <p class="maintext">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!</p> <p id="contact">Philip Blaine, Proprietor 45 Marsh Grass Ln.<br />Marble, MN 55764<br />(218) 555-5253</p> <div> </body> <p>Alex b Cook HTML5 Unit z </p> Find the 10 errors in this code.
Find the 10 errors in this code. /* 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%; color: clear; <p> Alex b Cook HTML5 Unit Z </p> Find the 10 errors in this code.