Results 1 to 4 of 4

Thread: ★ [Guide] Introduction to HTML & CSS

  1. #1
    Trinket's Avatar
    Join Date
    Jan 2012
    Gender
    Location
    UK
    Posts
    662
    Thanks
    699
    Thanked 777 Times in 309 Posts


    Downloads
    8
    Uploads
    0
    Mentioned
    236 Post(s)
    Time Online
    11 d 17 h 36 m
    Avg. Time Online
    8 m
    Rep Power
    9

    ★ [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
    Banned
    Join Date
    Jun 2012
    Gender
    Posts
    14
    Thanks
    0
    Thanked 3 Times in 3 Posts


    Downloads
    0
    Uploads
    0
    Mentioned
    2 Post(s)
    Time Online
    N/A
    Avg. Time Online
    N/A
    Rep Power
    0
    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-02-2012)

  5. #3
    Trinket's Avatar
    Join Date
    Jan 2012
    Gender
    Location
    UK
    Posts
    662
    Thanks
    699
    Thanked 777 Times in 309 Posts


    Downloads
    8
    Uploads
    0
    Mentioned
    236 Post(s)
    Time Online
    11 d 17 h 36 m
    Avg. Time Online
    8 m
    Rep Power
    9
    Aha, I tried to keep it as simple as I possibly could xD HTML and CSS can appear so daunting at first

  6. #4
    Banned
    Join Date
    Dec 2011
    Gender
    Location
    The Konoha
    Posts
    1,611
    Thanks
    412
    Thanked 1,062 Times in 607 Posts


    Downloads
    68
    Uploads
    0
    Mentioned
    582 Post(s)
    Time Online
    N/A
    Avg. Time Online
    N/A
    Rep Power
    0
    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
  •