Contents
What can you design with CSS?
How does a website use CSS?
Optimizing the design for different media with media queries
What can you design with CSS?
CSS can be used to design the content and elements of a page. This includes
- Fonts
- Heading design
- List design
- Font sizes
- spacing
- Colors
- sizes
- etc.
Cascading (German: cascading, stepped) because programming is done from basic rules to individual exception rules. An example of this: A black font is always used, with a size of 20px. However, headings should be green, centered and 30px in size.
The normal text is formatted like this:
body {
color: black;
font-size: 14px;
}"Black text"
The heading is described with "h2" and in this example still has a black color, which it inherited from "body":
h2 {
font-size: 30px;
}"Black heading"
However, we want H2 to be green and underlined.
h2 {
font-size: 30px;
color: green;
text-decoration: underline;
}
The formatting was therefore staggered.
How does a website use CSS?
Ideally, content (HTML) and design (CSS) are completely separated from each other in different files, with HTML referring to the CSS file. When the HTML page is called up, the CSS file to be loaded in order to style the content is read from the page header:
Page title
In some cases, however, there is no strict separation and so there is the option of inline styling. In this case, formatting is specified directly in the HTML file. This can be done using the style attribute:
blue text
leads to
Optimize the design for different media with media queries
You are probably familiar with the print icon on various websites. Behind it is a print view of the page that neglects background graphics, menus etc., for example. This is also controlled via CSS with a so-called media query:
The same HTML file then contains, for example.
Depending on the medium, the correct CSS file is then loaded. The same applies to mobile devices: they differ in terms of screen size. In this case, the browser transfers the information about the screen size of the device and the HTML file automatically requests the correct CSS file for this screen size. You can find out more about media queries at SELFHTML.
Book tips
