This tutroial is a guide to CSS basics. What are Stylesheets? What are they used for? How do i use them?
What is CSS?
CSS stands for ‘Cascading Style Sheets’. The stylesheet language is used to define the presentation of an HTML document and its associated markup.
Put simply, CSS is there to tell your web browser what your web page should look like. For example, using CSS you can state that your body text is to be pink and your background white, your links green and your font 100px in size – if you’d ever want to do that!…
Here’s a quick example of what the CSS language looks like:
p{
color:#ff0000;
font-size: 20px;
}
In this example we are defining the p (paragraph) tag and stating that all p tags are to be red in color (hexadecimal value #ff0000) and to have a font-size of 20 pixels. In the browser this would look something like:
This is a paragraph of text that has been set to have a font size of 20px and be red in colour.
Basic Markup of CSS
Here is a breakdown of what makes up a basic style definition:
element{
property: value;
}
Element – the name of the tag, class or id you are defining. (see: using class and ID in CSS)
Property – the attribute of that element. e.g. The amount of padding, colour, margin, border, font-size, background etc
Value – the appropriate value to be assigned to the property in question. This could be in px, %, a hexadecimal colour value or a border type depending on the property you are defining.
Inline Styles
If you were to look at the source (HTML Code) for the red text example above you’d notice that I’ve used an Inline Style Definition. An inline style definition is a style that is defined within the HTML tag itself, as seen below:
<p style="color:#f00; font-size: 20px;">This is a paragraph of text that
has been set to have a font size of 20px and be red in colour.</p>
Using an External CSS File
Now the previous example is all fine and dandy and may get you the result you want, however, to make the most out of CSS it make sense to use an External Stylesheet instead of defining everything inline (see: Why should i use External Stylesheets?).
An external stylesheet is a file with a .css extention (e.g. myStyle.css) which you can upload on to your server. This file can be used to hold all the stylesheet information for your website and be referenced on pages using a LINK tag in the documents HEAD tag:
<head> <link href="styles/myStyle.css" rel="stylesheet" type="text/css" /> </head>
Please note, in the href above i have stated that the file myStyle.css is located in a folder ‘styles’. This is not essential, a stylesheet can be placed on any part of a websites directory structure. For the purpose of keeping everything neat and tidy i prefer to have a dedicated folder for my stylesheets. A QUICK TIP – good housekeeping saves you a hell of a lot of time in the future, trust me!
The Style Tag
There is another way to include styles on your document. The style tag can be placed in the head tag of the page like so:
<head>
<style type="text/css">
p{
font-size:20px;
}
</style>
</head>
This can be handy if you need to include a style for particular page. Avoid putting all style information in the head as this will increase page size and cause you a nightmare when you need to make sitewide ammendments! Use an external stylesheet and use the style tag for overides or quick fixes. You’ve been told! 🙂
Basic CSS examples
Here are some examples of what a site’s style sheet may look like, I’ve covered some basic tags and included comments to help guide you on the CSS basics.
/* This is how to make a comment in your CSS
I've commented the styles to help you see
the basics of what is being defined in the stylesheet */
/* The body tag is kind of like a parent tag which other tags
within it inherit certain style information from e.g. the Font-Family */
body{
/* This defines the font to be used.
note, the commas used here tell the browser to first try
to use the 'verdana' font, if this is not available then try
arial and failing that to use the next available san serif font. */
font-family: verdana, arial, san serif;
/* Font-size is set to 12 pixels. */
font-size: 12px;
/* sets background to black (hexadecimal value: #000000).
note, you can also use 'Black' and other common colour names.
background:#000000;
/* set text colour to white (hexadecimal value: #ffffff).
color:#ffffff;
}
/* style the heading 1 / h1 tag */
h1{
color:blue;
font-size:16px;
}
/* style anchor tags so links are NOT underlined. */
a{
text-decoration:none;
}
I hoped that helped cover the basics of CSS. If it didn’t, the basics are: learn to used CSS as it’ll help you produce cleaner and more maintainable web pages making them more lightweight and easier to manage.
I’ll be writing a more advanced CSS tutorial soon which will aim to cover a little more than the basics. Come back soon and check it out!.
Tutorial Name: CSS Basics
By: Tom Jepson
