Skip to main content

Parent and Child | Basic Rules for .css

 

add

Add the script into the <header> bock.

Include your own file source location (href=)


Parent starts with the main block.

First off, the parent and child relationship in the .css start at the html level.  You determine the parents in css, referencing the html tags. 

<!DOCTYPE html>
<html lang="en">
      <head> <!--parent1-->
          <meta charset="UTF-8"> <!--child of parent1-->
          <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--child of parent1-->
          <title>Document</title> <!--child of parent1-->

          <link rel="stylesheet" href="./junk1.css"> <!--child of parent1-->
      </head>

      <body> <!--parent2-->
          <p>This is not inside a div</p> <!--child of parent2--> 

          <div> <!--child of parent2-->
              <p>This is totally inside a div</p>  <!--child of div which is child of parent2-->
          </div>

          <div class="first-class"> <!--child of parent2-->
              <p>This text is within a div, within a class</p> <!--child of div which is child of parent2-->
              <p class="second-class">This has a class and is also within a div, with a glass</p> <!--child of div which is child of parent2-->
          </div>

      </body>

</html>

Starting the .css script with no dot "." will call out to the main tag that it refers to in the html. 

p { 
        color: blue;
}

css1101023.jpg