Advanced CSS Techniques and Properties

There are many important ways CSS can be used to make your website look beautiful. We’ll start with some special background properties and go all the way to advanced website layouts. Let’s get started.

Background magic

There are many different things you can do with backgrounds, set a color, set an image, make it repeat, change its size, change the position, and much more. So let’s look at the different examples.

Background Color

background-color is the simplest one, allowing you to change the background of an element like this

See the Pen simple-background by Angel Grablev (@agrublev) on CodePen.

Background Image

background-image allows us to add an image to the background like this

See the Pen background-image by Angel Grablev (@agrublev) on CodePen.

Okay let’s pause here as a lot of interesting things just happened we need to pay attention to.

1. If you have an empty element like in the example above you will not see the background image unless you set a width and height, simply because an element with no content is invisible (0 height means you can’t see it). You can alternatively add padding as well, but height/width is preferred as you should know the dimensions of the image
2. The background logo image we set seems to appear twice! What happened here? Well there is a background property called background-repeat which is enabled by default, so our background image will repeat down and right to fill the size of the element like this

   

3. We’ll tackle the repeat issue below

Background Repeat

background-repeat is enabled by default, to disable it we must set no-repeat as the value like this:

.background {
    background-image: url(https://ucsbwebdev.fzilla.com/first/logo.png);
    background-repeat: no-repeat;
}

Great, so we’ve applied two background declarations and now we have an image that does not repeat. But what if we also want to have a background color behind the logo in case the element has a bigger width/height than the image itself? Simply apply the background-color as well like this:

See the Pen background-repeat-color by Angel Grablev (@agrublev) on CodePen.

Background Size

background-size is used to specify an alternative set of dimensions to the image. Let’s consider the following three examples:

See the Pen background-size-examples by Angel Grablev (@agrublev) on CodePen.

In example1 we force the width and height of the image to be width = 200px and height = 20px and the image becomes a bit stretched as we’re not keeping the original image’s proportions

In example2 we’re stating that we want the width = 30% which is not based on the width of the image but instead uses the width of the element (which in our case is set to 300px, so 30% is rougly 100px). Because we only define the width the height is actually automatically adjusted to keep the proportion of the image and does not stretch it.

In example 3 we set the width = 100% and the height = 100% meaning it will fit the container (element which has the background image) both horizontally and vertically stretching it to fit.

Now let’s get more advanced with some special background-size properties, consider the following examples:

See the Pen background-fit by Angel Grablev (@agrublev) on CodePen.

In example1 we use a property value called cover which will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off on direction. In our case, it cuts off a lot from the right side to fit it vertically. If the image was higher than wider it would cut off from the bottom instead.

In example2 we use the contain property value which resizes the background image to make sure the image is fully visible while filling the container as much as possible.

In example 3 we specify a width of 10px and a height of inherit, as soon as we set the width or height to be inherit the image will display in its original sizing.

Shorthand Properties

In many situations, we can use the shorthand properties to define a list of declarations in one line. For example, the background properties background-color, background-image, and background-repeat can easily be declared under a single background declaration like this:

.background {
    background: black url('https://ucsbwebdev.fzilla.com/first/logo.png') no-repeat;
}

Also quite commonly we would not specify a margin or padding for each direction, instead would use a single declaration. To specify each direction we follow the following pattern top right bottom left or the way I remember it is using Never Eat Sour Wheat which stands for North East South West. Here are some examples:

.shorthand {
    margin: 100px 0 0 50px;
    padding: 50px 20px 30px 40px;
}

The result is equivalent to:

.shorthand {
    margin-top: 100px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 50px;
    
    padding-top: 50px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

Important Trick to Center an Element

Very often we want to have a large panel that contains all our website content, typically around 960px wide (fits in all desktop computer resolutions) which is centered. To do this we use a hack with the margin shorthand which looks like this:

See the Pen padding-margin-shorthand by Angel Grablev (@agrublev) on CodePen.

Or in a browser like this:

Common 3 Column Layout with Flex

See the Pen 3columnflex by Angel Grablev (@agrublev) on CodePen.

I’ve added a number of styling just to see it visually, but the important elements of this layout are as follows:

1. .main-wrap has a width of 960px which is a standard and a margin: 0 auto; which keeps it centered on the page
2. .columns is flex with a justify-content: space-between to keep the space between our columns even
3. .left-col has a specific width, this is because very often we want a specific type of content which requires some minimal width
4. .center-col has a % width which is easier to set than doing a calculation ourselves (subtracting from 960 yada yada) and we also add a shorthand margin which adds a left and right margins of 15px. This adds a nice visual spacing between the columns
5. .right-col uses a special feature of flex, when you set a column to be flex: 1; it simply takes up as much space as there is left available to grow. If we did not set this it would look like this

   
   We don’t really want to have that much space between columns do we? With flex 1 it respects the margin from .center-col and takes up the remainder nicely.