HTML (HyperText Markup Language)

HTML is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript). More

Basic Structure

HTML 

          <html>
            <head>
              <title></title>
            </head>
            <body>
            </body>
          </html>

HTML 

          <pclass="name" id="ncode" > </html>
          

            
              

                p
                Tag
              

              

                class
                Define the content group
              

              

                id
                Define unique content

Table

HTML
TAG DETAILS
<table> </table> Define a box content as a table
<thead> </thead> Header of the table
<tbody> </tbody> Data of the table
<tfoot> </tfoot> Footer of the table
<tr> </tr> Row of the table
<th> </th> Title of row on the table
<td> </td> Content of row on the table
ATTRIBUTE
colspan='' Defines the number of columns a table cell should span
rowspan='' Defines the number of rows a cell should span

HTML 

          <! -- Table -->

          <table>
            <thead>
              <tr>
                <th>Box 1</th>
                <th>Box 2</th>
                <th>Box 3</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Value 1</td>
                <td>Value 2</td>
                <td>Value 3</td>
              </tr>
            </tbody>
          </table>

          <! -- Attribute -->

          <table>
            <thead>
              <tr>
                <th colspan='3'>colspan 3</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>Value 1</th>
                <td>Value 2</td>
                <td>Value 3</td>
              </tr>
            </tbody>
          </table>

          <table>
            <tbody>
              <tr>
                <th rowspan='2'>rowspan 2</th>
                <td>Value 1</td>
                <td>Value 2</td>
                <td>Value 3</td>
              </tr>
              <tr>
                <td>Value 4</td>
                <td>Value 5</td>
                <td>Value 6</td>
              </tr>
            </tbody>
          </table>

Out

Table

Box 1 Box 2 Box 3
Value 1 Value 2 Value 3

Attribute

colspan 3
Value 1 Value 2 Value 3
rowspan 2 Value 1 Value 2 Value 3
Value 4 Value 5 Value 6

CSS (Cascading Style Sheets)

CSS is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. More

Basic Structure

CSS 

          /* Style tag */

          p {
            color: white;
          }

          /* Style class */

          .name {
            color: white;
          }

          /* Style id */

          #ncode {
            color: white;
          }

          /* Style all (change default set)*/

          * {
            color: white;
          }

          /* chain selector = parent and child reference */

          p .name {
            color: white;
          }

          p #ncode {
            color: white;
          }

          /* multiple selector = diferents selectors */

          div, p {
            color: white;
          }

          div, p, .class, #nemesis {
            color: white
          }

CSS 

          /* Pseudo class */

            tag :focus
            tag :visited
            tag :disabled
            tag :active
            tag :hover
            tag :before
            tag :after

          /* Example */

            .a :hover{
                  color: red;
              }

Out 

          More

Specificity

Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element. More

CSS 

          /* Specificity */

            ID >>>  High >> unique

            Class >>>  Mid

            Tag >>>  Low

          /* Example */
            

            <h1 class="example" id="new"></h1>
            

            h1 {
              color: blue;
            }

            .example {
              color: green;
            }

            #new {
              color: red;   Winner
            }
            
          /* brake the rule */

            add !important >>>  Very High

            .example {
              color: blue !important;     Winner
            }

            #new {
              color: red;
            }
* Using !important to override specificity is considered a bad practice and should be avoided for this purpose. Understanding and effectively using specificity and the cascade can remove any need for the !important flag.

RESOURCES

Code Documentation


MDN PlayGround

Color palette's'