CSS

CSS (Cascading Style Sheets) is a language used to interact with and style HTML, changing the way it looks according to a series of rules. CSS is what makes websites look nice.

CSS can be applied to HTML in a variety of ways:

  • The inline style attribute: 

    See the Pen Inline CSS by Ali Madooei (@madooei) on CodePen.

  • The internal style defined inside <style></style> tags, inside the <head> section of HTML.

    See the Pen Internal CSS by Ali Madooei (@madooei) on CodePen.

    The CodePen above is styled with the following:

    <style>
  div {
    color: blue;
  }

  #danger {
    color: red;
  }

  .highlight {
    background-color: yellow;
  }
</style>

  • A separate .css file:

    • add <link rel="stylesheet" href="path/to/styles.css"> to the header,
    • move the CSS code (same format as used inside the <style></style> tags.

    This is often an even better paradigm because it separates two distinctly different things: structure (HTML) and style (CSS), while also being easier to manage and read.

CSS Selectors

CSS selectors are used to select different parts of an HTML page to style in particular ways. In the above example, div, #danger and .highlight are CSS selectors (to select all div elements, the element with id="danger and all elements with class="highlight", respectively.)

Here are some fancier ways to work with the selectors:

  • Select h1 and h2 elements

    h1, h2 { 
  color: blue; 
}

  • Select all p elements inside an element with class="note" 

    .note p { 
  color: blue; 
}

  • Select all input fields with the attribute type=text

    input[type=text] { 
  color: blue; 
}

Here it gets even fancier:

  • Add two # before all h2 elements:

    h2::before { 
  content: "##"; 
}

    before is called a pseudo-element!

  • Change the color of a button when the cursor is hovering over it.

    button:hover { 
  background-color: gray; 
}

    hover is called a pseudo-class!

CSS Properties

Here are some common CSS properties:

background-color: teal; 
color: blue; /* sets the content (text) color */
/* color can be one of ~140 named colors, or a hexadecimal value that represents an RGB value */ 

text-align: left; /* other possible values are center, right, or justify */

height: 150px; /* sets the height of an area */
width: 150px; /* sets the width of an area */
/* arguments in pixels often can take a percentage or relative values too */

margin: 30px; /* sets the margin around all four sides of an area */
/* margin also be broken up into "margin-left", "margin-right", "margin-top", and "margin-bottom" */
padding: 20px; /* sets the padding around text inside an area */
/* padding be broken up the same way as "margin" */

border: 3px solid blue; /* sets a border around an area */

font-family: Arial, sans-serif; /* sets the font family to be used */
font-size: 28px; /* sets the font size */
font-weight: bold; /* sets the font weight to quality, a relative measure ("lighter"), or a number ("200") */

There are lots of CSS properties that can be used in a lot of different ways. Check out the wonderfully extensive documentation for more information.

Libraries and Frameworks

There are several libraries and frameworks out there which you can use, for free, by including a few files in your project. These libraries will make it easy for you to design slick and professional-looking applications.

Refer to this excellent list of CSS frameworks.