CSS Tips

Those are some tips from an Udemy course I bought to better understand CSS.

The first lessons were about basic rules that I already know, I’m adding here some of the advanced tips or useful stuff to keep organized so I can later come back and remember when I need to.

General

Combinators

Adjacent Sibling:
    <div>
         <h2>Not applied</h2>
         <p>-- Applied --</p>
         <h3>Not Applied</h3>
         <p>Not applied</p>
         <h2>Not applied</h2>
         <p>--Applied --</p>
    </div>
General Siblings:
    <div>
         <h2>Not applied</h2>
         <p>-- Applied --</p>
         <h2>Not applied</h2>
         <h3>Not applied</h3>
         <p>-- Applied --</p>
    </div>
Child:
    <div>
        <div>Not applied</div>
        <p>-- Applied --</p>
        <div>Not applied</div>
        <article>
            <p>Not applied</p>
        </article>
        <p>-- Applied --</p>
    </div>
Descendant:
    <div>
        <div>Not applied</div>
        <p>-- Applied --</p>
        <div>Not applied</div>
        <article>
            <p>-- Applied --</p>
        </article>
        <p>-- Applied --</p>
    </div>

Box Model

Box Sizing

Display Property

Pseudo Classes & Pseudo Elements

CSS Class Selectors vs ID Selectors

!important

Overwrites specifity and all other selectors, in general: don’t use it.

Outline

Comparable to a border, but it is not part of the box model. It is applied to buttons under the :focus property. It is placed between the border and the margin in the box model. I can remove it with outline: none;.

Float

Example: float: right; will move an element to the right taking it away from its document flow.

float has been created for positioning images in text and make the text ‘flow’ around the image. It’s not the best choice for positioning block level elements: other elements might be influenced by a floating one.

A common hack is to create a div after the floating element and add the css rule clear: both; to it. All the elements coming after the div will not respect previous floats.

Flexbox is way better for positioning elements.

Position

If the position property is different from static, the top, right, bottom, left properties will define the behaviour of the position property.

top, right, bottom, left properties can work in different positioning contexts: