Web Design Fundamentals: Basic CSS Code

Web Design Fundamentals: Basic CSS Code
Page content

CSS

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.

CSS Structure

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 CSS

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

This is a Title headline

This is sample paragraph

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

The first part,

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,

This is a Title headline

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 closes it.

The 3rd part,

This is sample paragraph

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

closes the paragraph.

Finally, at the very end, there is a

which closes the original <div style=".

Indirect CSS

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

This is the HTML:

this is just some text

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.

Direct Limited CSS Tags

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

will directly underline a piece of text. is the opening tag, and is the closing tag.

Bla bla bla = Bla bla bla (Check Using CSS Underline for more on that)

will directly bold a piece of text. is the opening tag, and is the closing tag.

Bla bla bla = Bla bla bla

will directly italicize a piece of text. is the opening tag, and is the closing tag.

Bla bla bla = Bla bla bla

Stylings

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.