Day 22 - #100daysofCode - CSS 101 Part 2

I am still taking Christina Truong's Essential CSS course . Below are some notes on what I have reviewed/learned so far:

LENGTH

Absolute length values are a fixed unit and always the same size -- regardless of any other related element Unlike Relative length which are relational sizing, not fixed and dependent upon values declared in parent and ancestor elements.

With CSS, there are many colors that you can easily reference: like "black" or "yellow", but for colors that you never heard of it might be easier to look them up on websites such as colours.neilorangepeel and using RBG.

RGB is a hexadecimal and prefixed with a number sign(#) followed by six characters (0-9 and A-F) to define the red, green, and blue values #rrggbb.

The hex value can also be abbreviated, if the RGB values are the same, for example:

#f00; /* shorthand */
#ff0000; /*longhand */
#000; /* shorthand */
#000000; /* longhand */

rgb() is created with 3-comma-separated numbers between 0-255 or 0%-100%

rgb() can be written numeric or as a percentage:

rgb (0,0,0) /* black */
rgb (0%,0%,0% ) /* black */

rgb (255,255,255) /* white */
rgb (100%,100%,100% ) /* white */

Although spaces are not required in CSS, they are great for readability. Once again, reference Code Guide for Standards for developing consistent, flexible, and sustainable HTML and CSS

rgba() is similar to rgb() except that it accepts a fourth value that changes the opacity. I like to think of opacity as how "dark", "bold", or "transparent" a color is. An example of rgba() versus rgb() below, feel free to put it in your favorite text editor and see the difference.

rgb (0,0,0) black
rgba (0,0,0,0) no opacity
rgba (0,0,0,0.5) 50% opacity
rgba (0,0,0,1) 100% opacity

CSS selectors help to select content from your HTML and add CSS attributes to it. There are three main CSS selectors that you will use/see frequently.

Type selectors are the most basic kind of selectors, they match to html elements by using the html name without using the brackets

For example, the following declaration box matches ALL h1 elements.

  h1{
    . . . .
  }

Class selectors must be added to the HTML document and then referenced in your css by using .classname

To add a class to your HTML document:

  <p class = "elegant"> elegant paragraph</p>
  <p> regular paragraph</p>

To add a class to your CSS document:

  .elegant{
    color: red;
  }

The above will add the color red to all classes referencing "elegant" in your HTML file. The class selector can be used on more than one HTML tag and one HTML tag can have multiple classes like the following sample HTML tag:

  <p class = "elegant intro"> elegant paragraph</p>
  <p> regular paragraph</p>

The css would read like this:

  .elegant{
    color: blue;
  }

  .intro{
    color: purple;
  }

Or to specify a style only when both classes are specified, do the following:

  .elegant.intro{
    . . . . .
  }

class selector: add the class attribute to the html document
An ID can be referenced in your HTML and CSS similar to a class, except you would use the word id when referring to the key term in your HTML and use a # within your CSS like so:

  <p id = "pretty"> pretty paragraph</p>
  <p> regular paragraph</p>

In your css file:

  #pretty{
    color: pink;
  }

The two main differences between id and class is the syntax and ids are not reusable, you can only use it once per page.

The universal selector is applied to everything in your HTML document and should be uses sparingly:

  *{
    border
  }

Although many of this is basic review, sometimes it is important to go back to basics in order to move forward. I caught myself struggling with basic CSS since I have not dealt with it in a while. I am happy that I am grasping it again and will soon apply all of this knowledge to my portfolio page.

Song of the Day: