After completing this lesson, you will be able to:
Cascading Stylesheet (CSS) is a design language developed in 1994 by Hakon Wium Lie and Bert Bos. CSS is governed by the W3 consortium, which is globally responsible for the standardization and further development of software components.
Watch the following video introducing the CSS.
Cascading Stylesheets (CSS) use Selectors to change certain HTML tags. For the selection of a certain HTML element the following selectors are mainly used:
HTML is a language that is displayed on many different devices, from smartphones to tables or notebooks and ultra-wide monitors. This means that not every font or element size can be specified by an absolute unit such as cm, mm, in (inches), or px (pixel). As well as absolute units, CSS also has relative units as follows:
All sizes that can be specified in CSS can be specified with both absolute and relative sizes.
NoteMargin and Padding are the outer and inner distances of an element. Margin defines the distance to the next element. Padding manipulates the actual size of the element. The distance that Padding adds is also colored by, for example, the background color.
Margin and Padding are defined in the box model, which was explained in the HTML chapter. Margin and padding can be set both implicitly and explicitly on the element pages.
CSS provides a variety of ways to customize the appearance of text
Simple adjustments like changing the text size or adjusting the font work with the CSS instructions font-size and font-family.
There are also many other options to customize text appearance, including the following:
CSS has many predefined colors, which can be used directly by the English terms, for example, green, blue, yellow, pink, purple
However, the possible range of colors is much wider and, for some colors, no names may have been defined. Such colors can be used by different prefix operators:
hsl(hue (0-359), saturation (0-100), lightness (0-100))
Because of the box model of HTML, every element has a certain size. As we already learned, we can redefine this size with padding and width.
With the CSS statement background-color, we can now adjust the color of each HTML element. All colors, which were explained in lesson colors, are possible here.
With border the style, the width and the color of the border of an element can be defined.
It is good to know that the width of the border affects and increases the width of the element. However, the border is not changed by background-color.
A border can have different styles Here the value of border-style is changed to the following values. dotted, dashed, solid, double, node.
The value of border-style is changed to the following values: dotted, dashed, solid, double, node
The properties of a border can be specified implicitly or explicitly.
Through the box model and the standard flow layout of HTML, as well as margin and padding, you already have a number of ways to design a web page. However, this is not always enough to make the structure and appearance of the web site exactly as you want it.
FlexBox is based on a container (flex container), in which several elements (flex items) are placed. Certain properties, such as alignment, are inherited by the flex items; the items are the actual flex boxes, which contain their flexibility by being inside the container.
The two axes each have one direction. Usually, the main axis runs from left to right, the cross axis from top to bottom. FlexBox is described as a one-dimensional system. Elements can be arranged either in rows or in columns. This arrangement can be specified in several ways. Possible layouts include:
justify-content (main-axis): space-between, space-around, or space-evenly.
align-items (other-axis): flex-end, flex-start, or center.
The axis will be switch with flex-direction, so items will also be changed from a row layout to a column layout
These define the dynamic distance between all flex items. Therefore, responsive layouts can be created very quickly.
Watch the following video (without audio) to learn how to design a table and use the elements.
In this exercise, we want to design our table and use the elements we have learned. Firstly, in the same folder as the index.html, create another folder called css. In this folder you create the file style.css where we implement our style sheet. This makes it clearer for larger projects.
Secondly, you have to create a reference to the style sheet in the index.html file so that the external style sheet can be loaded. Use the appropriate element for this purpose. Now, we want to start with the design. We can do this easily with the help of the selectors. On this page, we want the text to be styled with the font, Arial. If this font is not installed on the user's computer, we create two additional fonts in the CSS property. You can use Helvetica and sans-serif.
The next step is to use the property class for some HTML elements in order to design the whole object. To do this, you need to complete the following tasks:
We can now continue working in the CSS file.
Use the class selector to set the class flex with the following properties:
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
margin-top: 4vh;
margin-bottom: 1.4em;Repeat this process for the table-heading class with the following values:
background-color: #f5f5f5;
font-weight: bold;
text-align: left;
padding-top: 18px;
padding-bottom: 18px;
background-color: #04AA6D;
color: white;Set the following properties of the table using a selector:
Now, we want to set the even rows in the table with the property background color with the value #f2f2f2 (to better distinguish the table rows by color)
Finally, we want to set the following properties for the entirety of one header row and data rows using CSS:
