CSS

CSS3 Logo

CSS tells the browser how each type of HTML element should be displayed (color, size, font). CSS stands for Cascading Style Sheets.

CSS Example

body {
    background-color: #FF0000;
}

h1 {
    color: green;
    text-align: center;
}

p {
    font-family: font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-style: italic;
}

The above CSS will make your page's background red, the heading will be green and centered, and the paragraph will be cursive and italic.

try on plunker

Ways to Insert CSS

There are 3 ways to add styles

  • External style sheet
  • Internal style sheet
  • Inline style

External Style Sheet

External style allow you to put your styles in there own files for maintainability.

<link rel="stylesheet" href="mystyle.css">

try on plunker

Internal Style Sheet

Internal style sheets allow you to put your styles in the HTML file's head.

<head>
  <style>
      h1{
        color:red;
      }
    </style>
</head>

try on plunker

Inline Style

Inline styles allow you to put styling directly in a tag.

<h1 style="color:red;">I love inline styles</h1>

try on plunker

CSS Selectors

You can limit what is styled with CSS selectors. CSS selectors are used to find HTML elements based on their:

  • type
  • id
  • class
  • attribute
  • ...
<!DOCTYPE html>
<html>

  <head>
    <style>
      /* All h1 tags are red */
      h1{
        color:red;
        text-align: center;
      }


      /* All tags with the class mycolor are lime */
      .mycolor{
        color:lime;
      }

      /* The tag with the id myothercolor are brown */
      #myothercolor{
        color:brown;
      }
    </style>
  </head>

  <body>
    <h1>tag css selector</h1>

    <div class="mycolor">using class css selector</div>
    <div id="myothercolor">using id css selector</div>

  </body>

</html>

try on plunker

You can select by type by adding a tag.

h1{
  color:red;
  text-align: center;
}

You can select by class by adding a . followed by the class name and adding the class to the tag. Many elements on a page can have the same class.

.mycolor{
    color:lime;
}

<div class="mycolor">using class css selector</div>

You can select by id by adding a # followed by the id name and adding the id to the tag. Each element with an id must have a unique id.

#myothercolor{
    color:brown;
}

<div id="myothercolor">using id css selector</div>

Learning More

http://www.w3schools.com/css/default.asp

results matching ""

    No results matching ""