CSS3: Tutorial with all basics for beginners

In this tutorial we will introduce CSS3 to you. CSS3 is the new standard for defining the design of a website or document. Alongside HTML, CSS is the most important foundation in web development.

CSS3 Tutorial: Requirements

Before you can start programming CSS, you need an editor. We recommend the free editor Notepad ++, which is only available for Windows. If you work with Mac, you will find good alternatives here. You also need knowledge of HTML. The basics of HTML5 can be found in another practical tip.

Tutorial: Structure of CSS commands

First, we learn the basic structure of CSS commands.

• Basically, when building a CSS command, you have to ask yourself who should take which value from a certain property.
• Example: All

  Headings should have the value red in the font color property.

• The syntax then looks like this: [element] {[property]: [value]; }
• In our example, we color the heading like this: h1 {color: red; }
• Any number of property-value pairs can follow one another in the curly brackets.
• Important: Each pair must end with a semicolon.

CSS3 tutorial: Embed CSS in HTML

There are three ways to embed CSS in HTML, but only one of them really makes sense.

• Variant 1: Adjustment directly in the element with the style attribute. Example:

  heading

• That only applies to this one element. Here, too, several property-value pairs can be used in succession.
• Variant 2: At the beginning of the HTML file within a tag in the document. Example: h1 {color: red; background-color: blue; }
• Variant 3: outsource to another document. Write the commands in an external file with the extension .css. You then include this file in the HTML head.
• In almost every case you should use variant 3. This is the only way to use the design in several HTML files without having to write the same code several times.

CSS3 tutorial: Elements, IDs and classes as selectors

The first value before the braces always corresponds to the selector. This determines who the following is applied to.

• You can simply use a day as a selector. This then affects every element of this tag. In the example above, every single h1 heading would be red.
• Alternatively, you can use an ID to ensure that only one element can be used. To do this, append the attribute in the HTML element:

  My header

• Then reference this ID in the CSS sheet with a # in front of the selector: #myHeader {color: red; }
• Alternatively, you can assign classes to affect some, but not all, of the elements:

  My header

• Instead of a #, use a '.' In CSS before the selector: .myH1Class {color: red; }

CSS tutorial: important features

Below are the key properties you need to manipulate the look of elements.

• color: assign a font color. Many common colors are predefined, for example red, black, white, yellow, etc. You can specify individual colors as hex values: # B3D2FF
• background-color: Use this to assign the background color. You can use the same colors as for color.
• border: Define a frame around an element. border: black 2px solid; creates a black frame, for example.
• font-size: Set the font size. Relative (em) or point (pt) values ​​are common here.
• width and height: Specify the width and height of elements. This is usually done statically via pixels (px) or relative to the maximum value in percent: div {width: 70%; height: 300px; }
• float: Use left and right to specify whether the element should be left or right aligned.
• padding: Enter the padding. For example, you can position text inside a box.
• margin: Similar to padding, except that you specify the margin here. This way you can create a gap between two boxes.

$config[ads_text5] not found

CSS3 tutorial: possibilities with CSS3

With CSS3, it is less often necessary to create and integrate your own graphics because more effects can be created dynamically.

• opacity: With a value between 0 and 1 you can easily determine the transparency of elements.
• Colors can now be specified in HSL format. The 'H' stands for Hue (hue), the 'S' for Saturation (saturation) and the 'L' for Lightness: color: hsl (300, 100%, 60%);
• box-shadow: Assign a shadow for an area. box-shadow: 10px 10px 10px red; would create a red shadow to the right and below.
• border-radius: Simply create rounded corners for surfaces or images.

$config[ads_text6] not found

How to change the HTML line spacing with CSS can be read in the next practical tip.