Learn CSS in 16 Post-it® Notes

  1. Cascading Style Sheets Operate on Inheritance

CSS has a ancestor-descendant relationships. Anything previously defined by an ancestor will automatically be inherited by one of its children unless otherwise specified.

Cascading Style Cheets

2. Last Wins

If an element is defined in more than one place within CSS, the last definition overrides the previous. (If these stickies represented colors we styled our h1’s, the h1 would appear pink.)

 

h tags

Cascading Style Sheets Tags

3. Key Value Pairs

For every HTML element to be styled, a corresponding CSS selector must be assigned. They always appear in key value pairs.

Key Value Paris

4. Layout

Websites can be broken down into components or divs for layouts. It is helpful to conceptualize the overall structure of a website before writing HTML or CSS.

website structure

5. Tree Structure

Likewise, structuring a site also follows the tree methodology. This sticky illustrates the one above in tree-branch form.

6. Block vs. Inline

Elements that stretch across the full width of a page are block elements. A few block elements include headers, footers, headings (h1, h2, h3, etc.), divs, paragraphs (p). Inline elements only take up as much room as they need to; span, links (a), and images are a few examples.

1-p0x9ryygha5yyb5jbb34aq

7. Inline-block

There is also such a thing as setting display: inline-block to create a uniform grid. Inline-block elements can have a height and width.

block

8. Box Model

All CSS elements are based on this model. The innermost box is content (could be anything), immediately surrounding content is its padding, then border, and finally, the outermost box–margin.

bozModel

9. Margins Outside

Margins push out around an element. Margins are considered to be outside of the element, and margins of adjacent items will overlap.

Margins

10. Padding Inside

Padding pushes inward on content. Use padding to move the contents away from the edges of the block.

Padding

11. Auto Margins

Setting margins to auto for right & left is a handy way of centering.

Margin Auto

12. Max-width

Max-width prevents the value of the width property from becoming larger than max-width. This is especially helpful when designing for smaller screens (like mobile!)

Max Width

13. Relative and Absolute

Set a parent element to position: relative and its child to position: absolute to position the child within (or relative) to its parent. Note that the parent is always body by default.

Parent

14. Float

Setting an element to float, like the img below for example, will allow the text to flow around it.

15. Fixed

Fixed elements are exactly that, they are always fixed to the same spot, regardless of page position (scroll).

Fixed

16. Link up your style sheet!

If you don’t link your style sheet in the header of your HTML, your website will be sad, and probably unattractive. 😥

<link rel=”stylesheet” href=”./css/style.css”>

finished
0 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

©2024 Luke Angel

Log in with your credentials

Forgot your details?

%d bloggers like this: