Getting Started with UX

Using Cascading Style Sheets (CSS)

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Use Cascading Style Sheets (CSS)

Introduction to CSS

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.

Selectors

Cascading Stylesheets (CSS) use Selectors to change certain HTML tags. For the selection of a certain HTML element the following selectors are mainly used:

Units

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:

em
Relative to the font size of the element (2em means 2 times the size of the current font).
Rem
Relative to the font size of the root element (<html>).
Vw
Relative to 1% of the width of the browser window.
Vh
Relative to 1% of the height of the browser window.
%
Relative to the parent element.

All sizes that can be specified in CSS can be specified with both absolute and relative sizes.

Note
It is always recommended to use relative sizes if possible, because they require less adjustment effort when a web page is displayed on different devices.

Margin Padding

Margin 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.

Text Styling

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:

Colors

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:

Rgb (red, green, blue)
Each parameter defines the intensity of the color as an integer between 0 and 255.
Hsl (h, s, l)
HSL color values are specified as follows: hsl(hue (0-359), saturation (0-100), lightness (0-100))
#000000 (Hexadecimal colors)
Hexadecimal color specifications are similar to RGB, but here the numbers 0-255 are written one after another in the hexadecimal number system.

Page Style

Background

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.

Border

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.

Layout

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.

Flex Display

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.

Design a Table and Use the Elements

Watch the following video (without audio) to learn how to design a table and use the elements.

Business Scenario

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:

  • Use the property class with the value ,"flex," in the container for the heading above the table.
  • Set the table property class with the value, "table".
  • In the first-row of the table header, we use the property class with the value, "table-heading".

We can now continue working in the CSS file.

Prerequisites

Steps

  1. Use the class selector to set the class flex with the following properties:

    Code snippet
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    margin-top: 4vh;
    margin-bottom: 1.4em;
    Copy code
    1. Repeat this process for the table-heading class with the following values:

      Code snippet
      background-color: #f5f5f5;
        font-weight: bold;
        text-align: left;
        padding-top: 18px;
        padding-bottom: 18px;
        background-color: #04AA6D;
        color: white;
      Copy code
  2. Set the following properties of the table using a selector:

    Code snippet
    border-collapse: collapse;
    width: 90%;
    margin: 0 auto;
    
    Copy code
    1. 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)

    2. Finally, we want to set the following properties for the entirety of one header row and data rows using CSS:

      Code snippet
      font-size: 1.6rem;
      padding: 8px;
      
      Copy code

Save progress to your learning plan by logging in or creating an account