CSS - Purpose, Motivation & Demonstration


Purpose & Motivation

CSS (Cascading Style Sheets) allow styling to be made flexibly and provides the backbone of visual capabilities for HTML language. Most of the syntax of CSS are very different compare to HTML. Many of the markup is not present in traditional HTML because controlling styling and separating it from content requires the development of new variables. The essence and main motivation of having a CSS was so that content could be separated from design. This way, design becomes more flexible based on the various needs and circumstances. For example, based on the browsing devices and even other aspects, the website can change dramatically which is done automatically controlled by the CSS in place. This would not be possible by having a system in which both content and design go hand-in-hand. Without CSS, it would be extremely tedious have different styles to fulfill the need for personalisation.

Benefits of separating style & contents

CSS has help HTML become even more immersive and provide a lot of convenience for web developers. By seperating styling and contents, it allows the reuse of fragments of styling and contents. This essentially means that the same content can be represented in many different styles and the same style can be applied to many differnt contents. Hence, different classes of output devices and screen sizes can all be accommodated through CSS code development. Another clear advantages of separating stylng from content is that it allow the changes of styles which are tailored to the reader preference. For example, styles suited for individuals that require accessibility aids can be developed via CSS so that user can switch to such style if neccessary. Separating styling and contents also allows for much easier development of standardised and consistent styles. By applying the same CSS across different pages of a website, the whole website can deliver a consistent theme and feel. Lastly, the separation of content and style makes it easier for different content writter to work together with the web designer. The content writer don’t have to worry about the design while developing the content.

Achievement

As can be seen, CSS plays an essential part in helping HTML become more beautiful and allow it to do much more. It helps controls many of the flaws which traditional HTML has, such as inconsistent formatting or difficult formatting. CSS has overcome this by creating a new syntax which adds on to traditional HTML and helps the entire subset of the code to become richer and more efficient in its execution.

Demonstration

The basic of CSS:

  1. Selector & pseudo-classes User can apply CSS by selector such as element type, class and id. It is important to use efficient selector, as it will boost the website performance or even reduce the development time. The example to use selector are:
    1. To select by element type --> div{width: 80px}
    2. To select by id --> #divID{width: 80px}
    3. To select by class --> .divClass{width: 80px}
    Pseudo-classes can be used to apply an special effect to an element.For example,
    1. :hover
      "mouse over this text to show hover effect"
    2. :active
      "click and hold on this text to show active effect"
    3. :focus (Try click the box below)
    4. ::before
      "Text written in HTML"
    5. ::after
      "Text written in HTML"
  2. Font
    CSS can set font style to improve legibility. For example,
    1. "FONT-WEIGHT" to highlight the keyword.
      • DO NOT disturb
    2. "FONT-STYLE". specify font style for a text.
      • Italic(can use to denote book title) - Harry Potter is a good novel.
    3. "TEXT-DECORATION: line-through" to mark up updated info.
      • Meeting held on 01/01/2020 03/01/2020"
    4. "FONT-SIZE" to resize font.
      • Hello world
    5. "COLOR" to set font colour.
      • Hello World
  3. Property of CSS to help in alignment
    1. margin
      1. create space around the elements, outside of any border
    2. padding
      1. create space around the elements, inside of any border
    3. position
      1. static: positioned relative to its normal position
      2. absolute: positioned elements can overlap with other elements
      3. relative: positioned elements in normal document flow
      4. fixed: Elements will stays at the same place even the page is scrolled
  4. Border
    Apply different styles, colour for the border. For example,
    1. dotted Hello World!
    2. solid Hello World!
    3. combination of dotted and solid Hello World!

Styling attributes of CSS in this Website

This website itself uses a lot of CSS to get to its current state. For example, the colour theme of the website uses CSS to set it's background colour. All the text's typography in this website is specified with CSS as well. Besides, the layout of text, navigation bar and footer are all specified by CSS ! CSS can help to standardize the layout and design of a website. All four pages in this website share the same CSS. For demonstation, please click to see this webpage without CSS. If you click to my Biography page, you can see a Contact Me button at the bottom. That 'Contact Me' button's touch and feel is designed with CSS too !