Day 22 - #100daysofCode - CSS 101 Part 2
Tags: css, womenintech, 100daysofcode, codenewbie
Published: 2020-06-23 01:35:57

I am still taking <a href="https://www.linkedin.com/learning/instructors/christina-truong"> Christina Truong's Essential CSS course </a>. Below are some notes on what I have reviewed/learned so far: 

<center><h2>

CSS syntax and terminology </h2> </center>

What is a declaration box in CSS? 

```
img {
  width: 300px;
}
```

In the above declaration box, the ``width:300px;`` is the declaration and style rules.

``img`` is considered the selector

``width`` is a property/style characteristics

 ``300px`` is a value

Just like HTML or any other language, formatting and whitespace is important for better readability. It is recommended that we reference <a href="https://codeguide.co/"> Code Guide </a> for Standards for developing consistent, flexible, and sustainable HTML and CSS.

<center><h2>Longhand Versus Shorthand </h2> </center>

There are ways to make longhand and shorthand declarations, an example of this is when you are using padding. 

You could reference each side in padding (longhand), like this: 

```
 padding-top: 10px;
 padding-right: 5px;
 padding-bottom: 10px;
 padding-left: 5px;
```

Or you could use shorthand, like this: 

```
 padding: 10px 5px;
```
The above code is a shorthand way of saying ``10px`` top and bottom, and ``5px`` for left and right. 

<h2><center>LENGTH</h2></center>

There are two types of lengths referred to with CSS:  <center>
<b> 1. Absolute  </b>
<b> 2. Relative  </b>
</center>

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

<center><h2> Colors </h2> </center>

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 <a href="http://colours.neilorangepeel.com"> colours.neilorangepeel </a> and using RBG. 

<center><h3> RGB </h3> </center>
<b>RGB</b> 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: 

<center> <b>#rgb = #rrggbb</b> </center>

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

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

<b>rgb()</b> 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 <a href="https://codeguide.co/"> Code Guide </a> for Standards for developing consistent, flexible, and sustainable HTML and CSS

<center><h3> RGBA  </h3> </center>
<b> rgba()</b> is similar to <b>rgb()</b> except that it accepts a fourth value that changes the ``opacity``. I like to think of ``opacity`` as how <i>"dark"</i>, <i>"bold"</i>, or <i>"transparent"</i> a color is. An example of <b> rgba()</b> versus <b>rgb()</b> 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
```

<center><h2> CSS selectors </h2> </center>

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.

<center><h3> 1. Type selectors </h3> </center>

``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{
    . . . .
  }
```

<center><h3> 2. Class selectors </h3> </center>
 
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{
    . . . . .
  }
```

<center><h3> 3. ID selectors </h3> </center>
  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 ``id``s are not reusable, you can only use it once per page.  

<center><h3> Universal selector  </h3> </center>

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:

{% soundcloud https://soundcloud.com/danielcaesar/we-find-love %}