html - quiz #2 attendance code : 715834
DESCRIPTION
HTML - Quiz #2 Attendance CODE : 715834. http://decal.aw-industries.com. Web Design: Basic to Advanced Techniques. Announcements. Course FTP accounts set up Enrollment should all be sorted out Quizzes have been graded Mini Project 1 Extension on last week’s HTML lab, with CSS styling - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/1.jpg)
HTML - Quiz #2Attendance CODE: 715834
http://decal.aw-industries.com
Web Design:Basic to Advanced Techniques
![Page 2: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/2.jpg)
AnnouncementsCourse FTP accounts set up
Enrollment should all be sorted out
Quizzes have been graded
Mini Project 1Extension on last week’s HTML lab, with CSS stylingDue next Monday!
Web Design:Basic to Advanced Techniques
![Page 3: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/3.jpg)
Web Design:Basic to Advanced Techniques
Today’s AgendaQuiz
Announcements
CSS Introduction
CSS Practice
CSS Lab
Mini Project #1
![Page 4: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/4.jpg)
Web Design:Basic to Advanced Techniques
Fall 2010Mondays 7-9pm
200 Sutardja-Dai Hall
CSS Introduction
Web Design:Basic to Advanced Techniques
![Page 5: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/5.jpg)
![Page 6: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/6.jpg)
![Page 7: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/7.jpg)
What is CSS?Cascading Style Sheets
Separate structured content (HTML) from visual appearance (CSS) In good web design code, these should be COMPLETELY
separated (no formatting in the HTML!)
More formatting/styling options than HTML alone
Avoids repetition of code
![Page 8: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/8.jpg)
What is CSS?<font color="#0000FF”>Emphasized Text<font>
This is regular text.
<font color="#0000FF”>Emphasized Text<font>
This is regular text.
…
…
![Page 9: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/9.jpg)
What is CSS?<span class=‘emphasized’>Emphasized Text<span>
This is regular text.
<span class=‘emphasized’>Emphasized Text<span>
This is regular text.
span.emphasized{
color: #0000FF;
}
![Page 10: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/10.jpg)
CSS Syntax CSS rules go into a file
with .css extension
body { font-weight: bold; }
selector property value
Rule
Every declaration
Terminated by ;
Style.css
![Page 11: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/11.jpg)
Useful CSS All Elements
color: #FFF / #FFFFFF / white; font-size: 12px; font-weight: bold / normal; text-decoration: none / underline; background-color: #FFF / #FFFFFF / white;
Block Objects margin: 10px 20px; padding: 10px 20px; background-image: url(‘/images/background.gif’); background-repeat: no-repeat / repeat-x / repeat-y / repeat; background-position: 10px 0px; border: 1px solid #000; text-align: left / center / right;
![Page 12: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/12.jpg)
CSS SelectorsWe need a way to label the HTML elements we want to
style so we can refer to them in our separate CSS code
<p id=“myEle”></p> Style.css
#myEle {font-weight: bold;font-size: 20px;
}
![Page 13: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/13.jpg)
Element SelectorWe can select HTML elements by their element type
HTML Document
<h1>Image Page</h1>
<img src=“image.gif” />
<p>Here’s a description of the image you see above</p>
CSS Style Sheet
img {
border: 1px solid #333;
}
p {
font-color: #333;
}
![Page 14: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/14.jpg)
Class / ID Selector <p id=“myUniqueElement”></p>ID
Used to identify ONE particular HTML elementMust be unique for entire document Invalid XHTML if more than one element with same ID
<p class=“groupOfElements”></p>Class
Used to identify ONE or MORE HTML elementsGive multiple elements the same styling
![Page 15: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/15.jpg)
Class / ID SelectorWe can tag HTML elements by giving them an #id or .class
HTML Document
<p id=“description”>Here’s a description of the image you see above</p>
<p class=“extraInfo”>Here’s the photo equipment I used</p>
<p class=“extraInfo”>Here’s where I took the photo</p>
CSS Style Sheet
#description {
font-color: red;
}
.extraInfo {
font-color: blue;
}
![Page 16: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/16.jpg)
Universal SelectorWe can select all HTML elements
HTML Document
<h1>Image Page</h1>
<img src=“image.gif” />
<p id=“description”>Here’s a description of the image you see above</p>
<p class=“extraInfo”>Here’s the photo equipment I used</p>
<p class=“extraInfo”>Here’s where I took the photo </p>
CSS Style Sheet
* {
font-family: verdana, arial, helvetica, sans-serif;
color: #000;
}
![Page 17: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/17.jpg)
Combining SelectorsDescendant (nested)
Selects by nested structurep span { color: red; } .description a { color: blue; }
CombinedSelects between elements of same classp.info { color: red; }a.info { color: #FFF; }
GroupedApplies style to lista, p, span { color: red; }
<p class=“info”>para</p><a class=“info” href=“#”>link</a>
<p class=“description”><a href=“#”>a
link</a> <span>a
span</span></p>
<p class=“description”><a href=“#”>a
link</a> <span>a
span</span></p>
<p class=“description”><a href=“#”>a link</a> <span>a span</span>
</p>
<p class=“info”>para</p><a class=“info” href=“#”>link</a>
<p class=“info”>para</p><a class=“info” href=“#”>link</a>
<p>a para</p><a href=“#”>a link</a><span>a span</span>
<p>a para</p><a href=“#”>a link</a><span>a span</span>
![Page 18: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/18.jpg)
Specificity<p class=“para” id=“myPara”>Text</p>
p { color: red; }
.para { color: blue; }
#myPara { color: green; }
• What color is the text?
GREEN
#id > .class > element
![Page 19: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/19.jpg)
Attaching CSS StylesAfter we write our CSS rules we need to link our rules to
our HTML documentExternal Style Sheets Inline StylingEmbedded Style Sheets
![Page 20: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/20.jpg)
External Style Sheets <head>
<link href=”/style.css” rel="stylesheet" type="text/css" />
</head>
•Most common way to link CSS to HTML•CSS and HTML in separate files•Same CSS rules throughout site•Best practice!
![Page 21: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/21.jpg)
Inline Styling
Useful for single cases
Poor practice to use this extensively throughout site
If applying same style to multiple elements, consider using class instead
<p style=“color: red;”>red text</p>
![Page 22: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/22.jpg)
Embedded Style Sheets
Like inline styling, only use this for exceptions
If elements in this page are styled differently than the rest of the site
Try to avoid ever using this
Better option is to link to another .CSS file
<head>
<style type="text/css”>p { color: red; }
</style></head>
![Page 23: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/23.jpg)
Multiple Style SourcesHTML documents can include multiple sources of CSS
stylesA HTML document may link to any number of external style
sheets In addition to those style sheets, the documents may use
inline styling and embedded style sheets
SomeHTMLDoc.html<head>
<link href=”/style.css” rel="stylesheet" type="text/css" /> <link href=”/style2.css” rel="stylesheet"
type="text/css" /> <link href=”/style3.css” rel="stylesheet"
type="text/css" /> </head>
![Page 24: HTML - Quiz #2 Attendance CODE : 715834](https://reader035.vdocuments.site/reader035/viewer/2022062323/5681645e550346895dd631fc/html5/thumbnails/24.jpg)
Cascade OrderProximity: Inline > Embedded > External
Last style winsRules in last style sheet overwrite previous rules
Style.cssp { color: red; font-weight: bold}
Style2.cssp { color: green; }
Style3.cssp { color: blue; }
<p style=“color: orange;”>some text
</p>
<p>some text
</p>
<p>some text
</p>
<p>some text
</p>