CSS

Introduction

In the Intrexx Design module, you can also edit your layout directly in the CSS. Please note that in so doing, incorrect entries made to the CSS can lead to errors in your portal. For experienced administrators, Intrexx offers very flexible possibilities to create compact, modern websites with good performance. It is in the service of this idea that a CSS editor is available in the Design module, in which you can make changes comfortably. In the element settings as well, you have the ability to write directly to the CSS. In the following, we will give you a short overview of the construction of websites with CSS.

As with format templates in text editing programs, formatting for websites will be centrally defined with CSS (Cascading Style Sheets). With it, changes that are to be implemented on all pages can be applied in one place.

CSS will be written to separate files with the ending .cc and linked via a reference in the source text of a website. When loading the page, all information will be queried from the CSS file.

In CSS, Stylesheet entries consist of a property (such as color for text color), a colon, the value (such as #000000 – hexadecimal value for the color black), and a concluding semicolon. The CSS conforming entry for black text would therefore be:

color:#000000;

Selectors

Cascading Style Sheets work with selectors, which select and format specific HTML elements of a website. If, for example, the header should be formatted, a selector searches for the HTML tag <h1> when loading a page and links it with a formatting defined in CSS.

Type selectors

The simplest selectors are type selectors. The name of a type selector corresponds to the HTML tag that is to be formatted, without pointed brackets. The HTML tag will be identified during page creation according to this selector name. The complete assignment will be written in the CSS as follows:

Selector {Property:Value;}

A black header would therefore be entered in the CSS with a type selector as follows:

h1 {color:#000000;}

A selector can contain an unlimited number of formatting entries. If the title should, for example, be black and 14 pixels in height, this additional formatting would be entered in the selector as follows:

h1 {
color:#000000;
font-size:1px;
}

Class selectors

Additional possibilities for formatting present themselves with class selectors. In order to identify HTML tags with class selectors, a prerequisite exists that the HTML tag must possess an attribute with the name class. If, for example, headers should be formatted on pages as described above with type selectors, and some of them displayed with borders, the HTML tags for this would be constructed as follows:

<h1 class="border">

The class selector identifies an HTML tag via this attribute. The selector name corresponds thereby to the value that is assigned to the attribute class in a tag – in our example the value border. Class selectors will be written in the CSS with a period in front of the name. The complete entry for headers with additional borders around them would be, in the CSS:

h1.border {border:1px solid #000000;}

If one were to leave out the type selector entry in the CSS, the class selector would be used on all HTML elements for which the class attribute is found 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 via an attribute. In order that an HTML element is unique within a website, an ID must only be used once. ID selectors are used frequently in connection with JavaScript. They begin with a pound sign.

div#navigation1

Here is the ID selector in the HTML:

<div id="navigation1">

ID selectors have a higher priority than class selectors.

Universal selectors

The universal selector will be set with a star sign and used on all HTML elements of a website.

* {color:red;}

The universal selector is used only very rarely, as it is normally undesirable to use one style rule on all HTML elements. One conceivable example would be the removal of offsets (set padding and margin to 0) for all HTML elements on a website.

Inheritance

In an HTML document, HTML tags always possess a parent-child relationship. The <title> tag, for example, is always a child of the <head> tag – it is always located within the <head> tag.

<head>
	<title>
	</title>
</head>

Child elements inherit the styles that have been defined for the parent element. If the <head> tag has, for example, been assigned the text color green, the font of the <title> tag would also be green, unless it were assigned its own color explicitly.

Box model

According to the rules of CSS, every element possesses a rectangular area, which is divided into additional individual areas.



The offset of the actual contents to another element can, for one, be defined via the Inner offset (padding) from the contents to the border. Alo, the width of the borders can be defined. A third factor is the influence of the Outer offset on the distance between the contents to other elements. Therefore, if one defines an offset of 3 pixels for each attribute of Padding, Border, and Margin, the contents for this element will have a total distance of 9 pixels to the next bordering element.

On these websites you can find further general Information on this topic:

selfhtml.wiki

css 4 you

mediaevent