What is CSS

by Yorgo Nestoridis

What is CSS

CSS or Cascading Style Sheets are declarations which allow to define the look and feel of a website. Most web design elements are implemented via CSS.

CSS and HTML

In modern web site building, HTML is mostly used to describe the content of the page while CSS is used to define the style. CSS defines for example fonts, colors, line spacing and so on.

How to start creating a Style Sheet

The base of your style sheet is your project: how do you want your text to look like? Which fonts do you want to use, which font face, which font color? And how do you want to display titles, sub-titles and the content paragraphs?

Example

Taking as an example a WordPress Based Blog, such as Semiomantics XO I want the main headings (h1)  (post titles)  to be set in large black Times New Roman Fonts, the sub-titles (h2) in Red small caps 24px Verdana and the text paragraphs (p) in medium size dark gray (#222) Arial.

To define the Fonts, we can indicate generic font names and let the browser apply it’s defaults; in this case we just define whether we want serif, sans-serif, monospace, fantasy or script font defaults. This could mean that the browser settings finally decide which font face  is actually seen by the visitor.

The second possibility is to define a font family according to the web designer’s preferences and priority. In this case, you would list your preferred fonts and conclude the list with the font type to indicate which generic font should be used in the absence of your preferences.

font: serif; would be a default setting
font-family: arial, verdana, sans-serif; would define the preferred font faces

The Font Size follows similar rules: we can either define the relative size small, medium or large, or absolute 12px, 18px and so on or in percentage or length.
font-size: small; relative
font-size: 18px; absolute

The Font Style can be changed from normal to italic or oblique:
font-style: italic;
The Font Variant can be changed to small caps for example:
font-variant: small-caps;
The Font Weight can be changed to bold:
font-weight: bold;
The Font Color can be changed for example to red with the color code #B30000:
color: #B30000;
The Background Color changes the the color behind the text:
background-color: yellow;
for the color you can either use named colors or hexadecimal color codes.

Write your Style Sheet

Now we write our style sheet based on the above example:

Style Sheet

Style Sheet

Styles can be added in two ways: either you copy the above code into your page header between the tags, or you create a file called style.css for example and you link from your page header to the style-sheet file.

How to create a separate style-sheet file

1 Create a text file called style.css
2 Paste your style code into it and save the file to your template folder.
3 Create a link in your header pointing to your style-sheet.

From here you can load all styles needed to display your content according to your preferences, by adding more definitions and formatting code to your style-sheet.

PS: I forget to tell you … you can also change backgrounds :-) .

More about this Topic

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics.

If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

This page is wiki editable click here to edit this page.