Make Your Website Beautiful

All website formatting is done by using CSS formatting rules. HTML defines the structure of the page content,  JavaScript can bring functionality for the page, but the appearance is always formatted with CSS styles. For most web designers, it is enough to plan the appearance of the site and sometimes execute it. The contents and structure of a site can come premade from a content control system, but you can change the appearance even afterwards. Formatting parts of an existing page, fixing layout errors or fine-tuning responsivity are also all CSS formatting.

Even if you don’t execute the actual website, but merely plan the appearance, understanding CSS features is the requirement for correctly and efficiently utilising the possibilities of the Web.

During the CSS Basics Course you will learn to

  • understand how browsers work
  • know how to format pages to work on different sized screens
  • know the syntax of CSS language
  • read and understand the formatting of existing pages
  • add your own styles to an existing page
  • define page typography
  • use colours, transparency, backgrounds
  • enhance usability and user experience of a page
  • and you will get many practical examples of different parts of websites

Target group

This course is meant for all graphic designers, web designers or content administrators, such as marketing and communication professionals, who participate in designing websites and who update and create content on a website executed by a publishing system. Learning during the course takes place hands-on.

Prerequisites

It is enough to have general computer skills and know the basic terms of the Web.

CSS logo

Basics

Durdation: 1d

For more information, please contact to our sales.


Browser functionality

  • How the Web works and pages load
  • How browsers execute the appearance of a page
  • Differences between browsers
  • Browser tools

CSS Basics

  • Structure and grammar of rules
  • Comments
  • CSS selectors vs. HTML structure

Selectors

  • Element selectors
  • class and id selectors
  • CSS measurement units

Hierarchy of rules

  • Where can you write rules
  • Heritability of rules
  • Specificity of rules
  • !important modifier
  • Defining the affected area

Positioning elements

  • CSS box model
  • Margin
  • Padding
  • Border
  • HTML: Block, inline and inline-block
  • Float as positioning technique

Text formatting

  • Fonts, web fonts
  • Font size
  • Line spacing
  • Symbol and word spacing
  • Title and paragraph styles
  • Indents and alignment

Colours

  • Colours and browsers
  • Hex values, hsl and rgb
  • Transparency

Practical uses

  • Navigation
  • Links
  • Pictures and media
  • Forms
  • Tables

Advanced CSS

  • Tools and editors
  • CSS pre-processors SASS and LESS

A look into the future

  • Flexbox
  • Grid layout
  • How to be ready for new features
  • @supports
  • How about older browsers

Course trainers


CSS knowledge is a necessary basic skill for web designers and a great advantage for content producers!