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 fre­quently used CSS commands. We’ve also included some short, cus­tom­is­able 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 at­tract­ive or have text flow around elements. But the pos­sib­il­it­ies of CSS commands have grown ex­po­nen­tially since then. In addition to cropping images, you can also create colour gradients, shadows, curves and an­im­a­tions with CSS commands.

A CSS command, also known as a CSS rule, is con­struc­ted like this:

Together, the property and property value form what’s known as the de­clar­a­tion.

Anyone writing CSS should always keep in mind that despite many im­prove­ments and ad­just­ments, not all browsers ‘un­der­stand’ everything. That’s why CSS has browser prefixes, which are used to address browser engines spe­cific­ally. 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 com­pat­ib­il­ity 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 prin­ciples with new CSS commands. These are just a few of the tools available that help websites to be re­spons­ive.

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 in­di­vidu­al com­pon­ents 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 trans­par­ency with rgb(238,130,238, 0.7)
• HSL with trans­par­ency: hsla(140,20%,50%,0.5) -Hue: 0–360 degrees on the colour wheel -Sat­ur­a­tion: From 0 % col­our­less to 100 % highest colour intensity -Lightness: From 0 % (black) to 100 % (white) -Numerical trans­par­ency value up to 1.0 (full colour coverage)

Spe­cify­ing 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 %* /

Spe­cify­ing colour gradients

In the past, de­velopers 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 rep­res­ents a value for an image without di­men­sions and creates a colour gradient that can be changed at par­tic­u­lar points.

The table only shows some of the possible at­trib­utes. All common values can be used as colour spe­cific­a­tions, including the colour values for trans­par­ency.

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 prop­er­ties 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 in­di­vidu­ally, 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 in­form­a­tion on the units of meas­ure­ment that can be used for font-size in our article ‘Ty­po­graphy in re­spons­ive web design – Part 3 : Technical Im­ple­ment­a­tion with CSS’.

CSS commands for text design

In addition to font type, colour and size, other ty­po­graph­ic sub­tleties are important for the read­ab­il­ity of a website. These include:

CSS commands for lines and borders

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

Example: An image (with the HTML tag img) is sur­roun­ded by a 5-pixel thick line in navy blue. The ab­bre­vi­ation is:

img { border: 5px solid #000080; }

Here’s an overview of this CSS command:

You can place lines along the in­di­vidu­al edges of an image or rectangle in­di­vidu­ally with border-top, border-right, border-bottom and border-left using the same at­trib­utes (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 sur­round­ing frame. You can specify padding using the shorthand notation or define spe­cific­a­tions 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 enu­mer­a­tion of in­di­vidu­al 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 sep­ar­ately. On top of the normal ap­pear­ance, 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 in­teg­rated into these classes.

CSS commands for back­grounds

The back­ground 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 ad­di­tion­al 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 in­teg­rated here.