Chat with us, powered by LiveChat
CSS Basics

CSS Basics

CSS stands for Cascading Style Sheets and is the language behind the design of most web pages. In order to achieve a good looking website desifn that is XHTML 1.0 compliant, you should always build your pages using CSS. Its structure is similar to that of both PHP and Javascript, meaning that if you already develop using either of these languages then you should find CSS realtively easy to learn. If you are new to the concept of coding, then you will need to start by learning the basic structure of CSS.

The Basic Structure

CSS elements are normally contained within a code structure which normally takes this form: ‘[element type]#/.[element name] { style properties }’. The element type is the type of element which you want to style, such as a div; the element name is the actual name which you want to give the element, such as ‘bob’. An element which is an id can only be used once within a web page, and in the CSS code is defined by using ‘#’ before the element name; elements which are defined as classes can be used multiple times within a web page and is defined by using a ‘.’ before the element name within a CSS document. The actual properties of the element are contained within the ‘{} tags, ‘{‘ being the opening tag and ‘}’ being the closing tag.

You can also style elements without using a name. This is useful is you want the same style to be applied to the same element type throughout a web page. To do this you don’t need to use the id or class symbols since no name is being specified; all you need to put before the opening tag is the element type as seen in HTML format, for our example we want the paragraph element to have the same style properties throughout the web page, so we define the style in this way: ‘p { style properties }’ – we used the ‘p’ element since this is the HTML for a paragraph within a web page. Each style property is defined in the following format: ‘property: value;’; as you can see a colon is present after the property name is defined – this is important as browsers are only able to read elements which are set out with the colon; the semi-colon is present to represent the end of the property – without this present at the end of each property, browsers won’t be able to read the rest of your style sheet.

Style Properties

There are many different properties that you can use within a style block to make an element look good; however, the likelihood is that you will never use all of them. The most important properties within a style block are the ‘width’ and ‘height’ properties since they control the size of the element. However, if you only want to style a text element, such as a ‘span’ or ‘p’ element then you will not need to use either of these properties since they are only used to control a box object; in your case the most important properties would be the ‘font-family’, ‘font-size’ and ‘color’ elements since they control how the text will appear.

With CSS you can control how far away other objects on the page must keep from a certain object – the property to control this is called the ‘margin’ property; it has four ‘sub-properties’ for each different side of an object, these being ‘margin-top’, ‘margin-bottom’, ‘margin-left’ and ‘margin-right’ – these ‘sub-properties’ provide margin styling for each separate side of the object and can be defined individually.

One problem which many people face when building websites using CSS is getting their pages centred. Achieving this is quite simple, all you have to do is define the ‘text-align’ element of the body tag within the CSS document as ‘center’, and each element which you want to centre must have their ‘margin-left’ and ‘margin-right’ properties set to ‘auto’.

Other CSS Resources 

The following is a list of resources you may want to visit if you want to extend your knowledge of CSS:

  • http://w3schools.com/css/default.asp – W3Schools is the learning medium trusted by most. This site gives you an extended knowledge base of tutorials which should help you learn CSS.
  • http://www.devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-part-1/ – This is the first part of a serious of articles discussing CSS.
  • http://www.utexas.edu/learn/css/ – This article is perfect for beginners and covers the higher up basics.

Sharing

Leave your comment