CS50 CSS

CS50 CSS

1. Tips

   • Uniqueness
     • We can use id to style a element thats unique and class when an element its not unique reference to id: #uniqueid reference to class: .thisclass
   • Specificity
     • In what order does our elements get style if we have multiple selectors that affect one single element. The order is the next: 1. Inline 2. Id 3. Class 4. type

2. Selectors

   • Used to choose different elements with different relationships between them
   • https://www.w3schools.com/cssref/css_selectors.asp

3. Responsive Design

   • Making sure that our webpages look good no matter what size is being watched on
   • Viewport
     • Visual part of the screen that the user can actually see
   • Media Queries
     • Controlling how are page is going to look depending on what type of browser we are using to view it
   • FlexBox
     • When you have multiple elements that you trying to display, you gotta be careful they do not overflow.
   • BOOTSTRAP
     • Powerful library that enable us to user stylings that they have written

4. SASS

   • Extension of the CSS language that makes it more powerful with the addition of various features including variables.
   • Variables: allow us to save values instead of repeating them over and over. Nesting: We can write nested elements inside of the brackets instead of doing by separate that way having cleaner synthax.
   • Compiling
     • Since our browsers dont recognize scss or sass files we need to compile them to css before we link them in our html.  We do this by installing sass via npm, then running the code in the command prompt: * sass cssfile.css sassfile.sass Or we could tell sass to be ready for changes so we dont have to be compiling every single time by running the code: *sass --watch cssfile.css sassfile.scss