CSS: The basics part 2 – Embedded CSS

Welcome back to your second DIY CSS class… Today we’ll take a look at embedded CSS in detail.

As said in my previous post embedded SQL is defined in the HEAD container of your HTML page. Here you can define all styles will be using in your HTML page.
You’ll notice that the syntax is rather different from HTML (don’t worry, it’s not that hard).  In order to start I made a very basic HTML page. The code looks like this:

Now in order to start writing embedded CSS you need to define a “CSS block” in your HEAD tag. This is fixed syntax, the code is a following: <style TYPE=”text/css”> your CSS code comes here </style>. Within this tag you will be defining styles, well.. classes to be exact.
There are, once more, 3 ways to define a class:

  • The first is to format an existing HTML tag. If you assign formatting to an HTML tag, it will be used in the entire HTML document. The syntax looks like this (let’s for example format the FONT tag)
    FONT {color:#ff3399; font-decoration: italic;}
  • The second is to define a class for a specific HTML tag. You can use this in case you want to use more than 1 format for 1 tag. Let’s create the class TEST (I’m so creative) and assign it to our FONT tag:
    FONT.TEST {color:#ff3399; font-decoration: italic;}
  • The last one is to define a class that is not attached to a tag. In other words, you can use this class on every HTML tag you prefer. Let’s once again create the class TEST:
    .TEST {color:#ff3399; font-decoration: italic;}

As you can see there are some differences in the syntax. A class is always defined with a dot in front of the name or if you create a class for a specific tag, the class will be preceded by the HTML tag.
If you just want to format an existing tag the only thing you need to do is write the name of the tag you want to format.

The options you want to give to your class are always defined within braces: { }. The options itself are separated with a semicolon. The definition of a certain option if done after a colon.

I realize this sounds quite unorganized but it really is not. Let me show you how you can actually define these 3 options…
Formatting an existing HTML tag:

Notice that I didn’t give any options to the font tag in the HTML code… The result is as following:

Defining a class for an existing HTML tag:

Notice that you now need to add the option CLASS to the HTML tag because else the formatting will not be applied!

Defining a general CSS class:

Again here.. you need to assign a class to a tag. I added the class to the H1 tag as well just to show you it can be used for multiple tags. The result will be (just to show you I’m not lying:

Now in case you want to add some formatting, all you need to do is add the option you like to change and all tags formatted with this class will change accordingly.
For example:

How do I know all the options? Well, I’m a genius… Not… Google is the key.. CSS formatting is all over the web. Just look for CSS formatting and you’ll find what you need.. This is a rather good, complete page.

CSS is a bit confusing to start with, I realize that. But hang in there, you’re doing a great job ;-).

Until next time!


3 thoughts on “CSS: The basics part 2 – Embedded CSS

  1. Pingback: CSS: The basics part 4 – External CSS « Tech-o-rama

  2. Pingback: CSS: The basics part 1 « Tech-o-rama

  3. Pingback: Advanced webcoding: Javascript – Part 1 « Tech-o-rama

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: