Introduction to CSS (Cascading Style Sheets)

We will cover the following:

CSS Frontmatter

CSS Code Location

Whether using the external file or the header approach, CSS is meant to be readible and thus white space is ignored, semicolons are used to end property lines, and squiggly brackets are used to encapsulate each selector or rule.

There is a way to write shorthand to combine properties one a single line, but we will not cover this within this lecture.

Hierarchy:

There is an order to the cascade of styles when applied to a single HTML element: importance, specificity, and source order. Here is a document that details this cascading effect in more detail.

Given the following CSS:

/* A */
p.class1[attr='value']

/* B */
p.class1 { }

/* C */
p.class2 { }

/* D */
p { }

/* E */
p { property: value !important; }

and the following HTML:

<p style='/*F*/ property:value;' class='class1 class2' attr='value'>

The cascade is as follows:

Comments

Comments in CSS only have one style:

/* Handle basic element styling */
body {
  font-size: 62.5%  /* 1em = 10px */
}

CSS Selectors

CSS selectors act similar to HTML elements:

div { ... }

<div>...</div>
<div>...</div>

However, the use of CSS can allow us to reduce the amount of HTML code we need:

p {
  font-style: italic;
  font-weight: bold;
}

<p><strong><i>Some text.</i></strong></p>
<p><strong><i>Some more text.</i></strong></p>

Types of CSS selectors:

  1. Universal (*) 
      * {
   padding: 5px;
   border: 1px solid black;
   background: rgba(255,0,0,0.25)
  }
  2. Element (h1) 
      h1 {  
   font-size: 20px;  
  }  
  p {  
   color: green;  
  }
  3. Class (.classname) 
      .container {  
     margin: 10px;  
  }

     <div class='container'>  
     <h1> This is heading </h1>  
 </div>
  4. ID (#idname) - can only be assigned to one element (link) but are like class selectors 
      #para1 {  
     color: green;  
     font-size: 16px;  
  }

     <div>  
     <p id='para1'> This is a paragraph </p>  
 </div>

CSS selectors can also be combined to add specificity to certain elements:

.hotdog p {
  background: brown;
}
.hotdog p.mustard {
  background: yellow;
}

<div class="hotdog">
  <p>...</p>
  <p>...</p>
  <p class="mustard">...</p>
</div>

Note: there are further selectors such as pseudo-classes, but that is more specific to context or the state of a HTML element such as :hover when a user hovers over that element.

Typography

Fonts

The main properties to style text on a web page are as follows:

There is also text decoration, alignment, indentation, shadows, transformations, spacing, and so much more.

Colors

Colors can be specified using keywords, hexadecimal values, RGB, RGBa, HSL, and HSLa values. Hexadecimal values are the most popular method.

html {
  color: #555;
}

To see all of this typography at one glance:

<h2><a href="#">I Am a Builder</a></h2>

<p class="byline">Posted by Shay Howe</p>

<p>Every day I see designers and developers working alongside one another. They work intelligently in pursuit of business objectives. They work diligently making exceptional products. They solve real problems and take pride in their work. They are builders. <a href="#">Continue&#8230;</a></p>

h2,
p {
  color: #555;
  font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
  color: #0087cc;
}
a:hover {
  color: #ff7b29;
}
h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 6px;
}
.byline {
  color: #9799a7;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  margin-bottom: 18px;
}

The Box Model

Every HTML element can be thought of as a box and can be modified as such with relevant properties shown below:

box model

Let’s see if we can find the total width and height of a sample element below (in pixels): example box

This allows one to position and manipulate each of the elements. In addition to this model, there are properties of the “box” such as:

Types of boxes:

Resources

Online Editors

Below are online, interactive playgrounds that allow you to use HTML, CSS, and Javascript for coding and testing: