Small introduction to CSS

CSS, or Cascading Style Sheets are very useful to use if you’re into creating and designing your own web page. The most useful thing about using CSS is that you can define all layouts and formatting in one CSS file, instead of having to do it with HTML on all pages. Which is the wrong way to do it anyway.

So, what is CSS ?

  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save a lot of work
  • External Style Sheets are stored in CSS files

CSS Syntax

The syntax for CSS has two main parts, a selector and one or more declarations. The selector usually consists of the HTML element you want to do something about, and the declaration consists of the change you’re doing. Every change you do ends with a semicolon. ( ; )

There are two ways to write it out, I personally prefer the second as I feel it’s easier to read the code. Take a look at the examples.

Example 1

p {text-align:center;color:red;}

Example 2

p {
text-align: center;
color: red;
}

CSS comments

Comments are useful to put into your code if there’s something you want to tell someone else, or simply something you feel you need to remember for later. To apply it to your CSS sheet, simply do the following:

/* this is a comment */
p {
text-align:center; /* text is center aligned */
color:red;
font-family: verdana;
}

ID selector

ID selectors are used for specifying a single, unique element. For example when you’re defining your layout with CSS, you use ID selectors for your HTML code. Remember the name you use for your ID and simply use it in your HTML code to get the desired effects.

Example 1 – The CSS code

#header {
width: 650px;
height: 200px;
background-color: #999;
}

Example 2 – The HTML code

<body>
<div id="header"></div>
</body>

How to tell your HTML document(s) that you’re using CSS

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the head section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Internal Style Sheet
Internal stylesheets is ideal when there’s one page which is unique from all other pages.

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline CSS
You can also modify CSS directly along with the presentation code, but I HIGHLY advice you not to use this method.

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Summary

This was only a short introduction to using CSS and your possibilities with CSS is incredible once you start to use it. If you’re still using HTML and tables to create your layouts and designs, then I highly suggest you start using CSS right away, as that’ll make it easier for you in the future. Also if you have any questions write it in the comments and I’ll try to answer to the best of my abilities.

If you want to learn more about using CSS, head over to W3SCHOOLS and start reading up on CSS. :)

About the Author

Loves to play videogames, fiddling with webdesign and generally anything which is related to technology. Currently works as a IT consultant for Palantir AS, located in Norway.