RyanMK
Still alive
- May 27, 2010
- 802
- 117
Hey there DevBest, today I'm going to show you how to get started with CSS. CSS is a web coding language that styles aspects of a website, for example DIV tags, Forms, Text and background. CSS can be implemented in either of two ways, 1. being writing it within the HTML page you wish to style 2. writing it in an external file known as a stylesheet which is then linked into the HTML page via a short code. Today I will show you how to do it the first way and then explain external style sheets in my second tutorial.
The tags you insert between the <head> tags:
Now you're ready to code CSS. To create a style using CSS you type this below:
Within the curley brackets you can start adding attributes such as styling text, adding a border, setting a size for use with div tags and much more. Below is a few examples of what attributes you could add.
font-family: verdana; This sets the font you wish to use. The values after the normal colon you can change
height: 100px; (and) width: 100px; This sets the height and width of a div tag in pixels (similar to photoshop)
font-size: 12px; font-weight: bold; color: #000; These attributes are for editing how the font looks (similar to word) for adding color, changing size and adding bold to the text.
background-color: #CCC; This is for adding a background to to a div tag the #CCC is the hex code for the color light grey.
In the next tutorial I will be covering more complex features such as adding a curve to the border, adding padding and margins, using an image as the background and of course using external CSS to keep your source code short.
I would like to have written more but thought it best to keep it short and not send you all of to sleep!
The tags you insert between the <head> tags:
HTML:
<style type="text/css">
</style>Now you're ready to code CSS. To create a style using CSS you type this below:
HTML:
.name {
}Within the curley brackets you can start adding attributes such as styling text, adding a border, setting a size for use with div tags and much more. Below is a few examples of what attributes you could add.
font-family: verdana; This sets the font you wish to use. The values after the normal colon you can change
height: 100px; (and) width: 100px; This sets the height and width of a div tag in pixels (similar to photoshop)
font-size: 12px; font-weight: bold; color: #000; These attributes are for editing how the font looks (similar to word) for adding color, changing size and adding bold to the text.
background-color: #CCC; This is for adding a background to to a div tag the #CCC is the hex code for the color light grey.
In the next tutorial I will be covering more complex features such as adding a curve to the border, adding padding and margins, using an image as the background and of course using external CSS to keep your source code short.
I would like to have written more but thought it best to keep it short and not send you all of to sleep!
