Getting Started with Basic CSS Code

CSS is actually one of the easiest coding languages to learn. CSS, or cascading style sheets, are what control the styling behind webpages. Below, you will learn about the basic structure of CSS and be able to view some working examples that will demonstrate the use of tags and attributes.

Basic CSS code is implemented in one of two ways, directly or indirectly. Direct CSS implementation involves writing the CSS within the same page as the code (HTML). Indirect or external CSS implementation involves writing the CSS on a separate style sheet and calling the style sheet to the code (HTML). Certain limited CSS styles can also be applied using tags around text. Below are some structure examples to give you a better understanding.

Direct basic CSS code (CSS on the same page as HTML) looks like this:

<div style="background-image:url(http://yourpicture.com);background-repeat:no-repeat;height:400px;width:300px;margin-top:10px;">

<h1 style="color:#006699;line-height:18px;padding:10px 10px 10px 10px;">This is a Title headline</h1>

<p style="color:black;padding:12px 15px 15px 20px;">This is sample paragraph</p></div>

Notice how both the CSS and the HTML is contained within the div.

The first part, <div style="background-image:url(http://yourpicture.com);background-repeat:no-repeat;height:400px;width:300px;margin-top:10px;"> inserts a background image. But it also uses CSS to define the height, width, and margins for the background image. Most importantly, it starts a div.

The second part, <h1 style="color:#006699;line-height:18px;padding:10px 10px 10px 10px;">This is a Title headline</h1> inserts the text "This is a Title headline". But it also uses CSS to define the text color, line-height, and padding. <h1 style=" opens an element, and </h1> closes it.

The 3rd part, <p style="color:black;padding:12px 15px 15px 20px;">This is sample paragraph</p></div> inserts a paragraph containing the text "This is sample paragraph". But it also uses CSS to define the text color of the paragraph and padding. <p style=" opens the paragraph and </p> closes the paragraph.

Finally, at the very end, there is a </div> which closes the original <div style=".

Indirect basic CSS code (calling the CSS style sheet to the HTML) looks like this:

This is the HTML:

<div id="brighthub">

this is just some text

</div>

This is the separate CSS

#brighthub {

color:#006699;

font-size:15px;

font-weight:bold;

}

Notice that the HTML and CSS are completely separate.The "#" is used to define the div. You can also use a "." rather than the "#". The brackets { } hold the actual styling elements. Note that each element, such as color:#006699; ends in a ; which is used to the different style attributes.

This style of CSS is common in many content management systems, such as WordPress.

There are certain tags that can directly style any text, as long as it's HTML enabled and writable. For example:

<u> </u> will directly underline a piece of text. <u> is the opening tag, and </u> is the closing tag.

<u>Bla bla bla</u> = Bla bla bla (Check Using CSS Underline for more on that)

<b> </b> will directly bold a piece of text. <b> is the opening tag, and </b> is the closing tag.

<b>Bla bla bla</b> = Bla bla bla

<i> </i> will directly italicize a piece of text. <i> is the opening tag, and </i> is the closing tag.

<i>Bla bla bla</i> = Bla bla bla

Now that you know how to use the three basic structures of CSS implementation, you can start to memorize the attributes and stylings. You can find a complete list of them here. That's all there is to learning basic CSS code. Again, once you have the three basic structures down, you have basic CSS down. You can always refer to the stylesheet for the actual styles, as remembering them all can be difficult.