Purpose of CSS, structure, properties and selectors
Required Knowledge
HTML knowledge is required. Click here to go to the HTML collection.
What is CSS?
CSS is an abbreviation for Cascading Style Sheets. This technique is used to define the layout or the presentation of content. For example it is possible to define borders, text size, margins and backgrounds. It is also possible to view/hide elements and position them. The purpose of HTML is to structure contents. With CSS we style these contents.
The advantage of separating content and layout is that you only have to structure these contents with HTML, and first don't have to think about the layout. With CSS you define the form and position of the structured contents. This is much easier than having to edit the layout of each HTML page separately.
The so-called Stylesheets are included into HTML files. One stylesheet can be included into multiple HTML files, which makes it much easier to create a consistent layout for a website. We can also add CSS in specific HTML files. In the following list you will see the three options of including CSS in HTML.
-
External stylesheet-file
in a separate file, which is included in the <head>-element:
-
Document-Style
with the definition of a <style>-tag in the <head>-area:
-
Inline-Style
with a direct definition in the HTML-element in the style-attribute:
Structure of CSS specifications
The structure of a CSS-specification is relatively easy.
CSS basically assigns special properties to one or multiple selectors. For example, a property could change the text size or color. A selector allows us to select HTML elements. We can select a specific
<p> or all <p>s inside one area.
There are no limits for the amount of properties you use.
With this CSS specification the text in all paragraphs in an HTML file will be colored red. Note that after every property there has to be a semicolon.
Comments in CSS
In CSS you can also write comments on your code. A comment starts with /* and ends with */.
Comments don't have any effect on styles or structure. Basically comments are notes that you can add to help yourself.
What are Properties?
Properties determine the layout of the selected element. A property has a name and a value. The structure of a property looks like this:
What is a Selector
A selector selects an HTML element which should be assigned to the CSS properties. There are lots of possibilities to select an HTML element. First of all, we'll show you the simplest and most common.
The universal selector *
The universal selector allows us to set properties for all HTML elements, no matter how they have to be selected individually. Usually this is used in the beginning of a stylesheet to define the general styles that are applied to all elements.
Later, when you format elements with other CSS statements, the data in the universal selector can be overwritten. This means that you can easily set the font-size and color with the universal selector, even if you want to modify this later for some specific elements. In the following example the font "Arial" is assigned to all elements.
CSS statements for all HTML elements of one type
Often the same HTML elements on a website (for example paragraphs) should look always the same. Paragraphs usually have a distance upwards and downwards, headlines or links often have the same size and color. The properties of these HTML elements can also be defined globally. The selector is here the name of the HTML element that you want to format, without angle brackets. If you want to select all paragraphs (<p>), you do it with p:
Formatting HTML elements with classes and IDs
Of course it can happen that individual HTML elements should have specific styles. You may want to highlight an active menu item in the navigation of a website or maybe highlight an error message. Even if all ps have the same styles, one special
be can be highlighted. To do this, we have classes and IDs.
Classes
With the class (class="") attribute you can assign classes to HTML elements.
It is also allowed to one class for multiple HTML elements.
An element can also have multiple classes.
Every element that has the class info can now be selected with .info, this
means that you select classes by a dot + the class name.
IDs
In terms of function classes and IDs are similar: an ID is also included via an attribute (id="") and therefore is also used similarly. In practice, there is one major difference: An ID can only be used once in an HTML document!
IN a stylesheet you can then select an ID with #idname {}. In the following example we use the ID footer,
and format every div container with that ID.
HTML
CSS
Naming of classes and IDs
When you name classes and IDs always make sure that their identifiers also describe their "job". In addition, you should not make the identifier too short because otherwise you won't recognize which elements this class/id selects later.
Continue to Part 2
