blog.noob.pro

Very learning, much smart, so motivation

Diving Deeper Into CSS

My CSS study notes:

  • The Box Model
  • Height & Width
  • The “display” Property
  • Properties you should remember
  • Pseudo Classes & Elements

Every element in HTML is interpreted as a box (e.g. when you select an element in Chrome Developer Tools you will see this). This is how CSS ‘sees’ a HTML element.

image-20190127120636332

The margin is not part of the element (border and padding are). The margin is the distance between the element and its sibling elements. The above image depicts the box model (the solid black box depicts with element).

The browser has default margin options that it will apply.

The below code snippet shows how to write CSS in shorthand format (compared the normal/complete way).

#product {
    border-style: solid;
    border-color: black;
    border-width: 5px
}

#product {
    border: 5px black solid;
}

The browser (Chrome) will also by default add margin to the body (so no elements go the edge of the page/screen).

Margin collapsing:

If you have two elements next to each other than margins between them collapse into one margin.

image-20190127121753637

image-20190127121823600

This is here so we don’t have very large margins between elements (by default embedded into CSS). In general, you should use either margin-top or margin-bottom, to avoid collapsing (or you can have collapsing and ignore the issue).

Margin Collapsing cases:

1. Adjacent Siblings

In this case, the first element might have a margin of 10px (on all sides let’s say) and the second one has 5px (or 20px - the values don’t matter).

CSS will collapse the margins and only add the bigger one between the elements. So if we got margins of 10px and 5px , a 10px margin would be added between the elements?

2. A parent with children that have a margin

To be precise, the first and/or last or the only child has to have margins (top and/or bottom). In that case, the parent elements margin will collapse with the child element(s)’ margins. Again, the bigger margin wins and will be applied to the parent element.

If the parent element has padding, inline content (other than the child elements) or a border, this behaviour should not occur, the child margin will instead be added to the content of the wrapping parent element.

3. An empty element with margins

This case probably doesn’t occur that often but if you got an element with no content, no padding, no border and no height, then the top and bottom margin will be merged into one single margin. Again, the bigger one wins.

Shorthand Properties

Combine values of multiple properties in a single property.

image-20190127123504005

The last example (margin: 10px ) will set a margin of 10px for every side.

This is just syntax sugar.

When you write background: #ff1b68; you are actually setting the background-color property, using background is just shorthand for background-color. Same with just setting margin vs margin-left.

image-20190127142943891

Block level HTML elements always take up 100% of the width of the screen. If you set width: 50% on a block level element it will then take up 50% of the screen size. If you set the height: 100% then the HTML element (e.g. <h1>) will take up all available space (i.e. it will include the margin area). By default (e.g. the <main> HTML element) will calculate its height dynamically. Therefore, if you set the height to 100% the size might not change since its height is already as big as is needs to be. If you set the height of the <html> element to 100% then its children will take up the entire space on the screen.

Understanding Box Sizing

In the below example we set the width: 100%. This is just setting the width of the content; the padding and border is not included in what width and height target. Therefore, this element will actually be bigger than the size of the screen as the padding, border, margin is added to the 100% figure.

image-20190127144317572

By default, the box-sizing property equals box-sizing: content-box;, this means that if we set a width and height, we set the width and height of the content, not the entire box. If we set this to box-sizing: border-box, then the padding and border is included in the width/height calculation (the margin is not). It is common to override the style of all elements (e.g. in the universal selector; we cannot set this in the body element since the browser will override it…) to box-sizing: border-box. Just not that the margin is extra space that is added to the 100% figure.

Adding a header

Set the width to 100%

main-header {
    width: 100%;
    background: #2ddf5c;
    padding: 8px 16px;
}

To make the list items <l1> appear horizontally (not vertically).

<a> are rendered inline by default. They only take as much width as they need. Inline elements also don’t have a margin top and bottom because they might be in-line with another element. padding-top and padding-bottom also have a different effect. They push the adjacent content away, but they do so with the element border. Setting a width and height also has no effect, they take up as much space as required.

However, note that vertical padding and border are still applied, and the padding still pushes out the border:

vertical-border-padding

display: none;

If we set display to equal none, it will still be part of the DOM but invisible to the user. So, we can make it invisible and visible again. The element is not visible, and it won’t block other elements (other elements can take its place).

display: inline-block;

Elements can go next to each other; however we can set the top & bottom margin. They behave like an inline element, so they only take up as much width as they need, they still have a box where we can set padding.

The difference between visibility: hidden; and display: none; is that when we set the visibility to hidden the element is still part of the DOM, it is not removed from the document flow so there will be an empty space where it was (other elements cannot take its place).

We can use the calc() function to perform a calculation (not the whitespace between the - sign and the numbers is important).

.main-nav {
    width: calc(100% - 49px);
}

In the below example, the whitespace between the end of the <div> and the start of the <nav> is causing another extra inline element to appear (this can cause your content to go onto another line). So, you should remove it.

image-20190128133821596

Pseudo class

Looks like this:

.main-nav__item a:active {
    color: white;
}

Pseudo classes and pseudo elements

Pseudo classes: (one colon) allow you to control different states or to be more precise about what we want to select. For example, we can use :focus to apply different CSS to an input element when it is in focus.

Pseudo elements: (two colons) allows you to style a specific part of an element. For example: ::first-letter allows you to style the first letter of a <p>. You are only styling a part of the element, not the whole thing.

image-20190128140831442

p::first-letter {
    color: red;
    font-size: 20px;
}

In the above example, the first letter of the paragraph will be red (and bigger than the rest of the text in the paragraph).

.main-nav__item a:after {
    content: " (Link)";
    color: red;
}

In the above example we are adding (appending) content (text) to the value of the anchor tag. Note: the content property can only be used on the after & before pseudo classes. This allows us to append content and style it differently or add extra/less CSS styles.

Grouping rules

.main-nav__item a:hover,
.main-nav__item a:active{
    color: red;
}

In the above example we are grouping two rules. Note: this is not a combinator, we are just sharing the same code/styles between the rules.

Call to action button

<li class="main-nav__item main-nav__item--cta">
	<a>Call to Action</a>
</li>
.main-nav__item a:hover,
.main-nav__item a:active{
    color: red;
}

.main-nav__item--cta a:hover {
    color: white;
    background: black;
}

In the above example we are essentially overriding some styles for the anchor element that falls under a main-nav__item--cta CSS class. Note: since both styles have the same specifity (same descendant combinator), the order in the HTML file is important. This lets us override styles for one anchor element that has the main-nav__item--cta AND the main-nav__item CSS classes applied.

Properties worth remembering

image-20190128145556121

Wrap Up

image-20190128145920845

Comments

Loading comments...