CSS in HTML
CSS integrates itself with HTML, and both play a vital roll in each other. CSS won’t display without HTML, and well, the HTML won’t look so good if there isn’t a bit of CSS thrown into the mix. To include CSS in a document, you can do one of two things. You can do what is known as putting it “inline”, or you can include the CSS from an external file.g
Inline is often frowned upon, and I would generally suggest you use an external file. Why? Since if you use an external file, that file is loaded into the users cache. This means it doesn’t have to be loaded again, reducing load time. Whereas inline CSS means that the user has to load the CSS every time. However, in some cases, for mere speed of coding, inline CSS can be useful. CSS (like javascript) is usually put in the <head> of the HTML document.
<style type="text/css">
CSS goes here
</style>
You remove the line “CSS goes here” obviously, and insert your CSS code. Now to include an external CSS file, we put this line in the section:
<link rel="stylesheet" href="style.css" type="text/css" />
All CSS documents are .css. The rel is the relationship this link has, which is “stylesheet”. The href is the link to the stylesheet. Change this to where your stylesheet document is. Finally, type is the type this link is, which is text/css
So now that you know how to put CSS into a HTML document, lets go ahead and learn some real CSS.
Basic Syntax
CSS may seem complex at first, but the syntax basically simplifies to nothing more than this:
element {
property: value;
}
element, is the part of the html we wish to apply the stuff in the curly brackets to. The property is what you wish to apply the value to. Oh yeah, and the space is just there to make the code easier to read, you can leave it out if you want. This could be something like background, color, etc. Oh yeah, and the space is just there to make the code easier to read, you can leave it out if you want. The value is, well, what value you want to apply to the attribute. Think of CSS like a list, because that’s all it really is.
All CSS is set out in this basic format. The curly brackets denote where the properties start and end, and the element before the first curly bracket is what you wish to apply all the stuff in the curly brackets to. You can of course have more than one “list”, or set of properties, and that’s what makes CSS so flexible. The fact that you can apply it to loads of things to acomplish what you want.
Selectors
What is a Selector? A selector is what you use to select a certain portion of the html. Remember before, in the basic syntax, when we wrote element? The selector goes there. Selectors are key to CSS, and it’s important you have a relatively indepth understanding of how they work. Don’t worry though, they aren’t that hard.
Dot, hash, and nothing
The 3 main selector methods, that are probably the most common are the dot, hash, and html element selections. Let me give you an example. Sometimes in CSS, we need to select a whole HTML element. Lets say you want to select every div on the page, and apply the CSS to them. You would do this:
div {
}
The CSS inside the curly brackets will be applied to every div on the page your CSS is included on. This will work for any elements, so you could do this:
p {
}
This isn’t always what you want though, sometimes you only want to apply the CSS to a certain group of elements in html. To do this, we have to identify the html elements that we want to apply the CSS to. To do this we use the class and id attributes to define the elements we want to apply the CSS to. If you only have one of the of the elements we use the id attribute. If you have more than one we use the class attribute. Let me give you an example. Lets say you have this:
<div class="myclass">
My class is awesome
</div>
<div class="myclass">
Really really awesome.
</div>
<div id="myid">
This is my ID.
</div>
So above we have two divs
<div>s with the myclass class.
<div>with the myid id.
<div>, we use a dot in CSS:
.myclass {
}
This dot lets the computer know we are targetting a class, called “myclass”. For ids we use a hash sign, like htis:
#myid {
}
Remember though, you can only use a certain id once per document. This is because the id is what defines this element, and we can’t have two elements that are defined as the same. However, you can use a class as many times as you want. These are the three major ways to select an element, and heck, you could probably get by in CSS with just those three.
Another quick note, you can apply multiple classes to a div, by using a space:
<div class="class_1 class_2 class_3">
Hello
</div>
Before we continue onto bigger and better things, let me explain some other ways you can use the hash and dot. Lets say for instance, you have this html code:
<div class="hello">
This is my class
</div>
<p class="hello">
This is a paragraph
</p>
“Ach!” you scream, “I only want my CSS applied to paragraphs with the class hello, not divs! My life is over”. Do not threat, you padawan. You have much to learn. To apply a certain class to only a certain element, such as “hello” to all paragraphs (
), you’d write:
p.hello {
}
So you write the html element first, followed by a dot, and then the class name. It works the same for ids:
p#idname {
}
Children and Siblings
In CSS and HTML we have things that you may or may not be familiar with, called children and siblings. Here’s an example, where the <span> </span> element is the child of the <div>
element.
<div>
<span>
Hello There
</span>
</div>
Yep, according to HTML and CSS, that div element has just gave birth to a span element. To target a child, we do this:
div > span {
}
Anything in those little curly brackets will be targetted at the span element. You can mix in classes and ids as well. Lets say you wanted to target all elements with the class “myclass”, who were the children of an element with the id, “myid”. You would do this:
#myid > .myclass {
}
/* Other variations: */
#myid > span {
}
.myclass > span {
}
div > .myclass {
}
I should probably mention that the /* and */ denotes a comment in CSS, so you can leave yourself little notes.
So what happens you need to apply something to the sibling of an element. Lets say you want to apply something to a div, for instance, but only if its sibling is a span element, such as shown below:
<div>
Hi I'm div, span's brother.
</div>
<span>
I want the CSS applied to this
</span>
<div>
I don't want it applied to this
</div>
<p>
Because its sibling is a paragraph
</p>
To do this we use the + sign. So here’s what you would do:
div + span {
}
You can have more than one plus sign.
div + span + div {
}
This will apply the attributes of the CSS to the div, which is beside span, which is beside another div. Another useful element is the universal selector, the asterisk. For instance,
* {
}
The elements in the brackets above will be applied to every html tag in the document. This may not seem useful, but there are loads of ways you can use it. You can even mix it in with all the techniques we’ve learned previously.
* + span {
}
* > span {
}
Square brackets and you
Square brackets can prove a very useful tool in the right hands. Let me give you an example. Lets say you have a few divs on your page, but you only want the CSS to apply to the divs with the “title” attribute in html.
<div title="">
Hello
</div>
We use square brackets for this:
div[title] {
}
You can also set the title a value. Lets say you want to apply the CSS to divs, with the title “Webtint”.
div[title="Webtint"] {
}
This will apply to any attribute or value you want, even made up ones, however I wouldn’t suggest it.
div[crazy_tag="THIS IS FAKE"] {
}
<div crazy_tag="THIS IS FAKE">
HELLO
</div>
There are many others little features that square brackets have. If you have a list of elements in your HTML, for instance, this:
<div class="this is a list seperated by spaces">
Hello there
</div>
You can use square brackets to select it, as shown here
div[class~="list"] {
}
This will select a div, where the class attribute is a list seperated by spaces, and one of them is equal to “list”. If you have a hyphen seperated list, you use this:
div[title|="what"] {
}
This does the same thing as before, only with a hyphen seperated list.
Psuedo Classes
Pseudo classes use the magic colon, to select certain phases of something. For instance, lets say you have this:
<p>
This is the first line <br />
This is the second line <br />
This is the third line <br />
</p>
To select only the first line, you would do this:
p:first-line {
}
This could be especially useful on a blog type website. There’s also a first-child option, which you can use like this:
<div>
<p>I'm the first child!</p>
<p>I'm the second child!</p>
</div>
div > p:first-child {
}
What we’re selecting here is the first paragraphed child of any div. You can also drop the p, if you want, however, the child arrow, “>”, is still required for this to work.
div > :first-child {
}
These are useful, however, the main use of the pseudo class is links (anchors):
a:link {
/* CSS for an unvisited link */
}
a:visited {
/* CSS for a visited link */
}
a:hover {
/* CSS for a link that the users mouse is hovering over */
}
a:active {
/* A selected link */
}
Finally, I should mention :focus. Focus can be used like this, for instance:
input:focus {
}
This means that whenever the user focuses on an input (in other words, clicks it), the CSS will be applied to it, but temporarily, so that when they stop focusing on it, the CSS won’t be applied. This is incredibly useful in making forms prettier and the like.
Commas
Commas can be used so that you can apply CSS properties to multiple html states. For instance, lets say you want to apply something to all divs, span, and p tags.
div, span, p {
}
Attributes and Properties
Now that we have all of the CSS sorted out lets learn how properties and attributes work. Here’s a collection fo CSS properties that you’re going to find exponentially useful.
You can find a full list of CSS attributes and what properties can be applied to them here. All of them are pretty straight forward. Here’s a few example to help you get the basics down, and a few points.
First, padding is the space between the contents of the tag and the outside, whereas margin is the space between the border of the tag, and the area around it. Measurements in CSS are normally in pixels. So for instance, if you wanted to give an element 5px of padding, you would do this:
padding: 5px;
This would go into the curly brackets of the element you want to apply the stuff to. All CSS attributes have a colon, to show what the attribute is the equivilent of. At the end of the value, you put a semi-colon, to show that this is the end of the line.
That about clears up everything I wanted to get through in this tutorial. I hope you’ve found it somewhat enjoyable, and hopefully you can take something away from it. Happy Stylesheeting.
Comments
Great tutorial – LOL @ ‘God knows who the father was’.
Damn (Div) is hoeing around again :P
You think you can do tutorial on HTML 5, talk about the new tags – o yeah and CSS3?
Great blog!
Thanks.. you have taken a great effort to write this post.
What I am really missing in the post is a demo of whatever you are trying to explain. It will be very hard for beginners to understand these things with no demo or screenshots.
You have used > and < which make the tutorial confusing to read
Hey, sorry about that, it must’ve been the code tags that converted them. I’ve fixed the problem.
That is it!!
A great tutorial for both newbie and the experts.
I have familiar with CSS for 2 years but never know it can has a child.
“God knows who the father was”
Really great, there are a very few posts which get you on track right way and this is one of ‘em. Love it, thank you! :)
Great tutorial!
One that I like to use a lot is this:
input[type="text"]
{
styling goes here…
}