Intermediate CSS Tips

Photo by Pankaj Patel on Unsplash

Element Position

Static: This is the default position for any element. The element goes with the normal flow.

div {
  position: static;
}

Fixed: A fixed position element will stay in the same position, even when the user scrolls. In the example below, the element will stay at the top right, even when scrolling, without floating.

div {
  position: fixed;
  top: 0;
  right: 0;
}

Relative: In relative positioning, the element is positioned away from its normal position based on the values given. In the below example it will be the push from the top and left of its normal position.

div {
  position: relative;
  top: 25;
  left: 25;
}

Absolute: In absolute positioning, the element is positioned relative to the nearest positioned ancestor. If there are no relative elements, it will follow the document body.

Pseudo Elements

Pseudo Elements allow you to target a specific element. For example, in the below example “::first-letter” is the pseudo selector. In this case, we are changing the first letter in the paragraph to have the color blue.

p::first-letter {
  color: blue;
}

Efficient CSS

For your CSS, browsers read selectors starting from right to left. Really this only makes a significant difference, if you were to have a lot of links on the page. For example on a dynamically generated page, with hundreds of links.

#myLinks a{
}

In the above example, the browser will read all <a> tags until it finds a parent with an id of myLinks. A more efficient approach is to give the <a> tags a class, like the below example.

#myLinks coolLink{
}

Mobile First vs Responsive

Mobile-first refers to designing and optimizing the website to work on mobile devices, then scaling up afterward. Mobile-first usually doesn’t spend much time on optimizing for bigger screens such as a desktop. PWA

Get Coffee Bytez’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Responsive is pretty much the exact opposite of mobile-first. You design and optimize first for desktop, then scale the website down to work on mobile devices.

Media properties

You probably know of media properties used to make responsive queries, but also check other media queries that can be useful for other use cases. For the example below, in landscape mode, the text on the page will turn red.

@media only screen and (orientation: landscape) {
  body {
    color: red;
  }
}