CSS Foundations, pt 2


Published on

Published in: Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

CSS Foundations, pt 2

  1. 1. CSS Foundations, pt 2 22-3375 Web Design I // Columbia College Chicago
  2. 2. Review
 What is css and how it’s relationship to your html files Three different approaches to applying your css to the html How the browser interprets the “cascade” of style rules How to write CSS rules Understand basic css properties for text styling How to add class and id selectors to your html for more styling control
  3. 3. How to add css to your document
  4. 4. There are 2 basic ways to add styles to your html page:
 External (linked)
 <head> Internal

  5. 5. External 
 <link rel="stylesheet" type="text/css" href="stylesheet.css">
 Except in special circumstances, best practice is to keep all your styles in a separate css document. Linked stylesheets can be applied across multiple documents and sites.
  6. 6. Internal (embedded) 
 <style> p {color: red} </style>
 You can add styles directly into your html page using the “style” element in the <head> of your document. Embedded styles apply ONLY to that 
 html document.
  7. 7. Internal (inline) 
 <p style=”color: red”>Red Text</tag>
 You can add styles directly into your html markup using the “style” attribute on opening tag of your element. This is called an “inline” style. Inline styles apply ONLY to that specific instance of the element.
  8. 8. Best Practice
 In most cases you should use the external method of adding styles to your html page. Writing the css in the <head> of your document is acceptable if you definitely only want to apply the styles to a single page. However, adding your styles “inline” — inside a html starting tag, e.g. <p style=”font-size: 14px”> — should be avoided. 

  9. 9. Class Exercise ! ! download class tutorial files create new css file in ‘review’ folder link to the css file from review.html file 

  10. 10. CSS Selectors
  11. 11. p Type (element) # ID . Class

  12. 12. Type (element) Selectors 
 body {declaration}
 p {declaration}
 h1 {declaration}
 ul {declaration}
 The simplest selector is the type selector, which targets an html element by name.
  13. 13. The essential selector types (elements)
 Structure Body
 Elements Formatting
 Elements html p em body br i h1 – h6 strong ul b ol q a blockquote img span div
  14. 14. div elements
 Div elements allow you to group a set of elements together in one block-level element. ! 
 <div id=”head”> <a bunch of elements></> </div>

  15. 15. span elements
 span elements are the inline equivalent of divs. ! <p>Here is some text <span class=”red-text”> with a span</span> added.</p> 
 Spans are the equivalent of ‘character’ styles 
 in InDesign.

  16. 16. type selectors vs IDs & Classes
 Type selectors use the tag names that are built into HTML. 
 IDs and classes use names that you define, and are added to html elements to make them more specific.

  17. 17. ID Selectors
 #logo {declaration}" CSS 
 <img id=”logo” src=”” alt=””>
 HTML An ID is an html attribute that is added to your html markup. You reference that ID in your css with a hash.
  18. 18. Class Selectors
 .ingredients {declaration}" CSS 
 <ul class=”ingredients”>
 HTML A class is an html attribute that is added to your html markup. You reference that ID in your css with a period.
  19. 19. IDs vs Classes
 The most important difference between IDs and classes is that there can be only one ID on a page, but multiple classes. An ID is more specific than a class. An element can have both an ID and multiple classes.
  20. 20. IDs vs Classes
 ID: #344-34-4344 Class: Male Class: Student ID: #123-54-9877 Class: Female Class: Student
  21. 21. Descendant Selectors
 #sidebar .author {declaration}" HTML
 <div id=”sidebar”>
 <p class=”author”></p>
 A space between two selectors indicates a descendant selector. In the example above, the style is targeted to an element with the class “author” inside the id “sidebar”.
  22. 22. Multiple classes
 .ingredients.time {declaration}" HTML
 <div class=”ingredients time”>
 Elements can have multiple classes, giving you more control. The are written in the CSS in the exact order they appear in the html, with no spaces.
  23. 23. Combining IDs and classes
 #wrapper.ingredients.time {declaration}" HTML
 <div id=”wrapper” class=”ingredients time”>
 Elements can have both ids and classes. While an element can have only one id, it can have multiple classes.
  24. 24. Class Exercise ! Copy the following values from another site: 

  25. 25. The Box Model:
 Defining the dimensions
  26. 26. There are five basic properties for defining your “boxes”: display width and height padding margins border

  27. 27. CSS Box Model All HTML elements can be considered as boxes or blocks. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. ! Inspect Element 3d view in Firefox
  28. 28. Total dimensions The actual width or height of any object is the total of the content width, padding, borders, and margins. .size-me {
 width: 200px; 
 padding: 10px;
 border: 2px;
 margin: 20px;
 }" The actual width: 254px content: 200px
 padding-left: 10px
 padding-right: 10px
 border-right: 2px
 border-left: 2px
 margin-right: 20px
 margin-left: 20px

  29. 29. Display property By default, certain elements in your html have a display property of inline or block. Block elements takes up the full width available, and forces a line above and below. Examples include <p>, <div>, <ul>, <blockquote> and all headers. 
 <div></div> <p></p> <ul></ul>
  30. 30. Display property Inline elements can be inserted within block elements or other inline elements and do no create additional space or line breaks. Examples include <img>, <em>, <strong>, <a>, and <span>. 
 <p> <p></p> <p></p> <a></a> </p>
  31. 31. Display property There are four values that you can give to the display property: display: block; display: inline; display: inline-block; display: none ! Inline-block is a special value that allows an element to stay inline with its containing element, but allows you to control it’s dimensions as if it were a block element. display: none removes the element. 

  32. 32. Display property For example, by default, a <li> element is set to display: block. If we change that value in our css to: li {display: inline-block;} Then this: Changes to this:
 <ul> <ul> <li> </li> <li> </li> <ul> <li> <ul> </li> <li> </li>
  33. 33. Class Exercise ! 1 Inline and Block 

  34. 34. Class Exercise ! 2 Borders and Margins 

  35. 35. Defining dimension: width and height You can set the width and height of any element that has a display property of block or inline-block. As with type, you can set dimension in pixels (px), ems, or percentage (%). Setting any width with pixels is referred to as fixed-width, and setting width in ems or percentages is referred to as flexible-width. .size-me {
 width: 200px; 
 height: 200px;
 } ! !
  36. 36. Defining dimension: min- and maxInstead of absolutely defining the width and height of your elements, you can set minimum and maximum widths and heights. This allows you to resize elements based on the browser or their parent elements. The idea of creating flexible content that adjusts to the user’s browser/device is at the core of what is referred to as responsive design. .size-me {
 min-width: 200px; 
 max-width: 100px;
  37. 37. Defining dimension: min-width and max-width ! ! !
  38. 38. Defining dimension: min-width and max-width ! ! !
  39. 39. Defining padding & margins You can set the padding and margin properties of any element in css. Margin and padding dimensions can be also pixels (px), ems, or percentage (%). .space-me {
 padding: 10px; 
 margin-bottom: 20px;
 } ! ! !
  40. 40. Defining padding & margins While you can add padding and margins to inline elements, not all of your properties will apply (vertical spacing, see below). ! ! !
  41. 41. Collapsing margins
 When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths. In the example below, box1 has a taller margin than box2, so only that margin will be used (not added together). ! !
  42. 42. CSS Shorthand
 When setting sizes for padding, margins and borders, instead of this: .box {
 padding-top: 10px; 
 padding-right: 15px;
 padding-bottom: 10px; 
 padding-left: 15px;
 } 1 4 2 Use this: .box {
 padding: 10px 15px 10px 15px;
 }" The values start at the top and go around the element clockwise. ! 3
  43. 43. CSS Shorthand
 If your top/bottom and left/right values are the same, you can shorten the declaration even more: .box {
 padding: 10px 15px;
 }" Where the first value is for the top and bottom, and the second is for left and right. ! ! 1 2 2 1
  44. 44. Defining borders You can create a border around any element with css; you can create the same border on each side, or customize the color, width and border style of each side. ! There are 3 properties to define with each border: 
 border-width: 1px; border-style: solid; (dotted, dashed, etc) border color: #666666; ! ! !
  45. 45. CSS Shorthand
 Borders can also be shortened, from this: .box {
 border-width: 1px;
 border-style: solid;
 border-color: #888888
 }" to this: .box {
 border: 1px solid #888888;
 }" Note that there is only a single space between each value, and they should follow the order shown above. !
  46. 46. Defining borders 
 h3 {
 border-bottom: 1px solid #444444;
 } ! !
  47. 47. Class Exercise ! 3 Centered, Fixed-Width Page 

  48. 48. The Box Model:
  49. 49. There are four basic declarations 
 you can use to position your boxes: float: left (or right) position: relative position: fixed position: absolute

  50. 50. position: static Static positioning is the default – this is referred to as the “normal flow”. block boxes are positioned on a page one after the other (in the order they're written in the HTML). They start in the upper left of the containing box and stack from top to bottom. The distance between each box is defined by the margins with top and bottom margins collapsing into one another. ! ! <div id=”header”></div> ! <div id=”content”></div> <ul id=”sidebar-nav”></ul>
  51. 51. float A floated element takes the element out of the normal flow and moves it to the far right or left of the containing element. Existing content will then flow around it. Floated elements should always have at least a width property. .photo {
 float: left;
 max-width: 150px;
 }" ! !
  52. 52. 4 Float ! 
 .photo {
 float: left;
 max-width: 150px;
 }" ! !
  53. 53. Class Exercise ! 5 Positioning 

  54. 54. Positioning Properties There are four values that you can give to the position property: ! static Elements renders in order, as they appear in the document flow. This is default. relative The element is positioned relative to its static position, so “left:20” adds 20 pixels to the element’s LEFT position. absolute The element is positioned relative to its first positioned (not static) ancestor element (usually, the first parent with position:relative). 
 fixed The element is positioned relative to the browser window.
  55. 55. boxes exercise .box {
 "" width: 300px;
 "" height: 300px;
 "" border: 1px solid #333;
 "" margin: 10px;
 "" display: inline-block;
 }" " .relative {
 "" position: relative;
 "" top: 50px;
 "" left: -50px;
 }" .fixed {
 "" position: fixed;
 "" bottom: 0;
 "" left: 0;
 }" !
  56. 56. boxes exercise .box.absolute {
 "" position: relative;
 }" .box.absolute p {
 "" position: absolute;
 "" top: 0;
 "" right: 0;
 "" background: #444;
 "" padding: 10px;
 "" margin: 0;
 "" color: #fff;
 }" ! ! !
  57. 57. relative A relative positioned element moves the element out of it’s position in the normal flow, and allows you to move it “relative” to that location. The space taken by the original location is retained in the flow. .date {
 position: relative;
 top: 40px;
 left: -105px;
 }" ! !
  58. 58. relative exercise ! ! ! ! ! .date {
 position: relative;
 top: 40px;
 left: -105px;
  59. 59. fixed A fixed element is taken complete out of the document flow, and is positioned relative to the browser window.
 .create-change {
 position: fixed;
 bottom: 40px;
 right: 0;
 }" ! !
  60. 60. fixed exercise ! ! ! ! ! .create-change {
 position: fixed;
 bottom: 40px;
 right: 0;
  61. 61. absolute The element is positioned relative to its first positioned (not static) ancestor element. The element and its spacing are completely taken out of the flow. In the example below, the “.post” parent element is given a position value of relative, which lets us set it’s child element “.icon” within it.
 .post {
 position: relative;
 }" .icon {
 position: absolute;
 left: -60px;
 right: 0;
 }" ! !
  62. 62. absolute exercise ! ! ! .post {
 position: relative;
 }" .icon {
 position: absolute;
 left: -60px;
 right: 0;
 }" ! !