(Day 15 of 100) CSS Basics 1

Topics Covered: CSS Prop lists, styling methods:(style, class, id, inline, attribute, variable), :root, responsive web w/ media query, padding & margin

What I learned:

0. Checkout CSS properties list here and here.

1. Styling with style, class, id and inline style

text color of h1 is overridden in the order: body-> .pink-text-> .blue-text-> #orange-text-> inline-style

But if you declare important, this style will override all other styles

2. styling [ attr=value ]

3. styling with variable

, gray falls back background color to gray if variable wasn’t set

4. :root -> This element is a container for entire HTML document, in the same way that an html element is a container for the body element.

penguin-belly variable is available for use in the entire HTML context.

5. responsive webpage with media query

when the size of the web reduces below 350px penguin-size and skin are overwritten

6. Padding & Margin

Padding : spacing around the content

border: A borderline that wraps around the padding and content

Margin: Spacing out side the border

You can have negative values for padding and margin

Clockwise notation: top, right, bottom, left

That’s all! Thanks!

Current technology stack in mind: React+Redux+Flexbox+GraphQL+Python+Django+PostgreSQL

Total time spent on the challenge: 5 hours

Actual Time focused on the challenge: 2 hours

What I did:

1. Did css excercises from freecodecamp.org

Plan for next day:

1. Complete studying on css
2. Start studying on flexbox