Downloaded 86 times
Uploaded byHeather Rock
3,462 views
Intro to HTML and CSS - Class 2 Slides
1. CSS stands for Cascading Style Sheets and refers to how styles are applied hierarchically to HTML elements. 2. There are three main ways to attach CSS to a webpage: inline, embedded, and linked. Linked style sheets keep the styles in a separate .css file for easy maintenance.3. CSS selectors allow targeting specific elements by HTML tag names, classes, IDs, and other attributes. Common selectors include colors, fonts, links, and compound selectors.
Recommended
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fvibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
Intro to HTML and CSS - Class 2 Slides
- 1.BEGINNING HTML ANDCSSCLASS 2HTML/CSS ~ Girl Develop It ~
- 3.CSSStands for CascadingStyle Sheets.Refers to the hierarchical way that styles get applied tohtml elements.
- 4.WHAT WE'LL LEARNTODAYA little CSS history.Terminology and syntax.Ways to attach CSS to your page.Selectors.Colors and Fonts.
- 5.HISTORY OF CSSThe90sHTML 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.
- 6.HISTORY OF CSSLate90s1996: 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!
- 7.HISTORY OF CSSThe00s1999 - 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.
- 8.HISTORY OF CSSCSS3CSS3,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.
- 9.CSS: WHAT DOESIT LOOK LIKE?
- 11.LET'S CODE SOMECSS!<head><title>My Very First Web Page!</title><style>h1 {color: blue;background-color: yellow;}</style></head>
- 12.NOW SAVE YOURPAGEOpen it up in a browserDoes your heading look different?
- 13.CSS TERMINOLOGY:CSS iscomposed of style "rules"Here is a style rule:
- 14.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!
- 15.ATTACHING CSS TOYOUR WEB PAGEThere are three waysInlineEmbeddedLinked
- 16.INLINE<p style="color: red;">Sometext.</p>The style goes right inside the opening HTML tag.Uses "style", which is an HTML attribute.Difficult to use in large projects.
- 17.EMBEDDEDThis is howwe 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.
- 18.LINKEDAll your stylesgo 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>
- 19.ADVANTAGES OF LINKED(EXTERNAL)STYLE SHEETS:Shared resource for several pages.Reduced file size & bandwidthEasy to maintain in larger projects.
- 20.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".
- 21.LET'S CODE IT(PART 2)5. Delete the style tags and everything within them on yourindex.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?
- 22.SELECTORSThe first itemin a style rule.Describes what is being styled.h1 {color: blue;background-color: yellow;}
- 23.WHAT CAN WEUSE AS SELECTORS?HTML tags.Classes and ids.Pseudo classes.Any combination of the above!
- 24.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?
- 25.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">
- 26.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 numberClass: 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
- 27.CLASSES<p class="warning">.warning {property:value;}A class name is preceeded by a period in your stylerule.
- 28.IDS<p id="intro">#intro {property:value;}An id name is preceeded by a pound sign in your stylerule.
- 29.NAMING YOUR CLASSOR 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 underscoreCSS 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).
- 30.LET'S CODE IT!Addthese 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".
- 32.PSEUDO CLASSESDescribes a"current condition" of an HTML element,rather than an "attribute".Link pseudo classes are the most commonexample: a:hoverto style a link when user "hovers" over it
- 33.LINK PSEUDO CLASSESa:link~unvisited linka:visited ~visited linka:hover ~mouse over linka:active ~activated linkIf present, a:hover must come after a:link and a:visited.If present, a:active must come after a:hover.
- 34.LET'S SPICE UPOUR LINKS!a:link {color: blue;}a:visited {color: yellow;}a:hover {color: green;}a:active {color: purple;}
- 35.COMPOUND SELECTORSCombining selectorsto 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".
- 36.LET'S ADD ACOMPOUND SELECTORRULE!#intro a {font-style: italic;}
- 37.STYLING WITH COLORAND 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
- 38.RECOGNIZED COLOR NAMESThe17 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
- 39.HEXADECIMAL VALUESExample —color: #A53C8DA pound sign followed by three pairsThe first pair equates to red valueThe second pair equates to green valueThe third pair equates to blue value
- 40.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 valueCSS3 introduces a 4th value, "a", setting opacityExample — color: rgba(165, 60, 141, 0.5)
- 41.FONT5 DIFFERENT PROPERTIESTO 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"
- 42.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)
- 43.5. font-familyexample:font-family: Corbel,'HelveticaNeue', Helvetica, Arial,sans-serif;Computers don't all have the same fonts installed...soprovide alternativesSpecific to general, in a comma-separated list.Fonts with two-word names are in quotes
- 44.BONUS FONT PROPERTIES!6.text-transformexample: text-transform: uppercase;values: "capitalize", "uppercase", "lowercase", or"none"7. line-heightexample: line-height: 1.5;values: numbers, percents, pixels, or "ems"
- 45.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-familyyou must declare at minimum the font-size and font-familyexample: font: 34px "Times New Roman", Times, serif;
- 46.LET'S CODE IT!Addthe shorthand font rule to your headingh1 {font: italic bold 34px Corbel,'Helvetica Neue',Helvetica, Arial, sans-serif;}
- 47.CASCADINGStyles "cascade" downuntil changedp{color:blue;font-family:'Helvetica';}.red{color:red;}#special{font-family:Arial;}<p>Paragraph</p><pclass="green">Paragraph</p><pclass="red">Paragraph</p><pclass="red"id="special">Paragraph</p>
- 48.CSS PROPERTIESMany CSSproperties have self-explanatory names:background-colorfont-familyfont-sizecolorwidthheighthttps://developer.mozilla.org/en-US/docs/Web/CSS/ReferenceComprehensive list of all CSS properties:
- 49.