While HTML is used for defining the content structure of a web document or a web user
interface, the Cascading Style Sheets
(CSS) language is used for defining the presentation style of these web pages, which means that you
use it for telling the browser how you want your HTML (or XML) rendered: using which layout of
content elements, which fonts and text styles, which colors, which bachgrounds, and which
animations. Normally, these settings are made in a separate CSS file that is associated with an
HTML file via a special link
element in the HTML's head
.
CSS is based on a form of rules that consist of selectors, which
select the document element(s) to which a rule applies, and a list of property-value pairs that define the styling of the selected element(s) with the
help of CSS properties such as font-size
or color
. There are two
fundamental mechanisms for computing the CSS property values for any page element as a result of
applying the given set of CSS rules: inheritance and
the cascade.
The basic element of a CSS layout is a rectangle, also called "box", with an inner content area, an optional border, an optional padding (between content and border) and an optional margin around the border. This structure is defined by the CSS box model.
We will not go deeper into CSS in this tutorial, since our focus here is on the logic and functionality of an app, and not so much on its beauty.