CSS
In the "Design" module, you can also edit your layout directly in CSS.
Please note that incorrect information in CSS will cause errors in the portal. INTREXX GmbH. assumes no liability in this case.
The stylesheet editor makes it easy to modify the layout's CSS. You can also edit CSS in the element settings.
Web Pages with CSS
Below, we provide a brief overview of how to build websites using CSS. Just as with style sheets in word processing programs, CSS (Cascading Style Sheets) is used to centrally define formatting for web pages. This allows changes that need to be applied to all pages to be made in one place. CSS files are written in separate files with the .css extension and linked via a reference in a website's source code. When the page loads, all information is retrieved from the CSS file. In CSS, stylesheet declarations consist of a property (e.g., color for font color), a colon, the value (e.g., #000000—the hexadecimal value for the color black), and a closing semicolon. The CSS-compliant code for black text would therefore be:
color:#000000;
Selectors
Cascading Style Sheets use selectors to target and style specific HTML elements on a web page. For example, if the heading is to be formatted, a selector searches for the HTML tag <h1> when the page loads and associates it with a style defined in CSS.
Type Selectors
The simplest selectors are type selectors. The name of a type selector corresponds to the HTML tag to be formatted, without the angle brackets. The HTML tag is identified based on the selector name when the page is loaded. The complete statement is written in CSS as follows:
Selektor {Eigenschaft:Wert;}
A black heading would therefore be specified using a type selector in CSS as follows:
h1 {color:#000000;}
A selector can contain an unlimited number of format specifications. If, for example, the heading is to be black and 14 pixels wide, this additional formatting is specified in the selector as follows:
h1 {
color:#000000;
font-size:1px;
}
Class Selectors
Class selectors provide additional formatting options. To identify HTML tags using class selectors, the HTML tag must have an attribute named "class." If, for example, headings on a page are to be formatted using type selectors as described above, and some of them are to be displayed with borders, the HTML tags for this would be structured as follows:
<h1 class="rahmen">
The class selector identifies an HTML tag using this attribute. The selector name corresponds to the value assigned to the `class` attribute in the tag—in our example, the value "frame." In CSS, class selectors are written with a period before the name. The complete code for additional framed headings in CSS would be:
h1.border {border:1px solid #000000;}
If you omit the type selector in CSS, the class selector is applied to all HTML elements that have a `class` attribute with the corresponding value.
.border {border:1px solid #000000;}
Class selectors have a higher priority than type selectors.
ID Selectors
ID selectors also identify HTML tags based on an attribute. To ensure that an HTML element is unique within a web page, an ID may be used only once. ID selectors are often used in conjunction with JavaScript. You start with a diamond.
div#navigation1
Here is the ID selector in HTML:
<div id="navigation1">
ID selectors have a higher priority than class selectors.
Universal Selectors
The universal selector is denoted by an asterisk and applies to all HTML elements on a website.
* {color:red;}
The universal selector is used very rarely, since it is usually not desirable to apply a style rule to all HTML elements. One possible example would be removing spacing (setting padding and margin to 0) for all HTML elements on a website.
Inheritance
In an HTML document, HTML tags always have a parent-child relationship. The <title> tag, for example, is always a child of the <head> tag—it is placed inside the <head> tag.
<head>
<title>
</title>
</head>
Child elements inherit the styles defined for the parent element. For example, if the <head> tag is assigned the text color green, the text color of the <title> tag would also be green, unless a specific color is explicitly assigned to it.
Box Model
According to CSS rules, every element has a rectangular area that is divided into smaller sections.
The distance between the actual content and another element can be set, in part, by specifying the padding between the content and the border. Second, the width of the frame can be specified. As the third property, the outer margin affects the distance between the content and other elements. So, if you define a spacing of 3 pixels each for the padding, border, and margin attributes in an HTML element, the content of that element would be a total of 9 pixels away from the next adjacent element.