Hallowsend's Advanced CSS[Cascading Style Sheets] Tutorial

[Hallowsend]

A while ago, I posted a basic CSS tutorial. Now i'm actually going to follow up with that old tutorial! Who's excited? I sure am. Now, let's begin the actual tutorial.

Table of Contents
1.) Continually using the Syntax
2.) Review of Pseudoclasses
3.) Implementable Advanced CSS
4.) Psuedo-Elements


1. Continually Using the Syntax: Like most programming languages, the syntax for CSS hardly changes at all. It is consistent throughout the various skill levels. I only added this to answer any possible questions about syntax changes or to help anyone better understand this post. The difference between beginner CSS and advanced CSS isn't a drastic change in syntax or anything of the sort, it's more room for error in values and more necessary memorization of what's happening and being learned.

2. Review of Pseudoclasses: A pseudo-class is a way of using pre-defined classes to style some selectors in CSS. They're pseudo because they are predefined within CSS, and you don't have to define them in the HTML to use them, the way you do with normal classes. Pseudo-classes also work a little bit differently than normal classes. The syntax for a pseudo-class is as follows:

tag.class:pseudo-class {
       property:value;
}

As you can see in that code, the pseudo-class is inserted after the class by using a colon to separate the two terms. If you want to effect a tag as a whole, without implementing a real class, you can use the syntax exactly the same, except leave out the class. It's very basic, and once you see an example, you'll understand.

tag:pseudo-class {
     property:value;
}

By using this general syntax for them all, you can style a lot of different things and change the setting of more properties than you could just by using classes alone. Some very commonly used pseud-classes are:

hover;
link;
visited;
active

Now, i'll briefly explain all of them and give an example of one or two. Hover is used to do exactly what it says, it changes a value when you hover over the object that the pseudo-class is applied to. Let's say, for example, that you wanted to make a link turn a different color when you hovered over it. Here would be the code.

a.class:hover {
     color:#000000;
}

This would make the link with class, "class" turn white when it was hovered over by the mouse. Petty nifty, huh? The link pseudoclass is used the same, and it determines the values of the properties when a link is unclicked and unselected. Visited determines the values of the properties of a visited link, and active is for an actively selected link. Pseudo-classes are pretty nifty, huh?


3. Implementable Advanced CSS: A lot of the things that other websites will teach you about advanced CSS aren't necessarily implementable when you are actually creating a website. Pseudo-classes are almost always going to be used in the creation of a website, as would pseudo-elements. In a different tutorial, I'll teach you how to create a lot of good things completely with CSS, such as navigation bars, and the content of your body, and get into floating. Floating gets extremely confusing, though.

4. Pseudo-Elements: A pseudo-element is a lot like a pseudo-class, except with a lot of different uses and with the same syntax. The main difference between a pseudo-class and a pseudo-element is that a pseudo-element doesn't depend on a scenario to work. It modifies a certain element within another element instead of modifying an entire element during a specific event.

As previously stated, pseudo-elements have the same syntax as pseudo-classes. Some commonly used and fun to play with pseudo-elements are the first-letter, first-line, before, and after pseudo-elements. First-letter and first-line are extremely self explanatory and fun to use in your webpages. An example of this would be the code:

h1.headerone:first-letter{
     color:#FFFFFF;
     font-size:40px;
}

This text would make the first word of headerone class size 40 text and black. The rest of the text in headerone would be the same as the rest of headerone's defined color and size. It's fun to use because you can make your webpage look like a generic fairy tail book, with the huge first letter and then the rest normal. First-line is used the same as the first-word, except change the wording, obviously. The before and after pseudo-elements are used to add content before or after the content of an element in a webpage. It's useful if you want specifically styled information going before an element or after with similar property values, but specifically changed ones, too.


Well, that concludes THIS tutorial! I hope you read my next one, which will deal specifically with elements such as floating, positioning objects, and will more extensively tell you how to create large portions of your website using CSS.

[ItzNitro]

Thanks for doing the one I chose! I'm gunna read through it later.

[Vearb]

Stickied. Good job here. Only for CSS pro's