CSS Basics
I want to share some basic CSS that I wish I knew at the start of my web development journey. These tips have been boiled down, shaved, filtered and thickened. Im only including the juicy bits and will not be getting into the nitty gritty of what, only how. Explanations will be puddle-deep but that’s all you really need to get a little drink of CSS. I will cover:
Color selection:
While this isn’t CSS, it does tie in directly. For deciding your color scheme, use Adobe Color Picker https://color.adobe.com/create/color-wheel
This color wheel is ideal. All throughout my time at Flatiron Coding Bootcamp I struggled to pick complimentary colors and would just guess on what looked good. Well no more!
Measurements:
There are 15 different units of measurement for CSS. They can be separated into two categories: absolute and relative.
Absolute units will be the same size no matter the browser window’s size. They are not useful for making a responsive website. Relative units will scale according to another length property. There are nine different relative length properties. The most useful in my opinion are: em, rem, vh, vw, vmin, vmax and %.
em: Relative to font size of element
rem: relative to font-size of root element
vw & vh: relative to 1% width/height of browser window, respectively.
vmin: relative to 1% or browser window’s smaller dimension. This could be useful for sizing for a mobile device’s horizontal and vertical viewing.
%: relative to the parent element
Helpful tip: when adjusting your sizings for mobile, you can use the media query and set a max-width for when you want to apply a separate set of rules.
Testing:
In order to see these relative units in action, you need to test your website’s scaling. This can be easily done. Chrome Dev Tools has a great mobile simulation, where you can specify the type of phone screen to simulate.
These are the steps I take to ensure I have a responsive design:
1. Make your browser window really thin, then really wide. Does everything look okay? Can you still read the font when the website is at its widest?
2. Shrink your site to 25%. Then expand to 150%. Does anything break?
3. Then turn on the mobile viewing. Check that the smaller phone displays look okay.
4. Switch it to the Ipad simulation, can you still read your font?
5. Lastly click the rotate button to make sure your website looks okay on a horizontal phone screen.
Display vs Positioning:
Positioning determines how an item will be positioned on the page relative to other items. The default is static which will appear in same order as your document. The Top, right, bottom and left properties have no effect on static positioning. This is important and can be the source of frustration if you don’t know this.
The positions I mainly use are relative and absolute. They basically allow you to adjust an elements position using the left, top etc. attributes.
Display specifies the type of rendering box that is created. Basically how the elements are arranged within another element.
Display: flex;
I use flex on most elements. It allows me to use align-items: center and justify-content: center to make everything centered.
One drawback is that flex puts elements on the same line. This can be solved by specifying the flex direction and setting it to column. Flex wrap can be useful in increasing responsiveness of your website. Use it to make elements display as a row or column, depending on browser window width.
Margin and padding:
Margin is the space around an element and padding is the space between an element and the contents inside it.
In other words, margin is for spacing between elements and padding is for spacing inside an element. Both padding and margin use the same syntax for sizing. You can easily specify how much padding or margin for every side of an element. It depends on the amount of values you use. One, two, three or four.
One value makes all sides have even padding or margin.
Two values for specifying top+bottom then right+left.
Three values for top, right+left then bottom.
Four values for top, right, bottom then left.
Thats it. I hope you found some info here of use. I wrote this blog with my past self in mind, trying to give advice that I wish I was given starting out.
