JOANA SEABRA

A Webdesign Blog

Design for Web Content

What I Learned in Week 4

This week we started talking about CSS, which means Cascading Style Sheet.

The CSS is the second layer of a three layers set: the first one is the HTML layer which we already talked about in past weeks, the second one is CSS and the third is Javascript. The way we use each layer has to do with a “progressive enhancement” we give to our site when we are constructing it.

The CSS layer gives visual style to documents and Javascript the behaviour to the user interface.

The conventional name given to a css file is style.css. In this file you will give style to all the pages of your website.

Advantages of CSS:

  • Separating content from presentation;
  • Smaller files and so, quicker load;
  • Much greater control over formatting;
  • Improves accessibility.

What CSS does is giving attributes to HTML elements. For exemple, if you select the H1 element and give it a color, every H1 of the website will change its color. When you don’t want to select every H1 present in the website you might add a specific class or ID (an unique identifier) to select just the element you want. (Be careful using specific class names because you might have to use the same class name later. Our advise is always to choose sensible class names).

Pseudo-class rules

a { color: #009;
text-decoration: none;
}
a:hover { text-decoration: underline;
}

Adding styles to webpages

To add style to your homepage you need to link your CSS file in HTML <head>.
For example: <link rel = “stylesheet” href= “style.css”>

Don’t forget about structuring your stylesheet. You can also use comments.
For example: /* Here is an example of a comment */

CSS properties

One good influence in CSS industry is Sara Soueidan‘s work which you should take a look at her projects and work.

Box-model declarations

Here is an example of some text declarations:

div.text {
margin-left: 358px;
margin-right: 358px;
padding-top: 20px;
line-height: 23px;
padding-bottom: 50px;
text-align-last: left;
}

Specifying CSS colours

There are some colours notations used in CSS. The most important ones are:

  • The hexadecimal notation which is a six digit code with number and letters: #0012AA
  • The RGB functional notation:
    rgb(0,0,255)
  • The RGBA notation.

Principles of Graphic Design

There are some principles on graphic design we should always keep in mind:

  • Balance;
  • Gradation and contrast;
  • Repetition and rhythm;
  • Dominance (visual weight in terms of colour);
  • Unity and continuation;
  • Proportion;

Leave a Reply