MANAGING THE GRAPHICAL INTERFACE WITH CSS:

Cascading Style Sheets (CSS) describes how HTML elements are to be displayed on screen, paper, or in other media (W3schools 2017). CSS defines styles for web pages, including the layout, design and variations in display for different devices. As HTML was never intended to contain tags for formatting a web page, CSS solves a big issue (W3schools 2018).

CSS enables the programmer to create all sorts of graphical elements for applications and websites in order to improve the user experience. Effects such as drop shadows, rounded corners, gradients and 2D and 3D transformations are all (/can all be) created in CSS (Microsoft Official Academic Course 2012:159-160).

CSS Syntax:

A CSS rule-set consists of a selector and a declaration block. The selector is the section the programmer wants to be stylised. The elements are used to “search” or select HTML elements based on their element name, id, class, attribute, and more.

The declaration block contains the declaration(s), or properties, that are separated by semicolons. Each declaration includes a CSS property name and value that are separated by a colon. A CSS declaration always ends and starts with a semicolon, declarations are surrounded by curly brackets (W3Schools 2017).

The ID selector:

- Uses the id attribute of an HTML element to select that specific element
- All the IDs of elements should be unique within a page, so the ID selector only selects that one element.
In order to select an elemenet that has a specific ID, write the hash(#) character in front oif the ID of the element.

The Class selector:

-Select elements with a specific class attribute
-Is used by writing a period(.) character in front of the name of the class.

Understanding typography and the Web Open Font Format:

There is an increasing amount of Web developers using Wen Open Font Format (WOFF) that has just about every font available, even custom-created font. This is a huge step compared to the pre-WOFF (Web Safe) restrictions on font usage in HTML documents (Wiley 2013).

Several drawbacks of using a non-standard font in a heading, title, or block of text are:

- It’s time-consuming: developers must create a layout in a graphics program (i.e. Photoshop), save it as an image, and then use the tag in the HTML document.
- It interferes with the accessibility page readers: Since it is an image, the text cannot be read aloud.
- It reduces the effectiveness of the search engine optimisation (SEO) since the search engine only looks for text, not images of text.