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.
Prefer kebab-case to name id and class selectors
Multiple rules can be applied to the same element, the conflicts are resolved following this rule (most important to less important):
inline styles > #id selectors > .class, :pseudo-class and [attribute] selectors > <tag> and ::pseudo-element selectors
h2 + p { }
:
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>
h2 ~ p { }
General Siblings:
<div>
<h2>Not applied</h2>
<p>-- Applied --</p>
<h2>Not applied</h2>
<h3>Not applied</h3>
<p>-- Applied --</p>
</div>
div > p { }
Child:
<div>
<div>Not applied</div>
<p>-- Applied --</p>
<div>Not applied</div>
<article>
<p>Not applied</p>
</article>
<p>-- Applied --</p>
</div>
div p { }
Descendant:
<div>
<div>Not applied</div>
<p>-- Applied --</p>
<div>Not applied</div>
<article>
<p>-- Applied --</p>
</article>
<p>-- Applied --</p>
</div>
Margin Collapsing Two adjacent elements sharing one margin event tough each element has its own one
Adjacent Siblings
The first element might have a margin of 10px on all sides and the second one has 5px. CSS will collapse the margins and only add the bigger one between the elements. So if I got margins of 10px and 5px, a 10px margin will be added between the elements.
A parent with children that have a margin
The first or last or the only child has to have margins. In that case, the parent elements margin will collapse with the child element margins. The bigger margin wins and will be applied to the parent element.
An empty element with margins
If I got an element with no content, no padding, no border and no height, then the top and botton margin will be merged into one single margin. The bigger one wins.
box-sizing: content-box;
box-sizing: border-box;
display: block
display: inline
display: inline-block
display: none
visibility: hidden;
instead.Pseudo Class:
Defines the style of a special state of an element
Examples: :hover
, :active
, :not()
Pseudo Element:
Defines the style of a specific part of an element
Examples: ::first-letter
, ::after
, ::before
Overwrites specifity and all other selectors, in general: don’t use it.
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;
.
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: static;
is applied by default.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:
<div>
viewport
<html>
<body>
<…>
position: absolute;
position: relative;
position: fixed;
position: sticky;