What I picked up from W3Schools CSS tutorial

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

1. ID and class selectors

1.1. # selects an ID, for very specifc elements

1.2. . selects a class, for groups

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

2. Backgrounds

2.1. background-repeat controls repeating

2.1.1. repeat-x will only repeat horizontally

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

2.2.1. fixed will avoid scrolling

3. Font

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

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

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

4. Links

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

4.1.1. a:visited, a:hover, ...

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

5. Table

5.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

5.1.1. border-collapse:collapse;

5.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

6. Box Model

6.1. Width determines width of the content area

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

7. Outline

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

8. Margin

8.1. Short hand can have one to four values

8.1.1. one: margin on all sides

8.1.2. two: top&bottom and left&right

8.1.3. three: top, left&right, bottom

8.1.4. four: top, right, bottom, left

9. Nesting Selectors

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

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

10. Display

10.1. "none" can be used to hide elements

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

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

11. Positioning

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

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

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

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

11.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.

11.5. Specific tutorial on positioning

12. Float

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

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

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

13. Horizontal Aligning

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

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

13.3. watch out with IE8 compatibility

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