my cheat sheet on cascading style sheets, css

Home

1 CSS Ruleset

A Cascading style sheet is a formatting doc that can be applied to one or many html files to alter how the pages are displayed.

1.1 Syntax of a css ruleset

p {
  color: green;
  property2: value;
}
  • p is the "selector"
  • {} wrap what is called a "declaration"
  • color is the property that will be affected
  • green is the value of the affected property

The selector is any html markup, typically these:

  • p for <p> </p> paragraph
  • h1 for <h1> header. same for h2 etc.
  • * all elements
  • #idname all elements inside #idname

All selectors come in one of three varieties:

1.1.1 1. Element

  • p for paragraph i.e. <p> </p>
  • h1 for heading 1
  • div
  • header
  • footer
  • span
  • strong
  • a
  • btn
  • li for list entry etc.

1.1.2 2. Class

definitions in the css style sheet file: 

.classname {property: value;}
.hammer {color: yellow; font-size: larger}
.hammer .emphasis {font-family: Consolas, monospace;
                   font-size: x-large;
                   font-color: blue;
                   background-color: yellow;
                   color: black;
                  }
.hammer .regular {font-size: large}

  .hammer
  .datums

These are "called" by specifying the class within the opening tag of the element 

<div class="hammer"> blah blah
   <a class="emphasis"> Listen! </a>
   <a class="emphasis" href=/thisingredient"> blah blah </a>
</div>

1.1.3 3. ID

  • #lookingfor

These are "called" by specifying "id=lookingfor"

More to see in https://htmlcheatsheet.com/css/

1.2 Syntax for inline css

The most cumbersome, but easiest, quick and dirty method, is to put the styling inline using the style=" " syntx 

// Using inline CSS
<h1 style="color: value;"> Welcome to freeCodeCamp! </h1>

// Using internal/external CSS
selector {
    color: value;
}

Best to stick to a separate css file for ALL stylings

1.3 Syntax of inline style element in header:

The syntax is just like it would be in a separate css file. Just stick to that, but again for a quick and dirty override can do this: 

<head>
   <style>
      .niceblue {
      color: #1020ee;
      }
   </style>   
</head>

1.4 Syntax for loading an external css file

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

1.5 Modifying multiple properties

You can affect any property and multiple properties at once: 

p {
  color: green;
  height: 60px;
  border: 8px solid grey;
}

1.6 Modifying multiple elements

Not only can you alter multiple properties, but you can affect multiple elements at once too: 

p, h1, h2 {
  color: green;
  height: 60px;
  border: 8px solid grey;
}

2 CSS Selectors

The above examples all were examples of element selectors that affect all elements of a given type, like paragraphs, or heading etc. p and h1 etc.

Selector name What does it select Example
Element Selector All HTML elements of p
  the specified type selects<p>
ID selector The element on the page #my-id
  with the ID selects <p id="my-id">
    or <a id="my-id">
Class selector The element(s) on the .my-class
  page with the specified selects
  class. Multiple instances <p class="my-class"> and
  of the same class can <a class="my-class">
  appear on a page.  
Attribute selctr The element(s) on the page img[src] selects
  with a given attribute  
Pseudo-class    
selector    

2.1 cheatsheet

From the geeksforgeeks.org website: 

/* universal selector */
* {
    background-color: hsl(325, 63%, 82%);
    text-align: center;
}
/* type selector */
span {
    background-color: skyblue;
}
/* id selector */
#div1 {
    color: green;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
/* class selector */
.div2 {
    color: orange;
    text-align: left;
    font-size: 10px;
    font-weight: bold;
}
/* attribute selector */
div[style] {
    text-align: center;
    color: purple;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: -20px;
}
/* combinator selector */
div>p {
    color: #009900;
    font-size: 32px;
    font-weight: bold;
    margin: 0px;
    text-align: center;
}
/* class selector */
.box {
    background-color: yellow;
    width: 300px;
    height: 100px;
    margin: auto;
    font-size: 30px;
    text-align: center;
}
/* pseudo selector */
.box:hover {
    background-color: orange;
}

And corresponding html excerpt: 

<!DOCTYPE html>
<html>
<head>
<title>* Selectors</title>
<!-- CSS Selectors are in used -->
<link rel="stylesheet" href="static/style.css" />
</head>

<body>
  <p>
          *(Universal) Selector here gives a pink background
  </p>
  <br>
  <span>This span is styled using type selector.
  <br><br>
  <div id="div1">
          This div is styled using id selector
  </div>
  <br>
  <div class="div2 ">
          This div is styled using class selector
  </div>
  <br>
  <div style="color:green">
          This div is styled using attribute selector
  </div>
  <br>
  <div style="text-align:center;">
          This div is styled using combinators
          <p>child selector</p>
  </div>
  <br>
  <p>pseudo selector:</p>
  <div class="box">
          My color changes if you hover over me!
  </div>
  </body>
  </html>

2.2 Link colours

<style>
a:link {
  color: #aeb32e;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #827717;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #00e777;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

2.3 Highlighting substrings

From a post in stackoverflow.com. Basically you can highlight a substring of text from a longer string by wrapping the "highlighted" text with a <span> tag. Then, you can apply any text style you want to that span. 

   function (element, start, end) { 
    var str = element.innerHTML;
    str = str.substr(0, start) +
        '<span class="hilite">' + 
        str.substr(start, end - start + 1) +
        '</span>' +
        str.substr(end + 1);
    element.innerHTML = str;
}

You can then define CSS for the class hilite to control the style of that text. 

.hilite {color: yellow;}

This assumes that start and end are indexes into the inne rHTML of the first and last characters that you want highlighted.

If you want to be able to call it repeatedly on the same element (to move the higlight around), you could do it like this: 

   function (element, start, end) {
    var item = $(element);
    var str = item.data("origHTML");
    if (!str) {
        str = item.html();
        item.data("origHTML", str);
    }
    str = str.substr(0, start) +
        '<span class="hilite">' + 
        str.substr(start, end - start + 1) +
        '</span>' +
        str.substr(end + 1);
    item.html(str);
}

3 Thousands separators in jinja templates

{{ "{:,}".format(1000000) }}

Where 1000000 can be your int variable.

3.1 Home