Part I - Foundation Want to learn the basics of CSS? Well you have come to the right place. CSS is a language structured to make HTML easier to control and more powerful. Usage To use CSS you can use an external file or embed it straight into an HTML file. External Pros: Easy to manipulate lots of pages, keeps HTML page clean. Allows the CSS to be cached, page speed increase after the second time someone goes to the page. Cons: Another HTTP request and requires ability to make .css files To use an external file you need to create a new file, let's call it stylesheet.css in the same directory as your HTML file. All the CSS code should go in stylesheet.css. In the HTML file you need to put the following code below the <head> tag. <link rel="stylesheet" href="stylesheet.css" type="text/css" /> HTML: Put that on every page you want the CSS to affect. Internal Pros: Embedded directly into the HTML file. Cons: Can only affect one page, to affect multiple you have to copy and paste code into each page. To use CSS inside the HTML document you need to go to the <head> section of your HTML document and right below it add: <style type="text/css"> </style> HTML: In between the <style> tag is where your CSS code goes. CSS Comments To make a comment you use /* */ like this: /* This is a comment in CSS, it does not affect anything in the page */ Code (css): Modifying Tags Now we come to some practical stuff, modifying tags. p { color: red; } Code (css): What this does is make the content of every <p> tag red. p - defines the tag used (you can do this with any tag, except <a> which is special and we will get to later) { - declares the starting of attributes color - declares that the font color of the <p> tag is going to be modified (this is called a CSS attribute) : - shows that the attribute is over, and the value is the next thing coming up red - the value for the "color" attribute ; - ends the statement Common Attributes Here's a list of some common attributes: color - changes the font color text-align - changes the alignment of the text (center, left, right) font-size - changes the font size font-family - changes the font type (Arial, Tahoma, etc.) font-weight - changes the amount of boldness (bold, bolder, lighter) background-color - changes the background color font-style - changes the font style (italic, normal, oblique) Measurement Attributes When declaring the value of an attribute that involves measurement (font-size, width, height) you have to include a unit UNLESS the value is 0. Common Units are px (pixel) and cm (centimeter). Example Usage: b /* Bold tag */ { font-size: 24px; /* notice there is NO SPACE between the number and the unit */ } Code (css): Multi-Value Attributes Some CSS attributes require more than one value. For example: ul /* unordered list element */ { border: 1px solid black; color: red; } Code (css): As seen in the above, each value is separated by a space. 1px - Thickness of border solid - Type of border (solid, dotted, ridge, inset, outset, groove, dashed, double) black - Color of border Borders Borders are very unique when it comes to CSS besides having a multi-value attribute. With borders you can specify a border on only certain sides, for example: p { border-top: 1px solid black; border-right: 1px solid black; border-left: 1px solid black; } Code (css): That adds a border side to each side except the bottom. You could set the values to be different to have a multi-colored border, or something like that. Here's the easier and shorter way though to do the same exact thing as the previous example. p { border: 1px solid black; border-bottom: none; } Code (css): All this does is make a border on all sides, then removes the border on the bottom to produce the same effect as before, however you save a couple bytes of space. Part II - Classes and IDs Classes and IDs make it possible to use CSS to change something, without changing all of a tag. Classes .CoolRedClass /* The period, ".", before "CoolRedText" indicates that it is a class you are defining, not putting a tag name */ { color: red; font-style: italic; } Code (css): <div class="CoolRedClass">This text is red (and italic)</div> <p class="CoolRedClass">This text is also red (and italic)</p> <div>This text is not red or italic</div> <p>This text is not red or italic</p> HTML: The CSS only affects tags that have the attribute class="class", not all tags. Classes should be used when the class will be used more than one time, example: <div class="myclass">Hello world!</div> <div class="myclass">wuts up?</div> HTML: However, it's not necessary for a class to be used more than once. Identifiers (IDs) IDs are practically identical to Classes, except they have a different method of usage, and you can only use an ID once. #CoolRedID /* The number sign, "#", before "CoolRedID" indicates that it is a ID you are defining, not putting a tag name */ { color: red; font-style: italic; } Code (css): <p id="CoolRedID">This text is red and italic.</p> HTML: Remember: Only use IDs ONCE. You might be wondering why you would ever want to use an ID instead of a class, and that is because of JavaScript; I won't go into the details but it is good practice. Tag Specific Classes If you want to make a Class only be able to affect one tag, or have different effects on different tags so that this would happen: <p class="myclass">This text is red</p> <div class="myclass">This text is blue, yet it has the same class as the previous</div> HTML: You can do this with Tag Specific Classes. Here's the code for it: p.myclass /* p is the tag and myclass is the class */ { color: red; } div.myclass { color: blue; } Code (css): Part III - Links and Events In this part we learn how to modify links and make dynamic content with hover event. Modifying Links Attributes Links are a bit different to modify then other tags. To modify a link you need to use this code: a:link { /*All CSS attributes here */ } /*for a class use:*/ a.myclass:link { /* attributes here */ } Code (css): And if you want to change how it looks when visited or when it's hovered upon: a:link { color: white; } a:visited { color: gray; } a:hover { color: blue; } Code (css): You can also use :hover with other tags besides <a>, for example: p:hover { background-color: yellow; } Code (css): That gives a highlighting effect when you scroll over the contents of a <p> tag. Part IV - Misc. Asterisk The asterisk (*) can be used to fill in CSS attributes for all tags that don't already have them specified. For example: * { color: red; } div { color: blue; } Code (css): <p>This text is red</p> <div>This text is blue</p> HTML: Multiple Classes You can use multiple classes on an element by seperating them with a space, for example: .redcolor { color: red; } .bluebackground { background-color: blue; } Code (css): <div class="bluebackground redcolor">This has a blue background and is red.</div> HTML: Inline CSS There is a third way of using CSS directly in the HTML, for those who want CSS to effect only one specific instance of a tag. Here's how it works: <div style="color: red; /*other css properties*/">This text is red</div> <div>This text is not red</div> HTML: As you can see it only affects one tag. Attribute and Value List You can find a great list with all attributes and values at w3schools.com/css/css_reference.asp !important In CSS there is a way to declare a certain attribute to override any other declarations using !important, see example: p { color: red !important; /* notice where it is placed */ } p { color: green; } /* even though p's color was declared green after the red, the color will be red because red was declared !important. Code (css): @import Ever wanted to include another style sheet from an already existing style sheet? Me neither. But I will show you how: @import url("anothercssfile.css"); Code (css): Part V - Advanced Selectors & CSS3 After and Before selectors In CSS there is a way to make append and prepend content to elements - the after and before selectors. Here's an example: <p>Hello, world!</p> HTML: p:before /* you can also use :after */ { content: ("This is a p tag:"); } Code (css): It will output "This is a p tag: Hello, world!" This can be very useful when making a form that uses all hyphens after an input or something, and if you want the hyphens changed to something else you can do so easily. CSS2 Selectors Now I will touch on CSS2 advanced selectors. Here's an example of a whole ton of different selectors: p[style] { } /* any p element that has the "style" attribute set */ div[align="center"] { } /* any div element that's "align" attribute is equal to "center" */ div > p { } /* any p element that is a child of a div */ p:first-child { } /* The very first p element per parent element */ p:first-line { } /* The first line of a p element */ p:first-letter { } /* The first letter of a p element */ Code (css): CSS3 CSS3 is the newest form of CSS, it is not present in every browser. Let's talk about CSS3 selectors, since CSS3 adds some really cool ones; here's some examples: div[title^="e"] { } /* matches any div element that has a title attribute that begins with "e" */ div[title$="e"] { } /* matches any div element that has a title attribute that ends with "e" */ div[title*="e"] { } /* matches any div element that has "e" somewhere within it at least once */ Code (css): border-radius rounds corners on an element, example: #myid { /* Both round for 5px */ -moz-border-radius: 5px; /* the firefox implementation of border-radius */ -webkit-border-radius: 5px; /* the webkit (safari + chrome) implementation of border-radius */ border-radius: 5px; /* the opera + ie9 implementation of border-radius */ } #mysecondid { -moz-border-radius-topleft: 5px; /* rounds the top left corner 5 pixels (firefox) */ -webkit-border-radius-top-left: 5px; /* rounds the top left corner 5 pixels (webkit) */ border-radius-top-left: 5px; /* rounds the top left corner 5 pixels (opera and ie9) */ /*NOTE: There is a hyphen between top and left in webkit/opera/ie9 but not in firefox.*/ } Code (css): ___ This concludes the Comprehensive Guide to CSS tutorial by me, thanks for reading! You may not redistribute this tutorial without my permission. Note: Though I did completely write this tutorial from scratch it was not specifically written for this site.
Great stuff, thank you for posting this! Rep+ Might I suggest some of CSS's drawbacks? The lack of variables has always bugged me, why can I not declare myBlue as #2554C7 and then use that everywhere else in the sheet? The repetition of code and frustration caused by this little shortcoming is gnawing. Why is their no nesting? why can I not sub class? the syntax is also pretty crap, and gets confusing when you mix in pseudo classes. These features would be easy to implement and would make CSS smaller, more readable and easier to maintain.
>Might I suggest some of CSS's drawbacks? The lack of variables has always bugged me, why can I not declare myBlue as #2554C7 and then use that everywhere else in the sheet? The repetition of code and frustration caused by this little shortcoming is gnawing. Why is their no nesting? why can I not sub class? the syntax is also pretty crap, and gets confusing when you mix in pseudo classes. You have an excellent idea. However, I cover almost all of CSS's concepts here with only a couple of exceptions (Looking back at this awhile after I initially wrote this I see some things I forgot) and there are really no alternatives which I can see which does the same thing as CSS. However, I may add something tomorrow. Thanks for the suggestion.
nice, I think you should point out that when suing measurements for fonts, you shoudl really use something that is not fixed such as em / %, rather than px, for DDA compliance.
There's lots of controversy over that though. Here's some good articles talking about them: kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ css-tricks.com/css-font-size/
I don't see what the controversy is, the first site is saying use % over em, but both are scalable, rather than fixed.
Hey, This is really a useful tuts for the beginners who wanted to know css. It would have been even better if you would demonstrated the difference between CSS2 and CSS3.
Thank you. CSS3 is really just adding upon to CSS2, with more selectors and attributes. Don't worry too much about it.
Good post, Andrew. Maybe you should offer a few examples of each part so people can see it in action?