Tutorials - CSS - Openzu.com

CSS stands for Cascading Style Sheets (CSS), which provide an easy way to abstract soling from your markup (indicating the 'type' of content and the page flow) and content. In order to load a CSS style, you need to put the details of it with the <head> element of your HTML page. Here is an example of loading an external style sheet which is contained in the '/styles/' directory and named 'default.css':

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		..
		<link rel="stylesheet" type="text/css" href="/styles/default.css" />
		<!--Javascript Includes, Meta Tags and other bits also go in the header-->
		..
	</head>
	<body>
	..
	</body>
</html>

Here is an example of some CSS, which is designed to alter the appearance of the content contained between the <body> and </body> tag on your HTML page:

/* 
This is a comment in CSS!
*/

/* The code below, informs the browser how the <body> tag should be styled */
body {
	background:#FFFFFF; /* This sets the background of the document */
	font-family:verdana, arial; /* The first font listed, is the one which should be used first */
	margin:0px; /* Removes the margins from the page. 0px = 0px 0px 0px 0px -> Top Right Bottom Left (in that order */
	color:#101010; /* While it would make more sense for font-color, color represents the color of the font */
	font-size:14px; /* Font size here, will tell the browser what font-size to use by default */
}

You should be able to figure out roughly how CSS works just from this short example. In essence, there are a number of style attributes for each element which can be altered through CSS, which you specify in your stylesheets. We'll look in more detail at how this is done through the tutorials

Page Responses

Currently there have been no responses to this page...

Post Response

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.