What I picked up from W3Schools CSS tutorial

Get Started. It's Free
or sign up with your email address
What I picked up from W3Schools CSS tutorial by Mind Map: What I picked up from W3Schools CSS tutorial

1. Margin

1.1. Short hand can have one to four values

1.1.1. one: margin on all sides

1.1.2. two: top&bottom and left&right

1.1.3. three: top, left&right, bottom

1.1.4. four: top, right, bottom, left

2. Nesting Selectors

2.1. after declaring a class selector, you can define other elements within that class

2.1.1. .marked p will only apply style to paragraphs within a .marked class

3. Display

3.1. "none" can be used to hide elements

3.2. "block" elements take up the full available width and come with a line break before and after. examples include h1, p, div

3.3. "inline" elements only take the width they need and do not force linebreaks, like span, a

4. Positioning

4.1. the default behaviour of an element is "static", e.g. unaffected by top, bottom etc

4.2. "fixed" will lock the element relative to a position relative to the browser window. It won't move even with scrolling.

4.3. "relative" will position the element relative to its own normal position. Negative values are allowed

4.4. "absolute" puts an element anywhere you want, and will remove the element from the normal flow of the page

4.4.1. If elements go outside the normal flow, they can overlap with other elements. In this case, the z-index variable controls if the element is in front or behind another one.

4.5. Specific tutorial on positioning

5. Float

5.1. floated elements will always go to the far right or left, and text or other elements will flow around it.

5.2. You can float images next to eachother and they will line up as long as there is place.

5.3. clear is used to break the flowing behaviour of elements that would normally go around floating elements.

6. Horizontal Aligning

6.1. margin-left and margin-right on auto will naturally center block elements

6.2. As an alternative, absolute positioning can also be used

6.3. watch out with IE8 compatibility

7. ID and class selectors

7.1. # selects an ID, for very specifc elements

7.2. . selects a class, for groups

7.2.1. p.center selector applies a style to all paragraphs that received the center class

8. Backgrounds

8.1. background-repeat controls repeating

8.1.1. repeat-x will only repeat horizontally

8.2. attachment controls whether bg stays fixed or scrolls with the rest of the page

8.2.1. fixed will avoid scrolling

9. Font

9.1. There's a difference between a "generic family" and a "font family"

9.1.1. Sans-Serif is a generic family, as it can cover any sans serif font

9.1.2. Arial is a font family, within the generic family of sans serif fonts

10. Links

10.1. Links can be styled according to the state they are in.

10.1.1. a:visited, a:hover, ...

10.1.2. this is a special case of so called pseudo classes

11. Table

11.1. By default, a table has double borders. this is because both the table and the th/td elements have separate borders. to avoid this, use the border-collapse element

11.1.1. border-collapse:collapse;

11.2. padding on a td selector controls the space between the cell content and the border. This is no different from other elements in the CSS box model

12. Box Model

12.1. Width determines width of the content area

12.2. To calculate total width, you need to add padding, border and margins

13. Outline

13.1. Outline is an extra decoration outside the border, but still inside margin

14. pseudo classes

14.1. indicated by colons (:)

14.2. :first-child is one useful example

14.3. :focus is a pseudo class for an element that has the focus

15. @media: CSS Media Types

15.1. rules for specific devices and ways of displaying