How to use the most common CSS commands

There’s a wide range of CSS commands that are essential for creating a website. We’ll provide you with an overview of the most important and frequently used CSS commands. We’ve also included some short, customisable examples to help you with designing your website.

What can I do with CSS commands?

Initially, CSS commands were used to define fonts and font colours and to make tables more attractive or have text flow around elements. But the possibilities of CSS commands have grown exponentially since then. In addition to cropping images, you can also create colour gradients, shadows, curves and animations with CSS commands.

A CSS command, also known as a CSS rule, is constructed like this:

Together, the property and property value form what’s known as the declaration.

Anyone writing CSS should always keep in mind that despite many improvements and adjustments, not all browsers ‘understand’ everything. That’s why CSS has browser prefixes, which are used to address browser engines specifically. These prefixes are:

• -moz-: for Firefox
• -ms-: for Internet Explorer
• -khtml-: for Conqueror
• -o-: for old Opera Versions
• -webkit-: for Safari, Chrome, new Opera Versions

Here’s a simple example:

.box {
	-moz-border-radius: 10px; / *Instruction for Firefox* /
border-radius: 10px;
}

You can test the compatibility of CSS commands with all common browsers for free on the website CANIUSE.

Some tools that have been added to CSS are CSS Flexbox, CSS Grid and media queries, all of which help to implement mobile-first principles with new CSS commands. These are just a few of the tools available that help websites to be responsive.

How to specify colours in CSS

The world of colours on the internet is based on the RGB color model. In CSS, there are commands to define colours for individual components of a website. Almost every element can be assigned a colour or a colour gradient.

Colour values

• Hexcode: #63f0ac
• Colour names: Red, green, blue, coral, white, black …
• RGB: rgb(238,130,238) and RGB transparency with rgb(238,130,238, 0.7)
• HSL with transparency: hsla(140,20%,50%,0.5) -Hue: 0–360 degrees on the colour wheel -Saturation: From 0 % colourless to 100 % highest colour intensity -Lightness: From 0 % (black) to 100 % (white) -Numerical transparency value up to 1.0 (full colour coverage)

Specifying colours for HTML elements

The color property is used to designate font colours:

p { color: red; } / *a paragraph in red* /
div { color: #ffc3dd; } / *DIV container with font in light pink* /
h1 { color: rgba(220,0,218,0.85); } / *Heading in strong violet with transparency 85 %* /

Specifying colour gradients

In the past, developers had to use image files to create colour gradients. Now, it can easily be done using a CSS command. You can use the command background-image: gradient, or its short form background: gradient, to create colour gradients. gradient represents a value for an image without dimensions and creates a colour gradient that can be changed at particular points.

The table only shows some of the possible attributes. All common values can be used as colour specifications, including the colour values for transparency.

The complete CSS command could be as follows:

.box { background-image: linear-gradient(to top, white 0%, black 50%); }

CSS commands for fonts

With the CSS command font, the six properties of a font can be changed in one go.

p { font: italic small-caps 700 1.2em/1.5em Arial, Helvetica, sans-serif; }

This CSS command can be resolved individually, in the order specified:

The setting of the font-family for the body of a website is applied to all child elements. A font statement is not used to define the font colour. Instead color: is used followed by a specific colour value.

You can find more information on the units of measurement that can be used for font-size in our article ‘Typography in responsive web design – Part 3 : Technical Implementation with CSS’.

CSS commands for text design

In addition to font type, colour and size, other typographic subtleties are important for the readability of a website. These include:

CSS commands for lines and borders

To design borders, the CSS element border is used: Similar to font, several properties can be combined here as well.

Example: An image (with the HTML tag img) is surrounded by a 5-pixel thick line in navy blue. The abbreviation is:

img { border: 5px solid #000080; }

Here’s an overview of this CSS command:

You can place lines along the individual edges of an image or rectangle individually with border-top, border-right, border-bottom and border-left using the same attributes (width, style and colour) as you would with the shorthand border.

CSS commands for spacing

There are two types of spacing:

• padding, which refers to the space between the content and border of an element
• margin, which refers to the space between two elements

Inner spacing

With padding, you can define the distance between a text block or image and the surrounding frame. You can specify padding using the shorthand notation or define specifications for all sides of a content block.

If the short form padding includes values for all four sides, the values will be processed starting from the top and moving in a clockwise manner:

p { padding: 5px 0 5px 0; } / *top and bottom 5 pixels, right and left no inner spacing* /

Outer margin

The CSS command margin defines how far away a layout element is from the following one. The spelling and enumeration of individual values is identical to padding.

CSS commands for links

When defining the design of links in CSS, you can design each status of a link separately. On top of the normal appearance, you can also specify how a link should be displayed when the mouse hovers over it, or when you click or select it (for example, with the tab key).

a:link   { background-color: black; color: white;}

As a rule, changes are made to these pseudo-classes in order to change the colour of links. In principle, however, any CSS command can be integrated into these classes.

CSS commands for backgrounds

The background of a website can also be changed using CSS. This can be done by setting the colour or inserting an image. If you select an image, you can also define the additional features.

These are detail commands. These can also be nested under the top-level command background:

background: white url("http://example.org/image.png")
    repeat-x

The commands background-color, background-image and background-repeat are integrated here.