CSS Helpbook

  1. Inline CSS

    Inline CSS is the most basic way to style an HTML element. It is applied directly to the HTML element using the style attribute.

    Inline CSS is not recommended because it is not reusable and it clutters the HTML code.

    Example: 

    <h1 style="color: red;">Hello World</h1>

  2. Internal CSS

    Internal CSS is a way to style an HTML element by using the style element inside the head element.

    Internal CSS is not recommended because it is not reusable and it clutters the HTML code.

    Example: 

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

  3. External CSS

    External CSS is a way to style an HTML element by using a separate CSS file.

    External CSS is recommended because it is reusable and it does not clutter the HTML code.

    Example: 

    <head>
  <link rel="stylesheet" href="styles.css" />
</head>

  4. CSS Syntax

    CSS Syntax is the way to write CSS code. It is made up of selectors and declarations.

    Example: 

    selector {
  property: value;
}

  5. CSS Selectors

    CSS Selectors are used to select the HTML element that you want to style.

    Selectors available in CSS are:

    For more information on CSS Selectors: Devdocs.io

    Example: 

    /* Classes */
.class {
  property: value;
}

/* IDs */
#id {
  property: value;
}

  6. Favicons

    Favicons are the small icons that appear on the browser tab.

    Favicons are created using the Favicon.io tool.

    Example: 

    <head>
  <link rel="icon" href="favicon.ico" />
</head>

  7. CSS:Display Property

    The display property specifies the display behavior (the type of rendering box) of an element.

    The display property can take the following values:

    Example: 

    /* block */
h1 {
  display: block;
}

/* inline */
h1 {
  display: inline;
}

/* inline-block */
h1 {
  display: inline-block;
}

/* none */
h1 {
  display: none;
}

    Common Inline Elements

    - Spans (<span>)
    - Images (<img>)
    - Anchors (<a>)
    - Buttons (<button>)
    - Inputs (<input>)
    - Textareas (<textarea>)

    Common Block Elements

    - Divs (<div>)
    - Paragraphs (<p>)
    - Headers (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
    - Lists (<ul>, <ol>, <li>)
    - Tables (<table>, <tr>, <th>, <td>)

  8. CSS:Positioning

    The position property specifies the type of positioning method used for an element.

    The position property can take the following values:

    Example: 

    /* static */
h1 {
  position: static;
}

/* relative */
h1 {
  position: relative;
}

/* absolute */
h1 {
  position: absolute;
}

/* fixed */
h1 {
  position: fixed;
}

/* sticky */
h1 {
  position: sticky;
}