CSS Cheat Sheet

What is CSS ?

  1. CSS stands for Cascading Style Sheets
  2. CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  3. CSS saves a lot of work. It can control the layout of multiple web pages all at once
  4. External stylesheets are stored in CSS files

CSS Syntax

  1. A CSS rule-set consists of a selector and a declaration block.
  2. The selector points to the HTML element you want to style.
  3. The declaration block contains one or more declarations separated by semicolons.
  4. Each declaration includes a CSS property name and a value, separated by a colon.
  5. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
p {
    color: red;
    text-align: center;
}

CSS Comments

Comments are used to explain the code. 
p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */

CSS Backgrounds

The CSS background properties are used to define the background effects for elements. CSS background properties:
  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position
The background-image property specifies an image to use as the background of an element. 
body {
    background-image: url("bgdesert.jpg");
}

CSS Styling Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.) 
a {
    color: hotpink;
}

CSS Display

  • Block-Level Elements:
    1. <div>
    2. <h1> - <h6>
    3. <p>
    4. <form>
    5. <div style="background-color:black; color:white; padding:20px;">
<h2>Hello</h2>
      <p>Hello Worldlt;/p>
</div>
  • Inline Elements

    An inline element does not start on a new line and only takes up as much width as necessary.

    This is an inline <span> element inside a paragraph.

    Examples of inline elements:

    1. <span>
    2. <a>
    3. <img>
    4. <h1>My <span style="color:red">Important</span> Heading</h1>