Announcement

Collapse
No announcement yet.

CSS Tutorial #2

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS Tutorial #2

    Using CSS Tutorial #1 one in this section of the forum you can see how CSS commands are constructed. Here is a list of the basic Properties (as briefly covered in Tutorial #1).

    Please note, values must also be listed with the properties below. For example Background-color:#000000. Also, not all of the properties are listed here. There are many more but these are the ones you will use most frequently. The others will come along as you get used to using CSS.


    Properties for backgrounds
    background-color
    Will set the background colour.

    background-image
    Will place an image in the background.

    background-position

    Will place the background image in a specified position.

    background-repeat
    If the image is not the same size as the page you can repeat the image (tile).


    Properties for text
    color
    Will set the text color.

    letter-spacing
    Will alter the distance between each letter.

    text-align
    For example left right or center.

    text-decoration
    Allows you to add underline overline blink strike-through etc.

    text-transform
    Automatically allows for uppercase and lower case adjustments on entire paragraphs.

    word-spacing
    Allows the white space between entire words to be altered.


    Properties for Fonts
    font-family
    Will set the font type (Arial, Verdana etc).

    font-size
    Will set the size of the font.

    font-style
    Will allow for italic, oblique or normal text.

    font-weight
    Will allow for up to ten different levels of bold text.


    Properties for Borders
    border
    sets a border.

    border-left
    border-right
    border-top
    border-bottom

    Using any of these will place a border where specified.

    border-color
    Will set the border color.

    border-left-color
    Will set the colour of the left border.

    border-width
    Will set the thickness of the border.

    border-right-width
    Will set the thickness of the right hand border.


    Properties for Margins
    margin
    Sets the margin width around a page element.

    margin-top
    margin-bottom
    margin-left
    margin-right

    Hopefully self explanatory ;)


    Properties for Padding
    Exactly as with Margins but replace the word Margin with the word Padding.

    FPRULES


Working...
X