Videojug

Beginner's Guide To CSS

Print Info
  • Videojug
  • Videojug
  • 3:28
  • Yes
  • 360p
  • 640x360
  • Flash
  • h.264
  • 900kbps

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 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 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 section:


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:






VideoJug: Life Explained. On Film.






VideoJug version 1.138



Hello, and welcome to VideoJug.


We make brilliant, brilliant films.



Especially the ones about code!




  • 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.



Code can be fun too!


Exactly! I mean, can they do this? (.)(.)



Oh man, look at those puppies!


Precisely. ASCII porn is the best porn.






Done!

11,824 views
Tips & Comments
  1. reptile_lover07

    OMG VIDEOJG U R THE ANSWERS TO ALL MY PRAYERS THANK U!!!!!!!!!!!

  2. norahmed

    thanks very much for that

  3. Anonymous

    First I'm going to say positive first and then negative, I really like the way this guy talks. I'm new tom this I'm going to make a website and I'm just looking. i just think a little more content. Maybe it would be a few more videos on this topic and I'll be all right. but right now I'm not getting it. I would have liked to see the code and how it affected a screen image. Ex. you have videojugis brille and the background and underlined. i know it has something to do with the idea that there is something you do to make it with a background and there is something you do to make it put a line under and make it blue. All I'm looking for is what did it look like before. What code changed it. what does it look like and then see the change and say voila!!! I understand this is the beginners video, but I thought I was left hanging.

  4. Anonymous

    how do i make forums and chat rooms then?

  5. Anonymous

    good introduction to css!