A Few Basic (and fun!) CSS Properties

A crash course in manipulating webpage style with basic CSS Properties

So you’re new to CSS, and you’re thinking “What is it?,” or “A 90 minute lecture was a very short time to cover such a complex topic!” Or perhaps you simply thought you typed “cats” into a search bar, after one too many gin-and-tonics, and found yourself stumbling through the saloon-doors of this very hastily-written blog.

Whatever the case, welcome! What follows is a brief introduction to some basic and fun properties of Cascading Style Sheets, a style sheet language used to style documents written in various markup languages, like HTML.

🎵 Come with us now on a journey through time and space and style sheets… 🎶

In the following examples I used the W3Schools in-site “Try it Yourself” console.

background-repeat

The background-repeat property sets whether or not, and in what manner, a background image will repeat. Here we target the body tag of an HTML document as we did in the previous example.

Changing the value of background repeat in the following ways will render different results:

no-repeat will only show the image once on the webpage background.

repeat-y will repeat the image vertically.

repeat-x will repeat the image horizontally.

repeat will repeat the image will repeat the image both vertically and horizontally until the entire window is filled.

background-image

The background-image property allows you to set a source image as the background of a particular web page:

This property allows you to set one or more background images for an element. It automatically places the image at the top-left corner of an element (if not altered, the background-repeat value defaults to “repeat” and therefore repeats both horizontally and vertically, as we saw earlier).

*Note: it is best practice to set a background-color value when manipulating background-image, in case the image source is broken or unavailable.

background-attachment

The background-attachment property determines if a background will stay in position on the page while scrolling, or remain fixed.

The default value of background-attachment is “scroll.”

scroll : the background image will scroll with the page(default)
fixed : the background image will not scroll with the page
local : the background image will scroll with the element’s contents

z-index

The z-index property determines what is called “stack order” of an element; an element with a greater stack order value will render over an element with a lower value.

Imagine looking top-down at a webpage, the element with a higher value on the z-axis will “stack” on top of an item with a lesser value.

*Note: z-index property will only work on a “positioned” element (a position property of relative, absolute, fixed)

border

The border property is a combination of three, more specific, border properties: width, style and color.

Various border styles.

When setting a border property, you can list the width, style and color on the same line as seen in the example’s syntax above.

*Note: if a border-color value is not set, the border will inherit the color of the text it is surrounding.

cursor

The cursor property in CSS renders various mouse images when hovering over whatever elements you specify.

There are more cursor property values than you might think! See a full list of them here.

flex-wrap

The flex-wrap property determines if flexible items within a container will wrap in a given context.

*Note: that “flexible items” are determined when the display property is set to flex.

no-wrap: (the default value) items do not wrap and will “squeeze” to fit a container’s context.

wrap: items will wrap if necessary.

wrap-reverse: items will wrap in reverse order.

resize

The resize property determines if an element is resizable by the user, and if so, how they can resize it.

both: the width and height of an element can be resized.

horizontal: the width of an element can be resized.

vertical: the height of an element can be resized

*Note: resize will not apply unless an element’s overflow property is set to auto, hidden or scroll. Read more about the overflow property here.

transition

The transition property encompasses the transition-effect, duration, timing-function and delay. In the example below, we set the transition-property to effect a <div> element’s width, and the duration of the transition is set at 1s.

“hover” is also being called on the <div> element to trigger the transition. Read more on hover here.

transition-property : the CSS property the effect is for

transition-duration : the duration of the transition

transition-delay : the delay before transition (“2s” would delay the red box movement for 2 seconds after hovering)

*Note: these properties can all be set individually, or not at all. transition is shorthand for these combined properties.

There you have it — a few fun properties you can manipulate in order to spice up your webpage! Until next time 👋