What is CSS?
CSS means Cascading Style Sheets.
CSS is used to format HTML and XML documents. CSS gives them their visual appearance. Similar to a word processing programme in which you can set the font type, size and colour, this – and much more – is possible with CSS.
The CSS Zen Garden project impressively demonstrates how one and the same HTML document can be designed completely differently using only CSS.
The different designs:
A CSS example:
body { /* body is the highest-order visible HTML element in every HTML document, basic properties for all elements are defined here. */
font-size: 16px; /* Font size in pixels */
font-family: Helvetica, Arial, sans-serif; /* Font(s) */
font-weight: normal; /* Normal font weight */
line-height: 1.4em; /* line height */
background-color: #ffffff; /* White background colour */
color: #000000; /* Black font colour */
}
.red-text { /* Selectors with a dot in the first position are CSS classes */
color: #ff0000; /* Red foont color */
}CSS defines the formatting for the various elements of HTML. Selectors are, for example, HTML elements such as body, p (paragraph), div (container element).
Classes are selectors that can be assigned to the various elements in HTML, comparable to format templates in Microsoft Word, for example.
In HTML, for example, it is written like this:
<p class="red-text">This text is red.</p>It will look like this in the browser:
This text is red.
Under a new name – CSS3 – great new features were added from 2015, including
- Colour gradients
- Animations
- Rounded corners, circular elements
- Shadows
- Transformations
Until then, such effects could only be achieved by using image files or not at all.
Here is an example of a CSS animation:
The CSS code:
div {
width: 50px;
height: 50px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-delay: 2s;
}
@keyframes example {
0% {background-color:red; left:2%; top:2%;}
25% {background-color:yellow; left:80%; top:2%;}
50% {background-color:blue; left:80%; top:80%;}
75% {background-color:green; left:2%; top:80%;}
100% {background-color:red; left:2%; top:2%;}
}Nach einem Bespiel von w3schools.com
It is also possible to design patterns with pure CSS:
Example from CSS3 Patterns Gallery
Then there is the great flexbox function, which makes it possible to build complex layouts quickly and easily. But this is difficult to illustrate with simple examples, so just a link to the fantastic website CSS-TRICKS (A Complete Guide to Flexbox).
Ich hoffe, ich konnte Ihnen eine Idee davon geben, was CSS ist. 🙂
