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 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:
- Basics: Tags, classes and IDs.
- More complex selectors: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
No comments:
Post a Comment