BEGINNING HTML AND CSS
CLASS 2HTML/CSS ~ Girl Develop It ~
CSS
Stands for Cascading Style Sheets.
Refers to the hierarchical way that styles get applied to
html elements.
WHAT WE'LL LEARN TODAY
A little CSS history.
Terminology and syntax.
Ways to attach CSS to your page.
Selectors.
Colors an...
HISTORY OF CSS
The 90s
HTML pages read from top to bottom, black font, no
color, and all default browser styles.
Fine for ...
HISTORY OF CSS
Late 90s
1996: Specifications for CSS1 are released (a year
before HTML 4.0).
CSS1 is buggy and poorly adop...
HISTORY OF CSS
The 00s
1999 - 2000: Work is begun on CSS2.1 to fix bugs in
CSS 2.
2004: The working draft becomes a candid...
HISTORY OF CSS
CSS3
CSS3, begun in 2000, is still mostly in working-draft
stage.
Modular release (rather than one single a...
CSS: WHAT DOES IT LOOK LIKE?
LET'S CODE SOME CSS!
<head>
<title>
My Very First Web Page!
</title>
<style>
h1 {
color: blue;
background-color: yellow;
}...
NOW SAVE YOUR PAGE
Open it up in a browser
Does your heading look different?
CSS TERMINOLOGY:
CSS is composed of style "rules"
Here is a style rule:
SYNTAX IS IMPORTANT!
h1 {
color: blue;
background-color: yellow;
}
There are no limits to the number of declarations in a
...
ATTACHING CSS TO YOUR WEB PAGE
There are three ways
Inline
Embedded
Linked
INLINE
<p style="color: red;">Some text.</p>
The style goes right inside the opening HTML tag.
Uses "style", which is an H...
EMBEDDED
This is how we did it in our opening exercise.
"Embedded" inside the <head> element between an
opening and closin...
LINKED
All your styles go on their own style sheet!
A <link> tag in your HTML file points to the location of the
style she...
ADVANTAGES OF LINKED (EXTERNAL)
STYLE SHEETS:
Shared resource for several pages.
Reduced file size & bandwidth
Easy to main...
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 on
your...
LET'S CODE IT (PART 2)
5. Delete the style tags and everything within them on your
index.html page.
6. In their place, cod...
SELECTORS
The first item in a style rule.
Describes what is being styled.
h1 {
color: blue;
background-color: yellow;
}
WHAT CAN WE USE AS SELECTORS?
HTML tags.
Classes and ids.
Pseudo classes.
Any combination of the above!
HTML TAGS:
p {
property: value;
}
This would select every paragraph element.
img {
property: value;
}
This would select ev...
CLASSES AND IDS
"Class" and "ID" are HTML attributes.
Attributes "describe" elements and are followed by
values.
In your H...
IDS VS. CLASSES
ID: An id can only be used once on a page. Refers to a
singular page element (like a footer).
Think ~ A st...
CLASSES
<p class="warning">
.warning {
property: value;
}
A class name is preceeded by a period in your style
rule.
IDS
<p id="intro">
#intro {
property: value;
}
An id name is preceeded by a pound sign in your style
rule.
NAMING YOUR CLASS OR ID:
Can use letters, numbers, underscore or dash (but don't
start with a number or a dash followed by...
LET'S CODE IT!
Add these rules to your "styles.css" file:
#intro {
color: blue;
}
.warning {
color: red;
}
Add an id of "i...
PSEUDO CLASSES
Describes a "current condition" of an HTML element,
rather than an "attribute".
Link pseudo classes are the...
LINK PSEUDO CLASSES
a:link ~unvisited link
a:visited ~visited link
a:hover ~mouse over link
a:active ~activated link
If pr...
LET'S SPICE UP OUR LINKS!
a:link {
color: blue;
}
a:visited {
color: yellow;
}
a:hover {
color: green;
}
a:active {
color:...
COMPOUND SELECTORS
Combining selectors to get really specific!
p em {
property: value;
}
Selects all em elements that are ...
LET'S ADD A COMPOUND SELECTOR
RULE!
#intro a {
font-style: italic;
}
STYLING WITH COLOR AND FONTS
COLOR
The color property sets the color of the font.
The background-color property sets the c...
RECOGNIZED COLOR NAMES
The 17 standard colors are:
aqua, black, blue, fuchsia, gray,
grey, green, lime, maroon, navy,
oliv...
HEXADECIMAL VALUES
Example — color: #A53C8D
A pound sign followed by three pairs
The first pair equates to red value
The s...
RGB VALUES
Example — color: rgb(165, 60, 141)
Three comma-separated numbers from 0 to 255
The first number equates to red ...
FONT
5 DIFFERENT PROPERTIES TO STYLE FONT!
1. font-style
example: font-style: italic;
values: "normal", "italic", or "obli...
3. font-weight
example: font-weight: bold;
values: "normal", "bold", "bolder", "lighter",
4. font-size
example: font-size:...
5. font-family
example:
font-family: Corbel,'Helvetica Neue', Helvetica, Arial,
sans-serif;
Computers don't all have the s...
BONUS FONT PROPERTIES!
6. text-transform
example: text-transform: uppercase;
values: "capitalize", "uppercase", "lowercase...
SHORTHAND FONT DECLARATION
example:
font: italic small-caps bold 34px/150% "Times New Roman", Times, serif;
font-style → f...
LET'S CODE IT!
Add the shorthand font rule to your heading
h1 {
font: italic bold 34px Corbel,'Helvetica Neue',
Helvetica,...
CASCADING
Styles "cascade" down until changed
p{
color:blue;
font-family:'Helvetica';
}
.red{
color:red;
}
#special{
font-...
CSS PROPERTIES
Many CSS properties have self-explanatory names:
background-color
font-family
font-size
color
width
height
...
QUESTIONS?
?
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
Upcoming SlideShare
Loading in …5
×

Intro to HTML and CSS - Class 2 Slides

3,128 views

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,128
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
82
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Intro to HTML and CSS - Class 2 Slides

  1. 1. BEGINNING HTML AND CSS CLASS 2HTML/CSS ~ Girl Develop It ~
  2. 2. CSS Stands for Cascading Style Sheets. Refers to the hierarchical way that styles get applied to html elements.
  3. 3. WHAT WE'LL LEARN TODAY A little CSS history. Terminology and syntax. Ways to attach CSS to your page. Selectors. Colors and Fonts.
  4. 4. HISTORY OF CSS The 90s HTML pages read from top to bottom, black font, no color, and all default browser styles. Fine for science papers, but designers said "We Want More!" 1993: The first graphical browser is born — "Mosaic" 1994: World Wide Web Consortium is inaugurated (W3C) and the World Wide Web is born.
  5. 5. HISTORY OF CSS Late 90s 1996: Specifications for CSS1 are released (a year before 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 wars are rampant!
  6. 6. HISTORY OF CSS The 00s 1999 - 2000: Work is begun on CSS2.1 to fix bugs in CSS 2. 2004: The working draft becomes a candidate for adoption by the W3C. It reverts back to working draft in 2005. 2007: The working draft again becomes a candidate for adoption by the W3C 2010: It reverts back to a working draft. 2011: June 7th, CSS2.1 is finally "sanctified" by the W3C.
  7. 7. HISTORY OF CSS CSS3 CSS3, begun in 2000, is still mostly in working-draft stage. Modular release (rather than one single adoption). 2013: Most modules still in working-draft stage ...some released and adopted by modern browsers.
  8. 8. CSS: WHAT DOES IT LOOK LIKE?
  9. 9. LET'S CODE SOME CSS! <head> <title> My Very First Web Page! </title> <style> h1 { color: blue; background-color: yellow; } </style> </head>
  10. 10. NOW SAVE YOUR PAGE Open it up in a browser Does your heading look different?
  11. 11. CSS TERMINOLOGY: CSS is composed of style "rules" Here is a style rule:
  12. 12. SYNTAX IS IMPORTANT! h1 { color: blue; background-color: yellow; } There are no limits to the number of declarations in a style rule. Common convention is to use lower case throughout. Don't forget the semicolon at the end of the declarations! Don't forget the closing curly bracket!
  13. 13. ATTACHING CSS TO YOUR WEB PAGE There are three ways Inline Embedded Linked
  14. 14. 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.
  15. 15. EMBEDDED This is how we did it in our opening exercise. "Embedded" inside the <head> element between an opening and closing <style> tag. If styles are identical across multiple pages in your site -- you'd have to copy and paste for each page.
  16. 16. LINKED All your styles go on their own style sheet! A <link> tag in your HTML file points to the location of the style sheet <head> <title> My Very First Web Page! </title> <link rel="stylesheet" type="text/css" href="style.css"> </head>
  17. 17. ADVANTAGES OF LINKED (EXTERNAL) STYLE SHEETS: Shared resource for several pages. Reduced file size & bandwidth Easy to maintain in larger projects.
  18. 18. 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 on your index.html (not the tags themselves, though). 3. Paste it in your new page. 4. Save your page inside the "styles" folder you created earlier. Name it "styles.css".
  19. 19. 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?
  20. 20. SELECTORS The first item in a style rule. Describes what is being styled. h1 { color: blue; background-color: yellow; }
  21. 21. WHAT CAN WE USE AS SELECTORS? HTML tags. Classes and ids. Pseudo classes. Any combination of the above!
  22. 22. 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?
  23. 23. CLASSES AND IDS "Class" and "ID" are HTML attributes. Attributes "describe" elements and are followed by values. In your HTML, it looks like this: <p id="intro"> <span class="warning">
  24. 24. IDS VS. CLASSES ID: An id can only be used once on a page. Refers to a singular 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
  25. 25. CLASSES <p class="warning"> .warning { property: value; } A class name is preceeded by a period in your style rule.
  26. 26. IDS <p id="intro"> #intro { property: value; } An id name is preceeded by a pound sign in your style rule.
  27. 27. NAMING YOUR CLASS OR ID: Can use letters, numbers, underscore or dash (but don't start 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 all lowercase letters. In your HTML, class and id names are in quotes (just like all other attribute values).
  28. 28. 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 wrap in span tags with a class of "warning".
  29. 29. PSEUDO CLASSES Describes 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
  30. 30. LINK PSEUDO CLASSES a:link ~unvisited link a:visited ~visited link a:hover ~mouse over link a:active ~activated link If present, a:hover must come after a:link and a:visited. If present, a:active must come after a:hover.
  31. 31. LET'S SPICE UP OUR LINKS! a:link { color: blue; } a:visited { color: yellow; } a:hover { color: green; } a:active { color: purple; }
  32. 32. COMPOUND SELECTORS Combining 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".
  33. 33. LET'S ADD A COMPOUND SELECTOR RULE! #intro a { font-style: italic; }
  34. 34. STYLING WITH COLOR AND FONTS COLOR The color property sets the color of the font. The background-color property sets the color of the background. Color value can be defined in one of three ways: By a recognized color name By a hexadecimal value By an RGB value
  35. 35. RECOGNIZED COLOR NAMES The 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
  36. 36. HEXADECIMAL VALUES Example — color: #A53C8D A pound sign followed by three pairs The first pair equates to red value The second pair equates to green value The third pair equates to blue value
  37. 37. RGB VALUES Example — color: rgb(165, 60, 141) Three comma-separated numbers from 0 to 255 The first number equates to red value The second number equates to green value The third number equates to blue value CSS3 introduces a 4th value, "a", setting opacity Example — color: rgba(165, 60, 141, 0.5)
  38. 38. FONT 5 DIFFERENT PROPERTIES TO STYLE FONT! 1. font-style example: font-style: italic; values: "normal", "italic", or "oblique" 2. font-variant example: font-variant: small-caps; values: "normal", "small-caps", or "inherit"
  39. 39. 3. font-weight example: font-weight: bold; values: "normal", "bold", "bolder", "lighter", 4. font-size example: font-size: 12px; values: fixed: pixels (ie 12px) relative: percents (ie 100%) and ems (ie 1.5em)
  40. 40. 5. font-family example: font-family: Corbel,'Helvetica Neue', Helvetica, Arial, sans-serif; Computers don't all have the same fonts installed...so provide alternatives Specific to general, in a comma-separated list. Fonts with two-word names are in quotes
  41. 41. BONUS FONT PROPERTIES! 6. text-transform example: text-transform: uppercase; values: "capitalize", "uppercase", "lowercase", or "none" 7. line-height example: line-height: 1.5; values: numbers, percents, pixels, or "ems"
  42. 42. SHORTHAND FONT DECLARATION example: font: italic small-caps bold 34px/150% "Times New Roman", Times, serif; font-style → font-variant → font-weight → font-size / line height → font-family you must declare at minimum the font-size and font-family example: font: 34px "Times New Roman", Times, serif;
  43. 43. LET'S CODE IT! Add the shorthand font rule to your heading h1 { font: italic bold 34px Corbel,'Helvetica Neue', Helvetica, Arial, sans-serif; }
  44. 44. CASCADING Styles "cascade" down until changed p{ 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>
  45. 45. CSS PROPERTIES Many CSS properties have self-explanatory names: background-color font-family font-size color width height https://developer.mozilla.org/en- US/docs/Web/CSS/Reference Comprehensive list of all CSS properties:
  46. 46. QUESTIONS? ?

×