I haven't seen any guides on HTML & CSS on the forum, so here we are
this will be the first of four guides, later branching into how to code a userlookup, and petpage.
What is HTML and CSS?
(Hypertext Markup Language) and CSS
(Cascading Style Sheets) are two different types of languages used for coding web pages. Despite often seeing the two terms listed together, they are both separate languages from each other. HTML generally creates the overall structure
of a page, while CSS mainly concentrates on the appearance
- for example the colours, font faces, borders and such.
Using HTML and CSS
When using HTML, the elements that you plan to use on the page must be included between a pair of what we call tags
- these tags will open
the code, and close
it after the content. Here's an example:
This simple code is used in order to make your text bold. As you can see, it starts with the opening tag, and ends with the closing tag.
The closing tag must always be identical to your opening tag, with a single difference - there must always be a slash
after the the first bracket in the tag. In HTML, this will tell the code to end.
Using CSS is different to HTML. CSS must be included between what we call a pair of style tags
, like this:
your code here
The way that the style tags work are essentially the same as with HTML, but what you'll be including between them doesn't require any additional opening or closing tags. Any additional content will be added between what we call the curly brackets
We'll use the code to make your text bold, as we did with the HTML example.
Looks a little more complicated, doesn't it?
With CSS, you're required to tell your code exactly
what you want it to do - therefore, when you're using the code to make your text bold, you must tell the code that you want the font weight heavier.
Now, how do you get the bold text to actually show up on the page? You combine the two.
Take a look at the following example:
When coding, I always try to keep my CSS at the top, and my HTML towards the bottom. This keeps things a lot more organized. With the code above, you now have a functioning code for making bold text!
Including Additional CSS Features
This is definitely not the limit when it comes to using CSS. Next, we'll move onto using font sizes
, font colours
, and font families
in our bold coding. You'll notice that there are semi-colons at the end of each piece of coding - this just marks the end of the code, like the closing tags do in HTML.
As with the weight tag, you must explain to your coding exactly what you'd like it to do. Take the following example:
You've now told your coding that you want the size of your font to be 10, the colour, and font family (or face) to be verdana. When using the colour code, remember
that it must be spelt "color
" and not "colour
". This can be a confusing issue, especially considering a lot of places (for example the UK) tend to spell it the latter.
As you can see, I've included two letters after the size of the font - "px
". This is just a shortened code for "pixels", which will define how many pixels your font size will use.
By putting it all together, you'll now have bold text in size 10, blue, and in verdana when used between the bold tags:
Over time, you'll find that CSS is a fantastic feature when designing web pages. There are alternatives to change the font details with HTML, but CSS is much neater and will use up less room when coding.
The next part of the guide will concentrate on more HTML and CSS codes.