Thursday, May 28, 2020

CSS (Cascading Style Sheets)

https://classroom.udacity.com/courses/ud001/lessons/7473321627/concepts/74276264120923

CSS Tricks: https://css-tricks.com/almanac/

CSS: how the content should look in the webpage (layouts, colors etc)
HTML: the actual contents
[Without CSS, HTML allows basic formatting such as bold, italic etc, but nothing more. To use various layouts, use CSS]
NOTE: without CSS, browser also can apply default styling settings.
Youtube without CSS is something that would look like when the internet connection is slow.


  • CSS has rule-sets.
  • And a rule-set is nothing but rules on how to render the tags
  • For ex: div : {color: blue} => would mean, render everything under 'division' in body in blue color
  • Hence it has 2 parts: tags and the declarations. 
  • CSS rule-sets are written inside <style></style> tags inside <head> tags
  • Comments inside CSS is same as C or C++: /* CSS comments */
  • NOTE: Comments inside html is different <!-- comment here -->
  • attributes and classes:
    • p { colors: red }; => will change all the paragraph colors to red.
    • but if we want to change a particular paragraph (id) or a group of paragraphs (classes) to a color, we need id and classes.
    • while declaring a tag in <body> include the id (id is similar to a variable in C) or classes (group of tags marked to apply a particular setting)
    • <p id="site-description">check out my site description</p>
    • <p class="book-summary another-class">Algorithms</p>
      • NOTE: an html tag can belong to multiple classes (multiple groups/selectors)
    • And in CSS styles, 
      • <style>
        • .book-summary { => classes starts with '.'
          • colors:red
          • }
        • #site-description { => id (variables/attributes) starts with #
          • colors:pink;
          • }
  • Colors:
    • .sidebars {
      • color: rgb(0, 0, 225) => blue
      • color: blue => blue
      • color: #0000ff => blue
      • color: #00f => blue (short-hand representation of 0000ff)
  • Selectors:

No comments:

Post a Comment