loading...

Day 22 - #100daysofCode - CSS 101 Part 2

sincerelybrittany profile image Brittany ・4 min read

#100DaysofCode (65 Part Series)

1) Day 1 of #100DaysofCode - Understanding Iterators 2) Day 2: #100DaysofCode - I updated to Catalina and All HELL Broke Loose 3 ... 63 3) Day 3: #100DaysofCode - Oh No, SQL 4) Day 4: #100DaysofCode - More Iterators 5) Day 5 - #100DaysofCode - Setting up a Sinatra App 6) Day 6 : #100DaysofCode - Setting up a Sinatra App : Part 2 - Config.ru 7) Day 7: #100DaysofCode - Setting up a Sinatra App - Part 3 8) Day 8: #100DaysofCode - Setting up Sinatra Database - Part 4 9) Day 9: #100DaysofCode - ActiveRecord and a Database 10) Day 10: #100DaysofCode - ActiveRecord and a Database 11) Day 11 : #100DaysofCode - RESTful Routes 12) Day 12: #100DaysofCode and Day 1 of #Javascript30 13) Day 13 - #100DaysofCode - #Javascript30 - Day 2 - CSS + JS Clock 14) Day 14: #100DaysofCode - Finalized my Sinatra Project -Security 15) #Day 15: #100DaysofCode - View my Sinatra Project 16) Day 16 - #100DaysofCode - Understanding MVC 17) Day 17 : #100DaysofCode - Knowing your Ruby Version & what Errno::EADDRINUSE means is important! 18) Day 18 of #100daysofCode - 3 challenges 19) Day 19 of #100daysofCode - Hashes 101 20) Day 20: #100DaysofCode - Practice makes perfect 21) Day 21 : #100DaysofCode - Cascading Style Sheets 101 22) Day 22 - #100daysofCode - CSS 101 Part 2 23) Day 23 - #100DaysofCode - Updated My Portfolio 24) Day 24 - #100DaysofCode - Practicing CSS Grid and Emmet Shortcuts on VSCode 25) Day 25 - #100DaysofCode - Intro to Rails 26) Day 26 - #100DaysofCode - Accessing Rails Commands 27) Day 27 : #100DaysofCode - Still reviewing the basic rails concepts . . . 28) Day 28 : #100DaysofCode - Adding Dev.to blogs to personal page 29) Day 29 : #100DaysofCode - Very Simple Rails App CRUD Practice 30) Day 30 : #100DaysofCode - Very basic rails continued 31) Day 31 - #100DaysofCode - Rails Routes 101 32) Day 32 : #100DaysofCode - Resources for learning to code 33) Day 33 - #100DaysofCode - Setting up my app on Heroku 34) Day 34 - #100DaysofCode - New/edit action versus create/update action 35) Day 35 : #100DaysofCode - A Code Challenge Completed 36) Day 36 - #100DaysofCode - Rails form_for versus form_tag 37) Day 37 : #100DaysofCode - 30 seconds of code 38) Day 38 - #100DaysofCode - Built my first basic rails application 39) Day 39 : #100DaysofCode - I updated my github profile page 40) Day 40 : #100DaysofCode - I need project ideas 41) Day 41 : #100DaysofCode - Collaboration 42) Day 42 : #100DaysofCode - The Planning of a Project 43) Day 43 : #100DaysofCode - The Amazing Faker Gem 44) Day 44 : #100DaysofCode - Code or Youtube? 45) Day 45 : #100DaysofCode - Basic Nested Forms 46) Day 46 : #100DaysofCode - Still reviewing form_for 47) Day 47 : #100DaysofCode - How do you code? 48) Day 48 : #100DaysofCode - Code Along 49) Day 49 : #100DaysofCode - Still Coding Along 50) Day 50 : #100DaysofCode - Keep Coding Along 51) Day 51 : #100DaysofCode - Code Along 52) Day 52 : #100DaysofCode - No Wifi, No Problem 53) Day 53: #100DaysofCode - Created user log in and log out functionality 54) Day 54 : #100DaysofCode -Review on setting up log in & sign up 55) Day 55 : #100DaysofCode - In Need of Advice on Reading Poorly Written Documentation 56) Day 56 : #100DaysofCode - A Tweet - Devise - Users 57) Day 57 : 100DaysofCode - Remembering to Git Commit Often 58) Day 58 : #100DaysofCode - Beginning to Learn Python 59) Day 59 : #100DaysofCode - Focused on My Rails Project 60) Day 60 : #100DaysofCode - CSS in Rails 61) Day 61 : #100DaysofCode - Omniauth? 62) Day 62 : #100DaysofCode - Sign in using a Third Party, Rails 63) Day 63 : #100DaysofCode - Refactoring 64) Day 64 : #100DaysofCode - Still Playing Around With OmniAuth 65) Day 65 : #100DaysofCode - Second Rails Project - I Want to Try Self-Referencing Tables

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 */

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


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

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

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>

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

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>

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.

Universal selector

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:

#100DaysofCode (65 Part Series)

1) Day 1 of #100DaysofCode - Understanding Iterators 2) Day 2: #100DaysofCode - I updated to Catalina and All HELL Broke Loose 3 ... 63 3) Day 3: #100DaysofCode - Oh No, SQL 4) Day 4: #100DaysofCode - More Iterators 5) Day 5 - #100DaysofCode - Setting up a Sinatra App 6) Day 6 : #100DaysofCode - Setting up a Sinatra App : Part 2 - Config.ru 7) Day 7: #100DaysofCode - Setting up a Sinatra App - Part 3 8) Day 8: #100DaysofCode - Setting up Sinatra Database - Part 4 9) Day 9: #100DaysofCode - ActiveRecord and a Database 10) Day 10: #100DaysofCode - ActiveRecord and a Database 11) Day 11 : #100DaysofCode - RESTful Routes 12) Day 12: #100DaysofCode and Day 1 of #Javascript30 13) Day 13 - #100DaysofCode - #Javascript30 - Day 2 - CSS + JS Clock 14) Day 14: #100DaysofCode - Finalized my Sinatra Project -Security 15) #Day 15: #100DaysofCode - View my Sinatra Project 16) Day 16 - #100DaysofCode - Understanding MVC 17) Day 17 : #100DaysofCode - Knowing your Ruby Version & what Errno::EADDRINUSE means is important! 18) Day 18 of #100daysofCode - 3 challenges 19) Day 19 of #100daysofCode - Hashes 101 20) Day 20: #100DaysofCode - Practice makes perfect 21) Day 21 : #100DaysofCode - Cascading Style Sheets 101 22) Day 22 - #100daysofCode - CSS 101 Part 2 23) Day 23 - #100DaysofCode - Updated My Portfolio 24) Day 24 - #100DaysofCode - Practicing CSS Grid and Emmet Shortcuts on VSCode 25) Day 25 - #100DaysofCode - Intro to Rails 26) Day 26 - #100DaysofCode - Accessing Rails Commands 27) Day 27 : #100DaysofCode - Still reviewing the basic rails concepts . . . 28) Day 28 : #100DaysofCode - Adding Dev.to blogs to personal page 29) Day 29 : #100DaysofCode - Very Simple Rails App CRUD Practice 30) Day 30 : #100DaysofCode - Very basic rails continued 31) Day 31 - #100DaysofCode - Rails Routes 101 32) Day 32 : #100DaysofCode - Resources for learning to code 33) Day 33 - #100DaysofCode - Setting up my app on Heroku 34) Day 34 - #100DaysofCode - New/edit action versus create/update action 35) Day 35 : #100DaysofCode - A Code Challenge Completed 36) Day 36 - #100DaysofCode - Rails form_for versus form_tag 37) Day 37 : #100DaysofCode - 30 seconds of code 38) Day 38 - #100DaysofCode - Built my first basic rails application 39) Day 39 : #100DaysofCode - I updated my github profile page 40) Day 40 : #100DaysofCode - I need project ideas 41) Day 41 : #100DaysofCode - Collaboration 42) Day 42 : #100DaysofCode - The Planning of a Project 43) Day 43 : #100DaysofCode - The Amazing Faker Gem 44) Day 44 : #100DaysofCode - Code or Youtube? 45) Day 45 : #100DaysofCode - Basic Nested Forms 46) Day 46 : #100DaysofCode - Still reviewing form_for 47) Day 47 : #100DaysofCode - How do you code? 48) Day 48 : #100DaysofCode - Code Along 49) Day 49 : #100DaysofCode - Still Coding Along 50) Day 50 : #100DaysofCode - Keep Coding Along 51) Day 51 : #100DaysofCode - Code Along 52) Day 52 : #100DaysofCode - No Wifi, No Problem 53) Day 53: #100DaysofCode - Created user log in and log out functionality 54) Day 54 : #100DaysofCode -Review on setting up log in & sign up 55) Day 55 : #100DaysofCode - In Need of Advice on Reading Poorly Written Documentation 56) Day 56 : #100DaysofCode - A Tweet - Devise - Users 57) Day 57 : 100DaysofCode - Remembering to Git Commit Often 58) Day 58 : #100DaysofCode - Beginning to Learn Python 59) Day 59 : #100DaysofCode - Focused on My Rails Project 60) Day 60 : #100DaysofCode - CSS in Rails 61) Day 61 : #100DaysofCode - Omniauth? 62) Day 62 : #100DaysofCode - Sign in using a Third Party, Rails 63) Day 63 : #100DaysofCode - Refactoring 64) Day 64 : #100DaysofCode - Still Playing Around With OmniAuth 65) Day 65 : #100DaysofCode - Second Rails Project - I Want to Try Self-Referencing Tables

Posted on by:

sincerelybrittany profile

Brittany

@sincerelybrittany

Web Developer | Software Engineer 👩🏾‍💻 | Determined | Music & Dance | #100DaysofCode | #WomenWhoCode

Discussion

markdown guide