Note_Tech

All technological notes.

Project maintained by simonangel-fong Hosted on GitHub Pages — Theme by mattgraham

CSS - Fundamental

Back

CSS

Cheatsheet

Selector Description
* All elements
#id The element with id
.class All elements with class
ele All ele elements
Selector Description
#id1, #id2 The elements with id of id1 and id2
.class1, .class2 The elements with the class1 and class2
el1, el2, el3 The el1, el2 and el3 elements
#id1, .class1, el1 The elements with id, class, and element
Selector Description
parent descendant All descendants
parent > child All children
element + next The very next element
element ~ siblings All sibling elements after
Selector Description
[attribute] All elements with attribute
[attribute=value] All elements with attribute value equal to “value”
[attribute!=value] All elements with attribute value not equal to “value”
[attribute$=value] All elements with a href attribute value ending with “value”
[attribute | =value] All elements with attribute value equal to “value” or starting with “Tomorrow” followed by a hyphen
[attribute^=value] All elements with attribute value starting with “value”
[attribute*=value] All elements with attribute value containing the word “value”
[attribute~=value] All elements with attribute value containing the specific word “value”, not start with or end with
Selector Description
:focus The element that currently has focus
:empty All elements that are empty
:hover element that the user hovers over an element with the cursor
:has(selector) All elements that have a selector element
:first-child the first element among a group of sibling elements
:last-child the last element among a group of sibling elements
:nth-child() elements based on their position among a group of siblings
:nth-child(even) the even elements among a group of siblings
:nth-child(odd) the odd elements among a group of siblings
:nth-last-child() elements based on their position, counting from the end
Selector Description
::after creates a pseudo-element that is the last child of the selected element.
::before creates a pseudo-element that is the first child of the selected element.
::first-letter applies styles to the first letter of the first line
::first-line applies styles to the first line of a block-level element.
::placeholder applies styles to the placeholder text
::selection applies styles to the highlighted text

Syntax

CSS Syntax

CSS Selectors

Id Selector: #id

<style>
  #para1 {
    text-align: center;
    color: red;
  }
</style>

<p id="para1">Hello World!</p>

Class Selector: .class / element.class

<!-- specify all HTML elements -->
<style>
  .center {
    text-align: center;
    color: red;
  }
</style>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>

<!-- specify that only specific HTML elements -->
<style>
  p.center {
    text-align: center;
    color: red;
  }
</style>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>

<!-- HTML elements can also refer to more than one class.-->
<style>
  p.center {
    text-align: center;
    color: red;
  }

  p.large {
    font-size: 300%;
  }
</style>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">
  This paragraph will be red, center-aligned, and in a large font-size.
</p>

Grouping Selector: element / element,element

<style>
  h1,
  h2,
  p {
    text-align: center;
    color: red;
  }
</style>

Universal Selector: *

<style>
  * {
    text-align: center;
    color: blue;
  }
</style>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

CSS Comments

<style>
  /* comments */
</style>

Insert CSS

External CSS

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="mystyle.css" />
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Internal CSS

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: linen;
      }

      h1 {
        color: maroon;
        margin-left: 40px;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Inline CSS

<!DOCTYPE html>
<html>
  <body>
    <h1 style="color:blue;text-align:center;">This is a heading</h1>
    <p style="color:red;">This is a paragraph.</p>
  </body>
</html>

Multiple Style Sheets

Cascading Order (Specificity)

TOP