What is CSS used for 1

CSS introduction and basics

HTML in style

CSS rules can be in a style tag in the head tag of the HTML file or they can be stored in a CSS file with the ending CSS. The external CSS file is integrated into the page with a link tag.

<head> <link rel="stylesheet" href="style.css"> <style> body { font-family: Helvetica; } </style> <head>

It also works together: First the CSS file with the styles for all pages, then the CSS rules for an individual page in a style tag. At the end of the day, CSS can also be used in the style attribute of HTML tags.

<body style="font-family: Helvetica;">

Structure of CSS rules

A CSS rule consists of

  • the name of the element that the rule is targeting: the CSS selector (e.g. an h1, a p or div tag),
  • from properties like color and a value like blueassigned to the element.

CSS declarations (agreements of Property: Value) are in curly brackets and are separated from each other by semicolons.

selector {property: value; Property: value; Property: value}… h1 {font-family: Helvetica; font-size: 1.4em; color: red; }

There is no need to put a semicolon after the last rule before the closing curly bracket. But it can't hurt either, so it's better to use the semicolon, otherwise it will be used with the next expansion and the CSS refuses to cooperate.

The selector can be the name of an HTML tag such as p or h1 be. CSS properties are names for attributes (e.g. color for the font color and font-family for writing).

CSS notation

CSS is not case-sensitive (not sensitive to upper and lower case), selectors such as p or h1 could also be written in upper case, because HTML is not case-sensitive (but XML is).

P {BACKground: Black; Color: Yellow} // Works

Behind the black hole

.ORANGE {BACKGROUND: orange} // Does not work

Caught on fire

#foo {Border-Bottom : 4px SOLID blue; } // Works
Only the blue sea below me

Properties like background and their values ​​are not case-sensitive. Class and ID names, on the other hand, are case-sensitive. The validators - both the HTML validator and the CSS validator - approve all three variants.

When a value includes a measure such as px in width: 400px, we could write px or pX or PX. It is only important that the unit of measurement is placed directly after the value without spaces. Since this flexibility quickly leads to spelling mistakes, it has become common practice to write everything in lower case.


All HTML elements within the body tag and the body tag itself can serve as a CSS selector: body, nav, header, p, div, a, ...

class and id attributes of the HTML tag transport CSS properties into selected elements of the document. This is the most common practice when CSS is only intended for specific elements.

<div id="headerBox"> … </div> <ul class="ohneListenpunkte"> … </ul>

The names of class or id attributes are indicated in the stylesheet by a period ».« Or by the »#« sign (hash). The name of the element can be placed in front of it - but does not have to be.

#headerBox {border: 3px solid silver; } ul.ohneListenpunkte {list-style-type: none; }

In addition, element selectors can be specified more precisely - e.g. as descendant selectors:

h1 a
every a element within an h1 element
a: hover
every a-element when the mouse moves over the a-element (hovers)

A class can be applied to several elements of the HTML page, while an id attribute can only appear once in the document. Id is well suited to transporting properties for layout and positioning in HTML elements.

A class attribute, on the other hand, can appear any number of times in the document and formats different elements.

CSS for all websites

The division between HTML and CSS separates content and presentation. The content with the HTML markup is in one file, the CSS for the design, fonts and colors in another. This keeps the web design consistent across all pages of the website and keeps the HTML structure manageable.

A change in the CSS file reaches all HTML pages and keeps the design consistent. To refresh the design of the website, an entry in the CSS file is sufficient. The structure and the content of the HTML files do not have to be touched.

<link rel="stylesheet" href="style.css">

The CSS file is integrated with a link tag in the head area of ​​the HTML page. There are other methods of loading CSS properties, but an offloaded CSS file is the most common. It is best to make the first attempts with a simple HTML framework.

CSS reaches all elements:

  • CSS defines the font and size,
  • sets colors, background colors and background images,
  • positions header, sidebar and footer for the layout,
  • and moves the website with simple animations.

The simple rules for HTML and CSS are the cornerstone of the web's success. The list of CSS properties is long and growing, but getting started with CSS is easy:

h1 {font-family: Helvetica; }

Take all the h1 tags and put them in the font »Helvetica« ...

Structure of the CSS file

Even with a moderately complex page, more and more CSS rules accumulate. What is still easy at the beginning - quickly changing the font for all paragraphs - ends in grinding your teeth and frustrating searches for why the li tag does not want to conform to the font size.

No question: we put all new styles at the end of the CSS file, but styles overwrite each other and the carousel CSS gets tangled in the breakpoints for the layout.

A suggestion for the structure of the CSS file:

  1. Universal basic rules for simple selectors like body, a, h1, no classes, no ID selectors.
  2. Rules for the layout based on id selectors such as id = "topmenu" id = "header", id = "sidebar", id = "main"
  3. Modules such as slideshow and carousel
  4. CSS styles for the theme: colors, images

Just one possible organization out of many.

Find CSS errors

But even if CSS seems simple, CSS isn't always intuitive. CSS styles are applied in the order in which they are found. A deeper style can overwrite a previous rule: This is the cascade. The cascade leads to long searches for responsible CSS rules if a rule does not apply at all or if a style bravely defends itself against being removed.

Correct HTML is the best foundation. Missing end tags and incorrect parentheses quickly lead to errors, the causes of which remain hidden at first glance (and second and third glance).

CSS normalize and CSS reset, which precede the CSS, act against the slight inconsistencies between the browsers.

If you have typed errors in CSS, you can go to the CSS Validation Service.

Include CSS

CSS inline

Simple CSS properties can be written in the style attribute directly in the HTML tag.

<p style="color:darkgray; font-family:Arial"> Hier wirkt der Stil direkt </p>

This only makes sense if the CSS styles for the p-tag are an exception.

style tag

Style sheet rules are noted in style tags in the header of the HTML document.

<head> … <style type="text/css" media="all"> p { color: white; background: green; width: 500px; } </style> </head>
External CSS file
<head> … <style type="text/css"> @import url("style.css"); </style> </head> oder noch besser <head> … <link rel="stylesheet" href="style.css" type="text/css" /> </head>

The external stylesheet file is a simple text file in which the CSS rules of the document are noted. The characters / * and * / enclose a CSS comment that is skipped by the browser. The style tag is not set in an external CSS file.

/ * Styleheet: mediaevent Theme URI: https://www.mediaevent.de/ Version: 1 * / body {background: gainsboro url (logo.png) repeat-x; } p {margin: 0p; color: rgb (60,60,60); }

Responsive websites

Media queries are used for responsive web design. In the simplest case, these are queries for the width of the viewport or browser window.

#main {background: white; } #sidebar {background: gainsboro} @media (min-width: 600px) {// From a minimum width of 600px #main {width: 390px} #sidebar {width: 190px}}

What is inside @media {} is only used by the browser if the browser window is at least 600px wide. In this example everything that is not in a media rule is applied to smaller window sizes. With @media rules, the CSS sets breakpoints - breaking points at which the design adapts to a different device class.

More about the @ media rule for responsive websites and setting breakpoints.

CSS property values

Although the values ​​of the property can be of very different types, there is a pool of value types.

Colors can be noted as hex values ​​(#cfcfcf), as RGB values ​​(rgb (200,200,200)), as color names (white, gray, black ...)
.text {color: #cdcdbb}
header {background-color: rgb (220,230,225)}
Width and height information
Can be given absolutely in cm, relative in px, ems, or as percentages or as keywords: thick, thin, medium. Percentages refer to the comprehensive container.
header {width: 90%; }
p {max-width: 50em; }
URL / URI addresses of resources
url (https://wisotop.de/background.png)
header {background-image: url (img / pattern.png)}
As a font: font-family: Verdana, Arial, Helvetica; or font-family: Times New Roman, serif;
p {font-family: Arial, sans-serif}

External sources