Print these details
Beginner's Guide To CSS
Learn what CSS is, and how it's used in web design. This film teaches you the very basics to give you a firm foundation to work from
-
CSS stands for “Cascading Style Sheets”. It's a way of ordering web files nicely so everything looks pretty. VideoJug.com uses css, so when you're watching “VideoJug's How to Make your Breasts look Bigger”, that's css doing all the clever organising in your peripheries.
If you've got a ‘style.css' file, you can set up ‘rules' for your other website documents.
For example you could, if you wanted, say “Everything with the tag <videojugisbrill></videojugisbrill> around it should be in big blue letters, underlined and with an image behind it”. And voila! -
A .css file tends to go in the same directory as your other website files. In order for your other files to know it's there, and that they should be paying attention to it, you add this code into the <head> section:
<link rel="stylesheet" type="text/css" href="style.css" />
Your webpages will now pick up on all the info in your css file and use it accordingly.
Where hmtl has tags to define behaviour, your .css file has ‘selectors'.
body{
}
‘Body' therefore is a selector, and any style settings we define within those two curly braces will apply throughout the site. -
Each of these bits of code needs a semi colon at the end to mark the end of the line... Let's look at some of the things we could use.
Font-family: Verdana;
This sets the font to Verdana, the classiest of all fonts. It's better to have a list, here, in case people don't have Verdana --the classiest of all fonts—installed. You can do that with commas:
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
That way if it can't find Verdana, it'll move on to the next one, and the next one, and so on, until it finds something it knows.
font-size: 12px;
Sets the font size. The bigger the number, the bigger the font. -
You can also use .em, which is a bit more complicated. Instead of picking the size by pixels, it's done by space, so depending on the resolution your viewer's viewing your site in, it'll look right.
Font-weight: bold;
Makes it bold. ‘None' makes it normal. You could also use numbers between 100 and 900, which set relative thickness of the font.
Color: navy;
Sets the colour. You could use text for simple colours, like white or black or fuchsia. You can also use Hex codes, here. Hex is a string of numbers and letters which represent a colour. #000000 is black, and #FFFFFF is white. All the colours inbetween are represented by some sort of similar code – VideoJug yellow, for example, is #FFE502.
You can also set the background colour with:
Background-color: yellow;
or use Hex, as discussed before.
There's more to put in there, here's some for starters:
Letter-spacing: is the distance in pixels between your letters
Word-spacing: is the distance in pixels between your words
Text-align: which can be left, right, center or justify
Padding: how much of a buffer there is around your stuff
Margin: what the margins are like. -
Those are the absolute basics. Here's how it's all put together:
In style.css
body {
font-family: arial, helvetica, sans-serif;
font-size: 80%;
color: black;
background-color: #ffffff; margin: 1em;
padding: 0;
}
h1 {
color: #ffc;
background-color: #900;
font-size: 2em;
margin: 0;
margin-bottom: 0.5em;
padding: 0.25em;
font-style: italic;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;
}
h2 {
color: white;
background-color: #090;
font-size: 1.5em;
margin: 0;
padding: 0.1em;
padding-left: 1em;
}
li {
color: #900;
font-style: italic;
}
Then in your .html file:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>VideoJug: Life Explained. On Film.</title>
</head>
<body>
<h1>VideoJug version 1.138</h1>
<h2>Hello, and welcome to VideoJug.</h2>
<p>We make brilliant, brilliant films.</p>
<h2>Especially the ones about code!</h2>
<ul>
<li>Just because the guys up the other end of the office are working on “How to make your Breasts look Bigger” is no reason to be jealous.</li>
</ul>
<h2>Code can be fun too!</h2>
<p>Exactly! I mean, can they do this? (.)(.)</p>
<h2>Oh man, look at those puppies!</h2>
<p>Precisely. ASCII porn is the best porn.</p>
</body>
</html> -
Done!
Print these details
