Passing inheritance to the child

  div {
    border:1px solid #7d7b7b;
    margin:30px;
  }
  p:first-child {
    border:inherit;
    margin:inherit;
  }
  

CSS wildcards

 /*select all href links for W3 Schools*/
   a[href="https://www.w3schools.com/"] {
    text-decoration: none;
   }

 /*select all classes that include "str"*/
   [class*="str"] {
     text-transform: capitalize;
   }

 /*select all classes that starts with "demo"*/
   a[href^="demo"] {
     text-align: center;
   }

 /*select all classes that ends with "pdf"*/
   a[href$="pdf"] {
     border: 1px solid black;
   }

 /*select all classes which is "#"*/
   .\# {
     background-color:#e0dede;
   }
    

Specificity

 /*the font color will be red because "div p" is more specific than "p"*/
   div p {
     color:red;
   }
   p {
     color:blue;
   }
    

Overlay images

CSS

 .container {
   position: relative;
   width: 500px;
   height: auto;
   border: 1px solid black;
 }
 #main {
   width: 100%;
   height: auto;
 }
 #overlay {
   position: absolute;
   bottom: 10px;
   right: 10px;
   width: 100px;
   height: auto;
 }
  

HTML

 <div class="container">
   <div id="main"><img src="pic1.svg" alt=""><div>
     <div id="overlay"><img src="pic2.svg" alt=""><div>
 </div>
  

Use "margin:auto" to center content

CSS

 main {
   max-width: 100%;
   width:1200px;
   margin:80px auto;
 }
      

Use "white-space" to control white space and text wrap

CSS

 p {
   white-space: normal; /*default-single white space and text wrap if necessary*/
   white-space: pre; /*white space as entered and text wrap on line breaks like the <pre> tag in HTML*/
   white-space: pre-line; /*single white space and wrap on line breaks*/
   white-space: pre-wrap; /*text will wrap in small screens*/
   white-space: nowrap; /*single white space and text will not wrap until <br>*/
   white-space: inherit /*child will inherit from parent*/
 }
        

Use HTML <pre> with CSS "tab-size" to align text

CSS

 #p1 {
   tab-size:50;
 }
          

HTML

 <pre id="p1">
   first Name     = John /*tab before "="*/
   last name      = Smith
 <p>
            

Use box-sizing to restrict the border to wrap around content only

CSS

                  
 box-sizing:content-box; /*default - border= content+padding+margin*/
 box-sizing:border-box; /*border = content only*/
                  
 p {
   max-width:100%;
   width:1200px;
   margin:80px auto;
   padding:0 40px;
   box-sizing:border-box;
 }

Line height and character spacing

CSS

 p {
   line-height:2; /*double line height*/
   letter-spacing: 1.2; /*120% of normal spacing*/
   word-spacing:10px; /*10 pixel distance between words*/
  }
    

Compile SCSS into CSS

If you already have Node.js installed:
Open your terminal (Command Prompt, PowerShell) and run:

          npm install -g sass
        

Type "cmd" in the Windows Explorer folder extension where the SCSS file is located and run the code:

        sass styles.scss styles.css
      

To auto compile everytime the SCSS file is saved:

          sass --watch styles.scss:styles.css