Part 3: CSS - Swag to the Maximum

Presented by

Agenda

  • What is/Why CSS?
  • Seperating content from presentation?
  • CSS Syntax
  • How to include CSS?
  • Style rules
  • Tools and references
  • Question time

What is CSS?

  • CSS stands for (C)ascading (S)tyle (S)heets
  • Used for describing the look and formatting of a document
  • Stylesheet language, not a programming language
    • Newer versions allow some logic like finding the width/height of an element
    • Also allows animations
  • Simple, rule-based description of how elements should look

Why CSS?

  • Allows/Promotes separation of content from presentation
  • Allows presentation to by imported into different documents
  • Takes advantage of tags and attributes in HTML to provide precise presentation rules

Decoupling content and presentation

  • Recall from last time that every HTML element has attributes like class and id that make things more semantic:
    <div id="content"
      class="widget"> <span
      class="userPrompt">Hello there!</span> <button
      class="widgetButton">Please click this
      button!</button> </div>
    Hello there!
  • We could also do some inline styling on the element using the style attribute:
    <div id="content"
      style="border: 1px solid black;" class="widget">
      <span class="userPrompt" style="font-weight: bold;"
      >Hello there!</span> <button
      class="widgetButton" style="background: #2d6cc0; padding:
      15px; color: white" >Please click this button!</button>
      </div>
    Hello there!
  • As you can imagine, using the style attributes everywhere scales poorly
  • Using CSS we can take advantage of the elements and use of the class and id attributes:
    button { /* These rules apply
      to all buttons */ background: #2d6cc0; /* UCR Blue */ padding: 15px;
      /* White space around text */ color: white; /* Text color */ }
    
    #content { /* Adds a solid black line around the element with id
      content */ border: 1px solid black; }
    
    .userPrompt { /* bolds the text in the elements with a class of
      userPrompt */ font-weight: bold; }
  • So now we can omit the style attribute and totally separate the content from the styling

CSS Syntax: Basic Selectors

  • Selectors allow you to target certain HTML elements
    /* Selects all button elements */ button {
    text-decoration: underline; }
  • These are the most basic selectors:
    /* Selects all elements with
    name "element" */ element { /* rules */ }
    
    /* Selects the element that has an ID named "ID" */ #ID { /* rules */
    }
    
    /* Selects any element with a class named "class" */ .class { /* rules
    */ }
  • Selectors can be comma-separated:
    /* This rule applies to all
    buttons and headers */ h1, h2, h3, h4, h5, h6, button { background:
    #2d6cc0; color: white; }

CSS Syntax: Fancier Selectors

  • Dat wildcard
    /* Selects everything */ * {
    display: none; }
  • Contextual Selection:
    /* Select all spans inside of
    divs */ div span { /* rules */ }
    
    /* Select all paragraphs whose parents are divs */ div > p { /* rules
    */ }
    
    /* Select all spans immediately after divs */ div + span { /* rules */
    }
  • Select by attribute:
    /* Select every element with
    attribute "title" */ [title] { /* rules */ }
    
    /* Select every element with attribute "href" == "https://bit.ly" */
    [href=https://bit.ly] { /* rules */ }
    
    /* Select every img with attribute "title" that has "hello" */
    img[title~=hello] { /* rules */ }

CSS Syntax: Pseudo-Selectors

  • Pseudo-Selectors allow you to style elements when they change "state"
  • For example, when you hover over a button, the "hover" state is activated. You can define the styling for that hover state:
    .hoverDemo { 
      background: #2d6cc0; padding: 15px; color: white; font-weight: bold;
    }
    
    .hoverDemo:hover { 
      background: #f1ab00;
    }
  • The :hover is a pseudo-selector on the hover state of a button. There are a lot of pseudo-selectors.

CSS Syntax: Selector Subtleties

  • Be careful when combining selectors, white space matters
    /* Selects all divs that have a
    class "class" */ div.class { /* rules */ }
    
    /* Selects all elements with class "class" inside of a div */ div
    .class { /* rules */ }

How to include CSS in my HTML page?

  1. Use the style attribute (bad, doesn't scale)
  2. Use the <style> tag in your <head> (better, but not portable):
    <!doctype html> <html>
    <head> <style type="text/css"> button {
    background: blue; } </style> </head>
    </html>
  3. Use the <link> tag in your <head> (best):
    /* main.css */ button { background: blue;
    }
    <!-- index.html --> <!doctype html>
    <html> <head> <link rel="stylesheet"
    href="main.css"> </head> </html>

Basic style rules

  • In CSS, the style rules follow this basic syntax:
    element { rule1: value1 value2
      ...; rule2: value1 value2 ...; }
    • The name of the rule is followed by a colon
    • The list of values are separated by spaces and must end with a semicolon
    • Any element can have any amount of rules
    • Every rule only has a defined amount of valid values
Since we know all about CSS Selectors and HTML, consider:
<!doctype html> <html> <head>
<link rel="stylesheet" href="main.css">
</head> <body> <div id="content"
role="main"> <h2>Spidey's Fan Page!</h2>
<img
src="http://comicattack.net/wp-content/uploads/2010/01/jap-spid-3.jpg">
<div id="about"> <h4>About Spiderman</h4>
<p>Spidermen is a cool guy and he doesn't afraid of
anything</p> <button id="donate">Click here to
donate your powers to spidhermen</button> </div>
</div> </body> </html>

For the following examples, assume our code goes into main.css

By default it looks like this:

Spidey's Fan Page!

About Spiderman

Spidermen is a cool guy and he doesn't afraid of anything


Basic Style Rules

  • Background - Sets the background of an element
  • Color - Sets the color of the text in an element
  • Border - Puts a border around an element
  • #content { /* Background can be a
      color name, a hex value, or rgb */ background: blue; background:
      #0000ff; background: rgb(0, 0, 255);
    
      /* Or it can be an image */ background:
      url(http://comicattack.net/wp-content/uploads/2010/01/jap-spid-3.jpg);
    
      /* Colors can be anything but an image (I think) */ color: white;
    
      /* Borders have a line thickness, type, and color */ border: 2px
      dotted blue; }

Spidey's Fan Page!

About Spiderman

Spidermen is a cool guy and he doesn't afraid of anything


Basic Style Rules

  • Notice how the text is really packed in next to the borders?
  • Padding - Adds white space around text in element
  • Margin - Adds white space around element
  • #content { background: white;
      border: 1px solid black; padding: 15px; }
    
    #donate { background: blue; border: 1px solid blue; color: white;
    
      /* Padding and margin need 4 values for top, bottom, left, and right
      */ padding: 15px 15px 15px 15px;
    
      /* If all of the numbers are the same, there's shorthand */ padding:
      15px;
    
      /* You can also specify only one direction */ margin-left: 30px;
      }

Spidey's Fan Page!

About Spiderman

Spidermen is a cool guy and he doesn't afraid of anything


Text decoration and alignment

  • text-decoration - Defines how to decorate text (underlined, italics, etc)
  • text-align - Defines how to align text (left, center, right)
  • font-weight - Defines how "heavy" (bold) the text is
  • font-size - Defines the size of the font
  • Lets make sure everyone knows how cool spiderman is
  • #content { /* Center all text */ text-align:
      center; }
    
    #about p { /* Font-weight can be a word lik normal or bold, or a value
      between 0 and 1000 */ font-weight: bold; text-decoration: underline;
      font-size: 50px; }

Spidey's Fan Page!

About Spiderman

Spidermen is a cool guy and he doesn't afraid of anything


Tools and References

  • For references, the sites listed for HTML have CSS sections that are just as good
  • Some cool tools for playing with CSS without all the set up:
    1. Codepen
    2. JSFiddle
    3. Plunker

Questions?