Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8

Thread: Basic CSS

  1. #1
    Senior Member
    Join Date
    Apr 2006
    Posts
    146
    Member #
    13110
    Liked
    1 times
    Basic CSS

    To make a page now the best way is html with css not just html. It is very easy to style all the elements of your page. Here are the basic atributes to to elements you can style, remember to end all of these in semi-colons:



    background: either enter a color-code or url(path/to/image.type);

    border: thickness solid color;
    Replace thickness with a pixel value, leave solid as solid, and replace color with a hex code such as #ffffff or white. To further customize this you can make the different sides of the border different colors, only have a left border, etc. To do this; change "border:" to "border-top:", "border-left:", "border-right:", or "border-bottom:".

    margin: amount;
    Replace amount with a pixel value. To further customize this you can specify where you want to have this property in effect. To do this use this format:
    property-direction: atributes;
    Replace property with your property or here it is margin. Next, replace direction with top, bottom, left, or right.

    padding: amount;
    Replace amount with a pixel value. To further customize this you can specify where you want to have this property in effect. To do this use this format:
    property-direction: atributes;
    Replace property with your property or here it is padding. Next, replace direction with top, bottom, left, or right.

    width: amount in pixels;

    height: amount in pixels;

    color: hex code for color;

    font-size: size in pixels;

    font-famliy: name of font;

    text-align: either left, right, or center;



    All of these can be used to style basic elements of a site. These elements are:
    body, p, a:link, a:active, a:visited, a:hover, h1, h2, h3, h4, h5, div, span, table, tr, td, font, etc.

    The basic format is:
    Code:
    element{
    atribute: property;
    atribute: property;
    atribute: property;
    }

  2.  

  3. #2
    Junior Member designminds's Avatar
    Join Date
    Jul 2011
    Location
    Bay City, Michigan, United States
    Posts
    13
    Member #
    28630
    Liked
    1 times
    And for code cleanliness and ease of further editing, if it can be, make the CSS and external file and then include it in the header:

    Code:
    <link rel="stylesheet" type="path/to/your/css/file.css" />
    I prefer to use the newer "html5" directory structure:

    >main directory-
    -->assets
    ------>img
    ------>css
    ---------->file.css
    ------>js
    >index.html

    So..
    Code:
    <link rel="stylesheet" type="assets/css/file.css" />
    This would be the path the CSS file.

  4. #3
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,467
    Member #
    28473
    Liked
    265 times
    Quote Originally Posted by Jaycbrf4, post: 238198
    Disregard first post...

    replace the word pixels with ems or a % value for responsive, css3
    Actually you will still need Pixels even for responsive layouts. min-width:*something*px is better than using min-width:*something*%
    Jaycbrf4 likes this.
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  5. #4
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    I tend to use percentages and em rather than px, it requires more calculations but it remains consistent throughout the design.
    m3n0tu18 likes this.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  6. #5
    Junior Member SimplyWebsites's Avatar
    Join Date
    Jul 2012
    Location
    Leicester
    Posts
    27
    Member #
    32160
    Remember when we didn't use CSS... woah

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by SimplyWebsites, post: 238460
    Remember when we didn't use CSS... woah
    I remember using HotMetal as my first editor...later switched to Netscape Composer due to the requirements of the school I was at - and I've disliked WYSIWYGs ever since!
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  8. #7
    Senior Member Noteleklabs's Avatar
    Join Date
    Jun 2012
    Location
    NC
    Posts
    217
    Member #
    31890
    Liked
    28 times
    CSS FTW btw as mentioned above several times, you should always use % so when you resize your browser or are on a different screen size your design looks the same
    Hey you! Go make something!

  9. #8
    Banned
    Join Date
    Dec 2013
    Posts
    45
    Member #
    37912
    Liked
    1 times
    Thanks for this great information. It helps a lot.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:51 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com