CSS

CSS is short for Cascading Style Sheets, which stands for tiered design templates. CCS is used to create style sheets for websites. CSS is a declarative markup language with HTML documents and in some cases, information in XML can be processed in terms of layout and appearance. CSS is called a “living standard” because the language definitions are in constant development. Currently CSS level 3 is in use and individual working drafts and modules are still being worked on. Therefore, a standard or an official W3C recommendation with regard to CSS is out of the question.

General information about

The first proposals for stylesheets came out between 1993 and 1995. Håkon Wium Lie suggested the first cascading style sheets back in 1994. Bert Bos was working on a browser that was supposed to have its own style sheet language at the same time. Lie presented the CSS at the Mosaic and the Web ‘94 In Chicago for the first time. Bos became aware of him and from then on they developed CSS as a joint effort. In December 1996, CSS Level 1 was introduced, which is a standardization proposal, which is now fully supported by most browsers.

In May 1998, CSS Level 2 was published, but as of today this particular standard has never been fully implemented by any browser. In most cases, support was limited to partial techniques. Since 2002, CSS 2 has been corrected and partial techniques, which were not integrated by browsers, were deleted. CSS 3 has been in development since 2003. The last changes of CSS 2 were taken into account in this version. The modular design of CSS 3 allows usage parts of the techniques of CSS 1 and 2. CSS3 is also compatible with the earlier versions.

New features and functions are added regularly These are being developed in the working groups of the W3C. In light of different devices, programming and scripting languages, this practice has proven useful. As soon as new features were required due to a lack of support, the community responded and started developing. The manufacturers followed later and implemented support. It was similar with browsers and the support for newer versions of HTML.

New consumer devices also meant that web designers have had to opt for specific ways to implement the layout of a website. For example, it makes little sense to load a jQuery library if a website is accessed with a smartphone. CSS 3 provides comprehensive solutions and modern design options for these application scenarios. Effects, media queries and many other CSS properties can now be chosen so that not only the layout, but also the behavior of the layout in the respective device can be specified.

Usage

As a style language, CSS defines the look or the design of HTML documents. The fonts, colors, borders, and backgrounds of certain HTML elements are defined in CSS. For example, for first order headings, all properties such as size, font, bold, italics can be specified or you can determine the background, font color, etc., for entire text boxes. CSS is limited to formatting and layout. The tasks of HTML remain in the structuring of the content of web pages. This separation of content and layout is decisive in many markup languages; it provides the option to change the appearance of the contents without having to change the content itself.

The design of a website with CSS is done through CSS files that are referenced or in-line commands that can be listed in the HTML source code in the HEAD section of the <style> element. However, it is recommended to write the layout separately in a CSS file. Different layouts for different output media such as print, projections or screens can be created with varying resolutions using CSS. This is a relief especially with the large number of different mobile devices. A standard definition for different output media makes it possible to optimize the layout and text flow of the output result so that the contents can be easily consumed.

Syntax

CSS files are called stylesheets. Rules are the basis for a stylesheet. Each rule contains at least one selector and a pair of curly brackets that contain attribute-value pairs. Together they form the declaration block. It contains a property, followed by a colon, followed by a value. The value can optionally be terminated by a semicolon.

example: a selector composed of: selector {property: value; }

The selector selects the desired item, for example, a text box or caption. Property and value define the layout, for example, the font of a text box, bold text in Times New Roman:

#Text01 { font:bold Times; }

Individual parts of a document or group of elements can be referenced with the selectors.

selector1, selector2 { property: value; }

The brackets that contain attribute-value pairs are the conditions that are attached to the selector or selectors. If the element is in the source code of the current page and you want it displayed correctly, it has to be displayed according to the characteristics and values.

Selectors

There are different types of selectors:

• Simple selectors: This includes the universal selector * and the type selector element. The .class, #id, and different attribute selectors are simple selectors.
• Combiners chain multiple selectors together. With it inheritance and relationships can be expressed.
• Pseudo-elements are selectors that are not limited to an element, as is the case with simple selectors. You can, for example, make the first letter of a paragraph particularly large, as is done in many print newspapers.
• Pseudo classes are simple selectors that address an element only if it fulfills a certain property. A distinction is made between structural and dynamic pseudo-classes. The former makes it possible to select specific elements in the HTML structure. The latter selects out elements because of user interaction. The hover effect is one example.

There are a number of features including typefaces, formatting, text alignment, and many other CSS properties in addition to the selectors. A quick reference is recommended to have all sorts of features readily available.

CSS box model and media queries

To apply these selectors, you have to know the CSS box model. Each web page is considered a box which is described by certain characteristics. This includes the characteristics of the four sides of the box (top, left, right, bottom) and four margins, borders, and padding commands. A layout can be described with this concept. It is defined by the positions and distances of individual elements. The CSS box is a sort of abstract grid that allows you to define the layout exactly.

A similar approach is used in media queries. Media queries were introduced with CSS 3. They query the properties of the user device with which the content is displayed. The width and height of the browser window can be queried to adapt the content to mobile browsers. Pixel values usually are noted. If it is a larger than normal browser window, the conventional characteristics will be used that were previously defined by the web designer. A generalization of queries can be achieved with the so-called viewport, which is integrated with a meta element in the source code:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Importance for search engine optimization

With the separation of layout and content, CSS files should be outside of the HTML source code as much as possible. While this is only a recommendation it is quite reasonable against the backdrop of valid source code, especially since the file size will also affect the loading time of a website and improve the user experience. Additionally, testing scenarios can be implemented with a clear separation of content and layout quite easily as the content does not have to be changed in order to test different designs and user acceptance. In the long run, this separation saves time, which webmasters can invest elsewhere such as in link building or on-page optimization.

Content can be organized with CSS in such a way to contain certain semantic markups and thus work smoothly in different output media. Therefore, a very clear HTML structure can be achieved, which likely will have a positive impact on crawling and indexing by search engines. CSS menus that work without JavaScript are an example. Most search engines recommend such navigation. In contrast, there are some CSS tricks and CSS hacks which should be avoided. Content such as text and images should not be hidden with CSS. Search engines may classify it as a deception attempt.

The variety of output media makes a clear CSS setup necessary. If content is marked up with CSS in a certain way, it can be displayed on different devices without any problem. Such content can be retrieved much easier, regardless of which browser is used.