Thread: using classes in html/css

Results 1 to 8 of 8
  1. #1 using classes in html/css 
    Registered Member mr_A's Avatar
    Join Date
    Nov 2012
    Posts
    106
    Thanks given
    9
    Thanks received
    8
    Rep Power
    11
    Hi,

    in this tutorial i want you to all understand the use of classes for html/css

    what does a class do?

    making use of a "class" in html code makes it possible to personalize certain styles of basic html looks.
    you can also use a class for multiple elements

    let me show you what a class can do to your styling.
    lets make a form that will be used to login.
    a standard form will look like this:

    basic html code:
    Code:
    <form method="POST" action="http://localhost:81/login/login.php">
      Username <input type="text" name="username" size="15"/>
      Password <input type="password" name="passwort" size="15" />
    			<input type="submit" name="mysubmit" value="login"></br>
    this doesnt look nice at all so what we're gonna do next is add a class to our basic html code for our form
    Code:
    <form method="POST" action="http://localhost:81/login/login.php">
      Username <input type="text" class="form" name="username" size="15"/>
      Password <input type="password" class="form" name="passwort" size="15" />
    			<input type="submit" name="mysubmit" value="login">
    </form>
    what we did here is adding a class called "form" so now our html code will search for the css code called "form"
    in our css document.

    so lets make a css class called "form" and add some syling to it
    Code:
    .form {
    border: 1px solid;
    margin: auto;
    width: 10%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    outline:none;
    }
    so now our form will look like this:

    what happend here is simple, our css code changed the looks of our form by adding the css class to the html class called "form"

    now lets add some effect to it when hovering over
    we're gonna keep the effect simple by just adding a drop-shadow
    so lets go back to our css document
    Code:
    .form:hover {
    border: 1px solid;
    margin: auto;
    width: 10%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    box-shadow: 0px 0px 5px grey;
    }
    .form:active {
    position:relative;
    top:1px;
    }
    what this will do is making it look like this when hovering over

    now thats done lets add a different look to that ugly login button:
    again go into the html code and add a class called "button" to our login button code
    Code:
    <form method="POST" action="http://localhost:81/login/login.php">
      Username <input type="text" class="form" name="username" size="15"/>
      Password <input type="password" class="form" name="passwort" size="15" />
    			<input type="submit" class="button" name="mysubmit" value="login">
    </form>
    now thats done for the html part lets head back to our css document and make a class called "button" in it
    Code:
    .button {
    border: 1px solid;
    margin: auto;
    width: 5%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    outline:none;
    }
    this will make it look like this:

    and finally lets add a hover effect to our button aswell
    Code:
    .button:hover {
    
    border: 1px solid;
    margin: auto;
    width: 5%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    box-shadow: 0px 0px 5px grey;
    }
    .button:active {
    position:relative;
    top:1px;
    }
    this is how it will look when we hover over our login button:

    complete css code
    Code:
    .button {
    border: 1px solid;
    margin: auto;
    width: 5%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    outline:none;
    }
    .button:hover {
    
    border: 1px solid;
    margin: auto;
    width: 5%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    box-shadow: 0px 0px 5px grey;
    }
    .button:active {
    position:relative;
    top:1px;
    }
    
    .form {
    border: 1px solid;
    margin: auto;
    width: 10%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    outline:none;
    }
    .form:hover {
    border: 1px solid;
    margin: auto;
    width: 10%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    box-shadow: 0px 0px 5px grey;
    }
    .form:active {
    position:relative;
    top:1px;
    }
    complete html code:
    Code:
    <form method="POST" action="http://localhost:81/login/login.php">
      Username <input type="text" class="form" name="username" size="15"/>
      Password <input type="password" class="form" name="passwort" size="15" />
    			<input type="submit" class="button" name="mysubmit" value="login">
    </form>
    i hope this helped

    oh btw dont mind the
    Code:
    "http://localhost:81/login/login.php"
    code all this does is make it listen to my login.php document telling it to activate the login option
    Reply With Quote  
     

  2. #2  
    Registered Member

    Join Date
    Dec 2011
    Posts
    1,615
    Thanks given
    1,971
    Thanks received
    819
    Rep Power
    1049
    Cleaning up your code should be your top priority. Until you do that I won't even bother trying to sift through the provided markup.
    Reply With Quote  
     

  3. #3  
    Web Developer & Designer

    IlluZive's Avatar
    Join Date
    Mar 2014
    Age
    28
    Posts
    305
    Thanks given
    163
    Thanks received
    202
    Rep Power
    404
    Quote Originally Posted by mr_A View Post
    Hi,

    in this tutorial i want you to all understand the use of classes for html/css

    what does a class do?

    making use of a "class" in html code makes it possible to personalize certain styles of basic html looks.

    let me show you what a class can do to your styling.
    lets make a form that will be used to login.
    a standard form will look like this:

    basic html code:
    Code:
    <form method="POST" action="http://localhost:81/login/login.php">
      Username <input type="text" name="username" size="15"/>
      Password <input type="password" name="passwort" size="15" />
    			<input type="submit" name="mysubmit" value="login"></br>
    this doesnt look nice at all so what we're gonna do next is add a class to our basic html code for our form
    Code:
    <form method="POST" action="http://localhost:81/login/login.php">
      Username <input type="text" class="form" name="username" size="15"/>
      Password <input type="password" class="form" name="passwort" size="15" />
    			<input type="submit" name="mysubmit" value="login"></br>
    </form>
    what we did here is adding a class called "form" so now our html code will search for the css code called "form"
    in our css document.

    so lets make a css class called "form" and add some syling to it
    Code:
    .form {
    border: 1px solid;
    margin: auto;
    width: 10%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    outline:none;
    }
    so now our form will look like this:

    what happend here is simple, our css code changed the looks of our form by adding the css class to the html class called "form"

    now lets add some effect to it when hovering over
    we're gonna keep the effect simple by just adding a drop-shadow
    so lets go back to our css document
    Code:
    .form:hover {
    border: 1px solid;
    margin: auto;
    width: 10%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    box-shadow: 0px 0px 5px grey;
    }
    .form:active {
    position:relative;
    top:1px;
    }
    what this will do is making it look like this when hovering over

    now thats done lets add a different look to that ugly login button:
    again go into the html code and add a class called "button" to our login button code
    Code:
    <form method="POST" action="http://localhost:81/login/login.php">
      Username <input type="text" class="form" name="username" size="15"/>
      Password <input type="password" class="form" name="passwort" size="15" />
    			<input type="submit" class="button" name="mysubmit" value="login"></br>
    </form>
    now thats done for the html part lets head back to our css document and make a class called "button" in it
    Code:
    .button {
    border: 1px solid;
    margin: auto;
    width: 5%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    outline:none;
    }
    this will make it look like this:

    and finally lets add a hover effect to our button aswell
    Code:
    .button:hover {
    
    border: 1px solid;
    margin: auto;
    width: 5%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    box-shadow: 0px 0px 5px grey;
    }
    .button:active {
    position:relative;
    top:1px;
    }
    this is how it will look when we hover over our login button:

    complete css code
    Code:
    .button {
    border: 1px solid;
    margin: auto;
    width: 5%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    outline:none;
    }
    .button:hover {
    
    border: 1px solid;
    margin: auto;
    width: 5%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    box-shadow: 0px 0px 5px grey;
    }
    .button:active {
    position:relative;
    top:1px;
    }
    
    .form {
    border: 1px solid;
    margin: auto;
    width: 10%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    outline:none;
    }
    .form:hover {
    border: 1px solid;
    margin: auto;
    width: 10%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E6E6E6;
    font-family: Bebas Neue;
    color: grey;
    box-shadow: 0px 0px 5px grey;
    }
    .form:active {
    position:relative;
    top:1px;
    }
    complete html code:
    Code:
    <form method="POST" action="http://localhost:81/login/login.php">
      Username <input type="text" class="form" name="username" size="15"/>
      Password <input type="password" class="form" name="passwort" size="15" />
    			<input type="submit" class="button" name="mysubmit" value="login"></br>
    </form>
    i hope this helped

    oh btw dont mind the
    Code:
    "http://localhost:81/login/login.php"
    code all this does is make it listen to my login.php document telling it to activate the login option
    First of all, you're First block of code doesn't have the ending tag of your selector. Second: It's stupid to give a class the same name as a selector, especially when it's nested in the same block.

    Also, you should've just added the class to the form selector and add it to the input fields.

    Code:
    form.classname input{
    stylestuff
    }
    Just pointing out some flaws so people don't learn the wrong way.
    Reply With Quote  
     

  4. #4  
    Registered Member
    Banished's Avatar
    Join Date
    Aug 2012
    Posts
    144
    Thanks given
    50
    Thanks received
    97
    Rep Power
    223
    what does a class do?
    making use of a "class" in html code makes it possible to personalize certain styles of basic html looks.
    You forgot to mention that you can attach a class to multiple elements.
    Reply With Quote  
     

  5. #5  
    Registered Member mr_A's Avatar
    Join Date
    Nov 2012
    Posts
    106
    Thanks given
    9
    Thanks received
    8
    Rep Power
    11
    Quote Originally Posted by Banished View Post
    You forgot to mention that you can use the same class on multiple elements and vise vera.
    I think thats logical but thanks for mentioning
    Reply With Quote  
     

  6. #6  
    Registered Member

    Join Date
    Dec 2011
    Posts
    1,615
    Thanks given
    1,971
    Thanks received
    819
    Rep Power
    1049
    Quote Originally Posted by mr_A View Post
    I think thats logical but thanks for mentioning
    If someone is trying to learn the use of a class, what makes you think a reader would just know the logic behind a class use? Assuming they know how to use a class, why would they read this thread to begin with.
    Reply With Quote  
     

  7. Thankful users:


  8. #7  
    Registered Member mr_A's Avatar
    Join Date
    Nov 2012
    Posts
    106
    Thanks given
    9
    Thanks received
    8
    Rep Power
    11
    Quote Originally Posted by Murilirum View Post
    If someone is trying to learn the use of a class, what makes you think a reader would just know the logic behind a class use? Assuming they know how to use a class, why would they read this thread to begin with.
    idk what your point is but i think its pretty logical that youre not gonna name each class the same if it needs a different function like i explain in my tutorial here above in the
    div class="login"
    part
    Reply With Quote  
     

  9. #8  
    Registered Member
    Anthony`'s Avatar
    Join Date
    Sep 2008
    Age
    29
    Posts
    763
    Thanks given
    75
    Thanks received
    164
    Rep Power
    204
    Quote Originally Posted by mr_A View Post
    idk what your point is but i think its pretty logical that youre not gonna name each class the same if it needs a different function like i explain in my tutorial here above in the part
    Why are you being so stubborn considering it takes 5 minutes to add and everyone is suggesting you do it? They're right because that's the whole reason a class exists; so you can attach a class to multiple elements. Otherwise, you use an id.
    Reply With Quote  
     


Thread Information
Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)


User Tag List

Similar Threads

  1. Replies: 18
    Last Post: 11-24-2013, 12:39 PM
  2. [TUT]Ban Logs in HTML Format![TUT]
    By Unlucky4ever in forum Tutorials
    Replies: 25
    Last Post: 07-12-2008, 08:48 AM
  3. RS2E - can't use commands in wilderness
    By java_noob in forum Tutorials
    Replies: 2
    Last Post: 06-27-2008, 05:51 AM
  4. Using points in a shop
    By Sub in forum Tutorials
    Replies: 29
    Last Post: 06-20-2008, 10:07 AM
  5. Replies: 11
    Last Post: 03-02-2008, 06:46 PM
Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •