How to Style a Page Using CSS

Posted on April 14th, 2015 by Quertime Writer in Web Development

Cascading Style Sheets or CSS is a programming language used to add appealing visual effects and common styles to otherwise mundane HTML or XHTML content. The language is fairly easy to learn and use.

When you have several combined effects and styles using CSS code, you can create a more aesthetically pleasing website.

What You Should Know

First of all, it is necessary to know some HTML before you can delve into CSS. HTML is a fairly simple language to learn and there is plenty of learning material that you can find online for free to help you get up to speed.

Once you are up to speed with your HTML, you will find it easier to understand and use CSS in the right way. You will also find that CSS is easy to learn and can be mastered in a very short amount of time depending on your aptitude for learning the material.

The Anatomy of CSS

Let us take the example of a CSS snippet: p {background-color: blue; font-size: 4em ;}.

This code will make a background color of a paragraph assigned with the

tag blue and increase the font size in the paragraph.

Using the above example to describe the basic anatomy of a CSS style, CSS code is made up of three main and important parts. These include:

The Selector
A selector defines which part of the HTML elements will receive the style. The selector in the above example is the p before the first or opening curly brace {, which refers to a paragraph in a HTML code.

The Declarations
A declaration tells you what exactly you want to do with the selector or element defined in the selector. You can have several declarations that define the different things that you want to do to an element. In our example, the declarations are background-color: blue and font-size: 4em. This defines specific things that you want to be done on the paragraph element.

Every declaration ends in a semicolon.

The Declaration Block
The declaration block is made up of declarations for a particular chosen selector. In our example, the declaration block is everything in between the curly braces. Every style can have only one declaration block.

A style sheet is therefore a set of several styles that describe and define what you want done to all the different elements on a HTML document.

For you to effectively use CSS to style a web page, you will need to consider properly understanding and utilizing the following:

Declarations and Declaration Blocks

As described, declarations are contained in declaration blocks for a given style. Declarations can be complex depending on what you need to do with a given element. For example, you may want to position certain elements on a webpage using CSS.

Just to get you acquainted with the more common declarations, some examples of simple declarations include the following:

Font-weight: This changes the font to bold, italics etc.
Color: you can use this declaration to change the color of a specific font. Possible values for font color can be RGB like red, blue or aqua or hexadecimal values like #00FFFF or #FF7F50.
Border: This adds or removes a border around an element. You can choose the type of line used e.g. solid or dashed, thickness of the border and the color used. For example 3px solid coral.
Text-align: This aligns the text. Possible values include justified, right, center or left.

Other declarations include Margin and Background-color.

Style Sheets

Style sheets are a combination of styles that are used together to comprise all the changes that you want implemented on a particular HTML document.

There are 3 types of style sheets. They are defined according to how they relate to the HTML document that contains the elements that need to be changed. They include:

External Style Sheets: These are style sheets that are linked to the HTML document using a

<link>

tag within the HTML document to reference a separate text document that contains all the needed CSS. The text file has a .css extension.

Internal Style Sheets: These are styles that include all the styles required within the HTML document. They can be found in the

<script>

tag within the HTML document.

Inline Styles: These are styles that can be found within the HTML text or in line with the element that they apply to.

While internal style sheets are easier to use because you don’t have to handle two separate documents, external experts are the recommended standard.

Inline style sheets make the overall HTML document with the CSS more cluttered and thus more prone to conflicts because they are more difficult to track and change.

CSS and Dividing Content

CSS can also be used to position elements in a webpage or on a screen. The div (short for division) tag is used to divide content into sections. Each section can then be manipulated individually to have its own formatting.

The span tag is similar to the div tag in that it divides or separates the content. The span tag is however different in that it defines, to a greater detail, how an element is to be changed. For example, a single letter can be changed using a span tag. The span tag is not defined at the block level.

Comments

CSS comments improve the readability of all the code used because it defines what your intentions were when you were creating the code. This is important when you need to troubleshoot or if someone else needs to understand the CSS code used.

Comments are separated from the rest of the code using

//. For example / “your comments”/

Learning CSS and HTML can be fairly simple, but if you find that you don’t have the time to learn or if you are not keen on doing some coding for your website, you can use the services of experienced web designers and developers.

Author: Jack Dawson

Jack Dawson is a web developer and recommends his clients for RushEssay.com, a rush term paper writing service. He works at a design, branding and content marketing firm, having founded the same firm 9 years ago. He likes to share knowledge and points of view with other developers and consumers on platforms.