Style sheets have already been mentioned several times in the course of this series. These stylesheets enable the strict separation of layout and design. Thanks to CSS, HTML elements are only responsible for the logical or semantic description of the web document.
Experience has shown that it is helpful at the beginning if you know what a style sheet actually looks like. Take a look at a first example.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.en</title> <meta charset="UTF-8" /> <style> h1 { font-family: "Courier New", Courier, monospace; font-size: 200%; } p { font-family:Geneva, Arial, Helvetica, sans-serif; color:#0066FF; } </style> </head> <body> <h1>PSD-Tutorials.de</h1> <p>your graphics, web & photo portal</p> </body> </html> </html>The document looks like this in the browser:
Two elements have been defined in the body area of the HTML file:
- a heading
- a text paragraph
These two elements are formatted using CSS. For this purpose, a stylesheet area is defined in the head area using style. The formatting of the elements takes place within this area.
Here is the definition for the heading h1:
h1 { font-family: "Courier New", Courier, monospace; font-size: 200%; }
The syntax shown defines two things:
- The font family is determined.
- The font size is defined.
At this point, we will first discuss the syntax used in general. Every CSS statement basically consists of two parts - a selector and the CSS declaration. The selector is used to define the element that is to be formatted. The CSS declaration determines what this formatting ultimately looks like. The selector is always on the left, the CSS declaration on the right in curly brackets.
The actual CSS declaration is made up of two elements, namely the property and the value. The property and value are separated by a colon. The value is followed by a semicolon.
Selector { property: value; }Integrating stylesheets
There are many different ways to integrate stylesheets into web pages. First of all, you can assign style instructions directly to an HTML tag. An example:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
In this example, the heading is displayed in blue.
You can also add multiple style statements to an HTML tag.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Simply write these down one after the other, separated by a semicolon.
In principle, these so-called inline styles are only useful if individual areas within a page are to be formatted individually. Normally, however, you should avoid this type of direct formatting as it makes the HTML code too confusing.
Central definition in the head area
You can define a central stylesheet within the head area of the HTML file. This defines all styles that should apply to this file.
<head> <style type="text/css"> .text { font-family: "Courier New", Courier, monospace; font-size: 200%; } </style> </head>
The advantage of this variant: In contrast to the inline variant, the defined formats can be used multiple times in the document. In the previous example, the CSS class text was defined. (Detailed information on the selectors such as the class used here will follow in the next tutorial). This class can now be used as often as required in the document.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">your graphics, web & photo portal</p>
In contrast to the inline variant, such a definition also has the advantage that changes can be made very quickly.
Outsourcing CSS instructions
The most practical variant of the CSS definition is the outsourcing of styles to an external file. This allows any number of HTML files to access the same CSS file. This makes it very easy to ensure uniform formatting of all files belonging to the web project. Subsequent changes that are to affect all pages can thus be implemented without any problems.
<link rel="stylesheet" type="text/css" href="css/styles.css">
The link element is defined in the file header of the HTML file. Within link, first enter the attribute-value combination rel="stylesheet". This is followed by type="text/css". Assign the relevant CSS file to the href attribute. Pay attention here - as is the case when embedding images - to the correct path. In the current example, I assume that the CSS file styles.css is located in the css directory, which in turn is on the same level as the actual HTML file.
The referenced CSS file is a normal text file with the suffix css. The corresponding CSS instructions are defined in the external CSS file.
h1 { font-family: "Courier New", Courier, monospace; font-size: 200%; }
As an alternative to the link variant shown, stylesheets can also be imported. Here too, the CSS instructions are in an external file. The following syntax is used for this:
<style type="text/css"> @import url("css/styles.css"); </style>
The path to the CSS file to be imported is specified within the brackets. Incidentally, @import is CSS syntax. Therefore, the @import statement can also be used within CSS files. This makes it possible to call up other stylesheets from a stylesheet, which makes it easier to organize the stylesheets.
The question naturally arises as to whether you should use link or @import. In principle, I prefer link, as this variant is simply faster and the performance of the page is therefore better.
Media-specific stylesheets
You can define stylesheets for completely different media such as printers or the screen. The media attribute is used for this. A stylesheet can also be assigned to several media separated by commas.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
In this case, two stylesheets have been called, one for the screen, the other for when the page is printed. The CSS file print.css is therefore loaded when the browser's print function is called. The following media values are available:
- all - Applies to all output media.
- aural - The CSS file is used for speech output systems.
- braille - The CSS file is intended for Braille printers with tactile feedback, which can generate so-called "Braille".
- embossed - This addresses Braille page printers.
- handheld - Intended for handheld devices.
- print - The CSS file is for printing on paper. Browsers should automatically use this file when the print function is called.
- projection - This variant is intended for projected presentations.
- screen - Intended for screen display.
- tty - The CSS file applies to media that use a fixed character grid. These can be teletypes and terminals, for example.
- tv - This is used to address TV-like devices. It is assumed that the devices have a low resolution and can only be scrolled to a limited extent.
In addition to the HTML syntax shown via the link element, there are also special CSS variants. Here @import or @media is used.
<style type="text/css"> @media screen, projection { /* Formats for screen */ } @media print { /* Formats for print */ } </style>
Within the style element, @media is used to define an area for format definitions that are intended for a specific output medium. One of the media types already described must be specified after @media, separated by spaces. Multiple media types must be separated by commas.
