Intro to HTML and CSS - Class 2 Slides
-
Upload
heather-rock -
Category
Technology
-
view
134 -
download
3
description
Transcript of Intro to HTML and CSS - Class 2 Slides
![Page 1: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/1.jpg)
BEGINNING HTML AND CSSCLASS 2HTML/CSS ~ Girl Develop It ~
![Page 2: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/2.jpg)
![Page 3: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/3.jpg)
CSSStands for Cascading Style Sheets.
Refers to the hierarchical way that styles get applied tohtml elements.
![Page 4: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/4.jpg)
WHAT WE'LL LEARN TODAYA little CSS history.Terminology and syntax.Ways to attach CSS to your page.Selectors.Colors and Fonts.
![Page 5: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/5.jpg)
HISTORY OF CSSThe 90s
HTML pages read from top to bottom, black font, nocolor, and all default browser styles.Fine for science papers, but designers said "WeWant More!"1993: The first graphical browser is born — "Mosaic"1994: World Wide Web Consortium is inaugurated(W3C) and the World Wide Web is born.
![Page 6: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/6.jpg)
HISTORY OF CSSLate 90s
1996: Specifications for CSS1 are released (a yearbefore HTML 4.0).CSS1 is buggy and poorly adopted.1998: W3C releases CSS2.CSS2 is buggy and poorly adopted.Meanwhile, table-based layouts and browser warsare rampant!
![Page 7: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/7.jpg)
HISTORY OF CSSThe 00s
1999 - 2000: Work is begun on CSS2.1 to fix bugs inCSS 2.2004: The working draft becomes a candidate foradoption by the W3C. It reverts back to working draftin 2005.2007: The working draft again becomes a candidatefor adoption by the W3C2010: It reverts back to a working draft.2011: June 7th, CSS2.1 is finally "sanctified" by theW3C.
![Page 8: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/8.jpg)
HISTORY OF CSSCSS3
CSS3, begun in 2000, is still mostly in working-draftstage.Modular release (rather than one single adoption).2013: Most modules still in working-draft stage...some released and adopted by modern browsers.
![Page 9: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/9.jpg)
CSS: WHAT DOES IT LOOK LIKE?
![Page 10: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/10.jpg)
![Page 11: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/11.jpg)
LET'S CODE SOME CSS!<head> <title> My Very First Web Page! </title> <style> h1 { color: blue; background-color: yellow; } </style></head>
![Page 12: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/12.jpg)
NOW SAVE YOUR PAGEOpen it up in a browser
Does your heading look different?
![Page 13: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/13.jpg)
CSS TERMINOLOGY:CSS is composed of style "rules"
Here is a style rule:
![Page 14: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/14.jpg)
SYNTAX IS IMPORTANT!h1 { color: blue; background-color: yellow;}
There are no limits to the number of declarations in astyle rule.Common convention is to use lower case throughout.Don't forget the semicolon at the end of thedeclarations!Don't forget the closing curly bracket!
![Page 15: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/15.jpg)
ATTACHING CSS TO YOUR WEB PAGEThere are three ways
InlineEmbeddedLinked
![Page 16: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/16.jpg)
INLINE<p style="color: red;">Some text.</p>
The style goes right inside the opening HTML tag.Uses "style", which is an HTML attribute.Difficult to use in large projects.
![Page 17: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/17.jpg)
EMBEDDEDThis is how we did it in our opening exercise.
"Embedded" inside the <head> element between anopening and closing <style> tag.
If styles are identical across multiple pages in your site --you'd have to copy and paste for each page.
![Page 18: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/18.jpg)
LINKEDAll your styles go on their own style sheet!A <link> tag in your HTML file points to the location of thestyle sheet
<head> <title> My Very First Web Page! </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
![Page 19: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/19.jpg)
ADVANTAGES OF LINKED (EXTERNAL)STYLE SHEETS:
Shared resource for several pages.Reduced file size & bandwidthEasy to maintain in larger projects.
![Page 20: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/20.jpg)
LET'S CODE IT (PART 1)1. Open a new page in your text editor.
2. Copy the rule you created between the style tags onyour index.html (not the tags themselves, though).
3. Paste it in your new page.
4. Save your page inside the "styles" folder you createdearlier. Name it "styles.css".
![Page 21: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/21.jpg)
LET'S CODE IT (PART 2)5. Delete the style tags and everything within them on your
index.html page.
6. In their place, code the following:
<link rel="stylesheet" type="text/css"href="styles/styles.css">
7. Save your index.html page and open it in a browser.
Does the style still show on your page?
![Page 22: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/22.jpg)
SELECTORSThe first item in a style rule.Describes what is being styled.
h1 { color: blue; background-color: yellow;}
![Page 23: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/23.jpg)
WHAT CAN WE USE AS SELECTORS?HTML tags.Classes and ids.Pseudo classes.Any combination of the above!
![Page 24: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/24.jpg)
HTML TAGS:p { property: value;}
This would select every paragraph element.img { property: value;}
This would select every image element....but what if you need more control?
![Page 25: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/25.jpg)
CLASSES AND IDS"Class" and "ID" are HTML attributes.Attributes "describe" elements and are followed byvalues.In your HTML, it looks like this:<p id="intro"><span class="warning">
![Page 26: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/26.jpg)
IDS VS. CLASSESID: An id can only be used once on a page. Refers to asingular page element (like a footer).
Think ~ A student ID number
Class: Lots of elements can have the same class. I.E.There can be many spans with a class of "warning".
Think ~ A student as a member of a class
![Page 27: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/27.jpg)
CLASSES<p class="warning">
.warning { property: value;}
A class name is preceeded by a period in your stylerule.
![Page 28: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/28.jpg)
IDS<p id="intro">
#intro { property: value;}
An id name is preceeded by a pound sign in your stylerule.
![Page 29: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/29.jpg)
NAMING YOUR CLASS OR ID:Can use letters, numbers, underscore or dash (but don'tstart with a number or a dash followed by number).
No spaces — use a hyphen or underscore
CSS is case-insensitive, but the convention is to use alllowercase letters.
In your HTML, class and id names are in quotes (justlike all other attribute values).
![Page 30: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/30.jpg)
LET'S CODE IT!Add these rules to your "styles.css" file:
#intro { color: blue; }
.warning { color: red; }
Add an id of "intro" to your first paragraph.
Find a word or sentence in your "index.html" file and wrapin span tags with a class of "warning".
![Page 31: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/31.jpg)
![Page 32: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/32.jpg)
PSEUDO CLASSESDescribes a "current condition" of an HTML element,rather than an "attribute".Link pseudo classes are the most common
example: a:hover
to style a link when user "hovers" over it
![Page 33: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/33.jpg)
LINK PSEUDO CLASSESa:link ~unvisited linka:visited ~visited linka:hover ~mouse over linka:active ~activated link
If present, a:hover must come after a:link and a:visited.If present, a:active must come after a:hover.
![Page 34: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/34.jpg)
LET'S SPICE UP OUR LINKS! a:link { color: blue; } a:visited { color: yellow; } a:hover { color: green; } a:active { color: purple; }
![Page 35: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/35.jpg)
COMPOUND SELECTORSCombining selectors to get really specific!
p em { property: value;}
Selects all em elements that are within a paragraph#intro a { property: value;}
Selects all link elements in elements with an id of "intro".
![Page 36: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/36.jpg)
LET'S ADD A COMPOUND SELECTORRULE!
#intro a { font-style: italic; }
![Page 37: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/37.jpg)
STYLING WITH COLOR AND FONTSCOLORThe color property sets the color of the font.The background-color property sets the color of thebackground.
Color value can be defined in one of three ways:By a recognized color nameBy a hexadecimal valueBy an RGB value
![Page 38: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/38.jpg)
RECOGNIZED COLOR NAMESThe 17 standard colors are:
aqua, black, blue, fuchsia, gray,
grey, green, lime, maroon, navy,
olive, purple, red, silver, teal,
white, and yellow.
There are 141 named colors:http://www.w3schools.com/cssref/css_colornames.asp
![Page 39: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/39.jpg)
HEXADECIMAL VALUESExample — color: #A53C8D
A pound sign followed by three pairsThe first pair equates to red valueThe second pair equates to green valueThe third pair equates to blue value
![Page 40: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/40.jpg)
RGB VALUESExample — color: rgb(165, 60, 141)
Three comma-separated numbers from 0 to 255The first number equates to red valueThe second number equates to green valueThe third number equates to blue value
CSS3 introduces a 4th value, "a", setting opacityExample — color: rgba(165, 60, 141, 0.5)
![Page 41: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/41.jpg)
FONT5 DIFFERENT PROPERTIES TO STYLE FONT!
1. font-styleexample: font-style: italic;values: "normal", "italic", or "oblique"
2. font-variantexample: font-variant: small-caps;values: "normal", "small-caps", or "inherit"
![Page 42: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/42.jpg)
3. font-weightexample: font-weight: bold;values: "normal", "bold", "bolder", "lighter",
4. font-sizeexample: font-size: 12px;values:
fixed: pixels (ie 12px)relative: percents (ie 100%) and ems (ie 1.5em)
![Page 43: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/43.jpg)
5. font-familyexample: font-family: Corbel,'Helvetica Neue', Helvetica, Arial,sans-serif;
Computers don't all have the same fonts installed...soprovide alternatives
Specific to general, in a comma-separated list.
Fonts with two-word names are in quotes
![Page 44: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/44.jpg)
BONUS FONT PROPERTIES!6. text-transform
example: text-transform: uppercase;values: "capitalize", "uppercase", "lowercase", or"none"
7. line-heightexample: line-height: 1.5;values: numbers, percents, pixels, or "ems"
![Page 45: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/45.jpg)
SHORTHAND FONT DECLARATIONexample:font: italic small-caps bold 34px/150% "Times New Roman", Times, serif;
font-style → font-variant → font-weight → font-size / lineheight → font-family
you must declare at minimum the font-size and font-family example: font: 34px "Times New Roman", Times, serif;
![Page 46: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/46.jpg)
LET'S CODE IT!Add the shorthand font rule to your heading
h1 { font: italic bold 34px Corbel,'Helvetica Neue',Helvetica, Arial, sans-serif; }
![Page 47: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/47.jpg)
CASCADINGStyles "cascade" down until changed
p{ color:blue; font-family: 'Helvetica';}.red{ color:red;}#special{ font-family: Arial;}
<p>Paragraph</p> <p class ="green">Paragraph</p> <p class ="red">Paragraph</p> <p class = "red" id ="special">Paragraph</p>
![Page 48: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/48.jpg)
CSS PROPERTIESMany CSS properties have self-explanatory names:
background-colorfont-familyfont-sizecolorwidthheight
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Comprehensive list of all CSS properties:
![Page 49: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/49.jpg)
QUESTIONS?
?
![Page 50: Intro to HTML and CSS - Class 2 Slides](https://reader034.fdocuments.us/reader034/viewer/2022051314/54c821c94a7959e76d8b456b/html5/thumbnails/50.jpg)