Tips for Beginners – Learning Basic CSS Layout

https://www.youtube.com/watch?v=yP3n-51eB8Y

Here are some beginner’s tips to guide you as you are learning Cascading Style Sheet (CSS) layouts:

1. Learn by doing: understand how to manipulate elements. It does not have to be pretty at first; you only need to understand the syntax and see what your piece of code does.

2. Practice with simple properties first, such as your <p> tags or your <h1> tags.

3. Display Properties: another way to control how elements are displayed, such as inline and block.

4. Float and Clear: understand how to float elements to create columns and understand how to clear to keep elements from stacking or overflowing onto other elements.

5. Box Model: understand that each element is it’s own container with it’s own margin, border, and padding.

6. Positioning: this will help you determine where elements are placed. Your options are static, absolute, fixed, inherit. Learn by doing to see what each positioning does.

7. !important: use this to override a style for any element you wish to be different from the rest. For example, if you have all <h1> styled green and would like one of them to be a different color, then use !important to do so.

8. Centering: this sounds simple enough, but can be confusing due to all the ways you can go about it. Think about what you need to center and target those elements. Things to consider when you are centering – text, images, inline elements, block elements, etc.

9. Flex box: this is not a CSS layout basic, but a theme that can be used to help you arrange items using CSS. It saves time and makes centering easier to handle.

10. Max-width: use max-width to make your images be responsive as it shrinks from the big screen to smaller screens, such as mobile devices.