Results 1 to 4 of 4

Thread: ★ [Guide] Introduction to HTML & CSS

  1. #1
    Trinket's Avatar
    Joined
    Jan 2012
    Posts
    678
    Userbars
    5
    Thanks
    725
    Thanked
    860/323
    DL/UL
    10/0
    Mentioned
    240 times
    Time Online
    12d 20m
    Avg. Time Online
    4m

    ★ [Guide] Introduction to HTML & CSS



    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?

    HTML (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:


    <b>text</b>


    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.


    </b>


    *

    Using CSS is different to HTML. CSS must be included between what we call a pair of style tags, like this:


    <style>
    your code here
    </style>


    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.


    <style>
    b{font-weight:bold}
    </style>


    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:


    <style>
    b{font-weight:bold}
    </style>

    <b>text</b>


    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:


    <style>
    b{font-weight:bold;
    font-size:10px;
    font-color:blue;
    font-family:verdana}
    </style>


    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:


    <style>
    b{font-weight:bold;
    font-size:10px;
    font-color:blue;
    font-family:verdana}
    </style>

    <b>text</b>


    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.

  2. The Following User Says Thank You to Trinket For This Useful Post:

    maxxine (06-02-2012)

  3. #2

    Joined
    Jun 2012
    Posts
    14
    Thanks
    0
    Thanked
    3/3
    Mentioned
    2 times
    Time Online
    N/A
    Avg. Time Online
    N/A
    Finally, a guide for css that's easy as fuck to undertand!!

  4. The Following User Says Thank You to Emo For This Useful Post:

    Trinket (06-01-2012)

  5. #3
    Trinket's Avatar
    Joined
    Jan 2012
    Posts
    678
    Userbars
    5
    Thanks
    725
    Thanked
    860/323
    DL/UL
    10/0
    Mentioned
    240 times
    Time Online
    12d 20m
    Avg. Time Online
    4m
    Aha, I tried to keep it as simple as I possibly could xD HTML and CSS can appear so daunting at first

  6. #4

    Joined
    Dec 2011
    Posts
    1,610
    Thanks
    412
    Thanked
    1,065/607
    DL/UL
    68/0
    Mentioned
    582 times
    Time Online
    N/A
    Avg. Time Online
    N/A
    Nice guide! + rep

  7. The Following User Says Thank You to maxxine For This Useful Post:

    Trinket (06-02-2012)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •