CSS Tricks that are a must know!

Reading Selectors

Be aware that a Browser reads selectors from right to left.

For example if we had:

#menu ul li a { color: #00f; }

The browser first checks for a, then li, then ul, and then #menu. This is because as the browser is scanning the page it just needs to look at the current element and all the previous elements that it has scanned.

Absolute Positioning

With absolute positioning is has no positioned ancestors and it uses the document body. It allows you to position and control exactly where you want it to be on your page.

position:absolute;
top:20px;
right:20px

• 20px from the top and right edges of your browser.

Width and height

Width and height can be written in several ways:

1. px - Pixels.
2. em - A unit of measurement, where 1 em = current font size.
3. rem - Root em. Same measurement as em, but makes life much easier without the inheritance problem
4. % - Percentages.
5. auto - highly useful unit, will explain below.

You can also use a lot more but I believe these are most commonly used and easy.

Overriding Styles with !important

By simply writing

h2 { color:red !important; }

It will override other styles for a specific element. This should be used carefully and used when you are in deep trouble and need help.

Resizing images to fit on the page

img {
    max-width:100%;
    height:auto;
}

This helps with specific images and needing them to fit in a certatin way. You can also say height: 100%;

Getting the direct child

By writing

#footer > a

You can get the direct child of the Footer and it saves time. It will only select the active link tag which is in the Footer.

You can also get a specific child by writing:

li:nth-child(2) {
    font-weight:800;
    color: blue;
}

Specifically helpful for writing lists! This will get the second item in the list and change its weight and color.

Borders Properties

With Borders You can can change 3 main properties:

1. border-width – width of the border. Same units as width and height
2. border-style – style of the border (Solid, dotted, dashed, double, ridge, none, hidden, and many more!!)
3. border-color – color of the border.

Floats

It is used for positioning and formatting content. When you see 2 columns of text or images side by side most likely float is in play.

Floats have 3 basic properties that you might use often:

1. left
2. right
3. none - removes the float
4. inherit

For example

img {
  float: right;
}

This Image will float to the right of the page or container.

Background

Here are the main Background properties:

1. background-color: color of the background.

2. background-image: url(URI). Takes on the path to your image. For example, to go down one folder, you should type the file name before the image.png. E.g. css/image.png. Or to go up one folder, type the file name with “…/”. E.g. …/css/image.png

3. background-repeat: to repeat if the width exceeds the background size. Or other values are repeated e.g. repeat-a and repeat-b.

4. background-position: position of the background relative to the HTML element. It sets the starating position of a background image. It takes two values (a, b). a is the offset from left and b is offset from the top. It uses unit values (like width and height) or left,center,right and top,center,bottom.

In conclusion these are only a few of the Essentials for CSS. But there are thousands more that I challenge you to go out and explore. I hope this Helps :)