**CSS** stands for **Cascading Style Sheets**. It consists of the properties that style webpage code (usually HTML). It is not a programming or markup language, but rather a stylesheet language. We use this to specifically style certain areas of the web page's content. It can also be used to style **React** components.

# Ruleset
The following illustration shows how we declare a CSS property. The structure is called a **ruleset**.

A ruleset has the following attributes:
## Selector
This specifies the part of HTML code that will be styled by the ruleset. It uses the class name or tag from HTML (e.g. ``) to specify the CSS styling. 
## Declaration
This part specifies the styling properties. You can style the font, color, or alignment of the text here. 
## Properties
This part of the declaration specifies which characteristic will be styled. 
## Property value
This part specifies how the property will be styled. 


> - The ruleset must be enclosed with curly brackets, `{}`
> - Each statement in the ruleset must be terminated with a semi-colon

# Mutiple elements
If multiple elements require the same styling, they can all be declared as selectors. The following snippet shows how this may be done:
```css
p, h1 {
 font-family: "Times New Roman";
}
```
# Types of CSS styling
There are three ways to use CSS styling:
1. **Inline CSS**
 The CSS components are enclosed within the HTML tags. This is done by using the `style` attribute. 
2. **Internal/embedded CSS**
 The CSS components are declared for the whole page in the same file as the HTML code. We do this in the `head` section of the HTML code. 
3. **External CSS**
 The CSS code is contained in a separate file, which is linked to the HTML file. The external CSS file uses selectors to refer to and style the HTML code snippets.

<html>
 <head>
 </head>
 <body>
 
 Hello, world!
 
 </body>
</html>

document.addEventListener("DOMContentLoaded", function () {
  pTag = document.querySelector("div");
  newVal = document.createElement("p");
  newVal.innerHTML = 'Hello, Hello';
  pTag.appendChild(newVal);
});

// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

var TestResult = function() {
  this.succeeded = false;
  this.reason = "";
  this.input = "";
  this.expected_output = "";
  this.actual_output = "";
};

var executeTests = function(
  userJsCode,
  userCssCode,
  userHtmlCode,
  userHtmlPage
) {
  var results = [];

  const jsdom = require("jsdom");
  const { JSDOM } = jsdom;
  const dom2 = new JSDOM(userHtmlPage, { runScripts: "dangerously" });

  const pTag = dom2.window.document.querySelector("p");

  const result = new TestResult();
  result.expected_output = "Hello World";
  result.input = "Html page";

  if (!pTag) {
    result.actual_output = "null";
    result.succeeded = false;
    result.reason = "No p tag found";
  } else {
    const pTagText = pTag ? pTag.textContent : "";
    result.actual_output = pTagText;
    if (pTagText.trim() != "Hello World") {
      result.reason = "Expected output (Hello World in a p tag) did not match";
      result.succeeded = false;
    } else {
      result.succeeded = true;
      result.reason = "Found p tag with Hello World";
    }
  }

  results.push(result);

  return results;
};

// Async Tests Example
/*
var executeTestsAsync = function(
  userJsCode,
  userCssCode,
  userHtmlCode,
  userHtmlPage
) {
  var results = [];
  return new Promise(resolve => {

    const jsdom = require("jsdom");
    const { JSDOM } = jsdom;
    const dom2 = new JSDOM(userHtmlPage, { runScripts: "dangerously" });

    if (!dom2.window.onModulesLoaded) {
      console.log("window.onModulesLoaded not found!");
    	resolve(results);
    }
    dom2.window.onModulesLoaded.then(()=>{
      const pTag = dom2.window.document.querySelector("p");

      const result = new TestResult();
      result.expected_output = "Hello World";
      result.input = "Html page";

      if (!pTag) {
        result.actual_output = "null";
        result.succeeded = false;
        result.reason = "No p tag found";
      } else {
        const pTagText = pTag ? pTag.textContent : "";
        result.actual_output = pTagText;
        if (pTagText.trim() != "Hello World") {
          result.reason = "Expected output (Hello World in a p tag) did not match";
          result.succeeded = false;
        } else {
          result.succeeded = true;
          result.reason = "Found p tag with Hello World";
        }
      }

      results.push(result);
      resolve(results);
    });
  });
};
*/


p{
  font-family: "Times New Roman";
  color: red;
}

What are the basics of CSS?

Ruleset

Selector

Declaration

Properties

Property value

Mutiple elements

Types of CSS styling