CSS Basics
As a reminder: HTML is used to describe the structure of a web page. This is done by using a number of HTML Tags. The visual appearance of the web page is defined using CSS. There are many advantages to keeping the structure and design of a web page separate. Generally speaking, it is an advantage if the design of a web page is completely separated from the structure. This can be achieved by using an external style sheet file, which is then integrated into the HTML page.
Include an External Style Sheet File into an HTML Page
A website usually consists of many, often even several hundred or even more pages that should be formatted in the same way. In practice, it has become standard to save the stylesheet in a separate .css file. A link tag in the head section of the HTML is used to link the stylesheet file to the HTML file.
Include an External Style Sheet File into an HTML Page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Page Title</title>
⋮⋮
<!-- Additional Head Information -->
<!-- Comments are not shown in the browser -->
⋮⋮
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
⋮⋮
</body>
</html>The link element is a child element of the head section.
The rel attribute of the link element has the value "stylesheet" and thus informs the browser that the href attribute is a reference to a stylesheet file. These two attributes are necessary and sufficient.
The type attribute specifies the Internet Media Type (formerly known as MIME type). For CSS, this is "text/css". As this is the standard, it can be omitted.
The media attribute specifies the output medium. For example, the values "screen" for Computer Screen und "print" for Printer are allowed. If the attribute is not defined, the default value "all" is used for all devices.
How Are CSS Rules Built?
A CSS rule is made up of three parts:
a Selector
a Property
and a Value
Selector {
Property: Value;
}Depending on the document type, HTML elements, classes and IDs are case-sensitive. For example, element names written in HTML are case-insensitive. This means that <div> and <DiV> are considered to be the same thing. However, in XHTML case matters, so <div> and <DIV> are different.
Class and ID selectors are case sensitive for all document types. For example, the IDs #example and #Example are considered different things.
Property and value names, except for font names, are usually case-insensitive.
In summary, it is a good idea to use only lower case letters for all HTML elements, properties and values, except for font names.
Most Important CSS Rules
As soon as you start working with stylesheets, you will first get to know the following properties.
Font Family
Specifies the font-family for individual HTML elements or for a complete section of the web page. Either a single font or a list of alternative fonts can be specified.
Font Size
Defines the font-size for individual HTML elements or for complete sections of the page. The font size can be defined in an absolute unit (e.g. px) or in a relative unit (e.g. em). Tip: Always use relative units.
Text Alignment
Sets the text-align, that is, left-aligned, right-aligned, center, or justify.
Text Decoration
Specifies the text-decoration. This specifies whether the text is underlined or striked through. Tip: Always avoid underlining of text. Underlined text could be mistaken with a link.
Background Color
Specifies the background for individual HTML elements or an area of the web page.
Foreground Color
Specifies the color (i.e. text color). Make sure there is always enough contrast between foreground and background.
Margin
The margin property defines the distance of an HTML element from its parent and adjacent elements. All four side margins (top, right, bottom, and left) can be configured individually. The distance defined by margin is known as white space. It is used to arrange the layout areas of the page.
Padding
The padding property refers to the internal spacing of an HTML element. It is the distance between an element and its (possibly invisible, i.e. transparent) border. The padding can be configured individually for each of the four sides.
Border
The border property defines the boundary of an HTML element. The border can be set individually for all four sides of an element.
Box Model
All elements are always displayed as a rectangular box. The box model is fundamental to understanding stylesheets. The better you understand the box model, the easier you to design web pages.
CSS Grid
CSS Grid is a powerful tool that allows to create sophisticated, nested web page layouts. This guide has been created as a resource to help you understand and learn CSS Grid in an easy-to-follow practical way. The elements within the grid container are aligned using a rectangular grid similar to a table. Grid is a solution for complex, nested web layouts. If you want to create customised web layouts, you should use the grid system.