DEV Community

Brittany
Brittany

Posted on

Day 22 - #100daysofCode - CSS 101 Part 2

#css #womenintech #100daysofcode #codenewbie

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

CSS syntax and terminology

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 Code Guide for Standards for developing consistent, flexible, and sustainable HTML and CSS.

Longhand Versus Shorthand

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.

LENGTH

There are two types of lengths referred to with CSS:
1. Absolute 2. Relative

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.

Colors

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

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:

#rgb = #rrggbb 
#f00; /* shorthand */
#ff0000; /*longhand */
#000; /* shorthand */
#000000; /* longhand */
Enter fullscreen mode Exit fullscreen mode

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 */
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

CSS selectors

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.

1. Type selectors

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{
    . . . .
  }
Enter fullscreen mode Exit fullscreen mode

2. Class selectors

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>
Enter fullscreen mode Exit fullscreen mode

To add a class to your CSS document:

  .elegant{
    color: red;
  }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

The css would read like this:

  .elegant{
    color: blue;
  }

  .intro{
    color: purple;
  }
Enter fullscreen mode Exit fullscreen mode

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

  .elegant.intro{
    . . . . .
  }
Enter fullscreen mode Exit fullscreen mode

3. ID selectors

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>
Enter fullscreen mode Exit fullscreen mode

In your css file:

  #pretty{
    color: pink;
  }
Enter fullscreen mode Exit fullscreen mode

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

Universal selector

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

  *{
    border
  }
Enter fullscreen mode Exit fullscreen mode

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:

Top comments (0)

Read next

bilkeesu96 profile image

Understanding the Concept of Scoping in CSS

Bilkeesu Babangida -

tailwine profile image

CSS Grid: Building a Responsive Menu

Tailwine -

imrankhan17 profile image

Built a Netflix Clone with HTML & CSS – What I Learned Along the Way!

Imran Khan -

melchizedek404 profile image

Master css grid

Melchizedek Amos -