- The Point of CSS is to use clean, simple HTML in your page, then write CSS “rules” that style the objects on your page. The page stays clean and looks cool, and your HTML page works on both mobile devices and regular browsers. That’s the point of CSS.
But The Art of CSS is quickly and easily referring to the right objects in your page from your CSS rules. The act of matching CSS rules to HTML tags is like a conversation: both sides need to be clear and in sync with each other, or they’ll talk over each other and you’ll get a headache from all the yelling. - General or Specific Matching: suppose you want to style an
<h1>header in your page. You can choose how general or specific your style is applied:- to style all
<h1>tags, use css ruleh1 {… - to style all tags in a certain place, e.g. for
<b>’s inside<p>tags, use css rulep b {… - to style all
<h1>headers of a certain kind, addclass=”myheader”to the<h1>tags you want to style, and use css rule.myheader {… - to style just one <h1> header, add
id=”myheader”to the<h1>tag you want to style, and use css rule#myheader {…
You can combine the above rules in different ways, too;
to style all<h1>tags of type"barleymash"inside offorms of type"magicform", use css ruleform.magicform h1.barleymash {… - to style all
- Target acquired: Because getting the matching rules wrong can waste so much time, use this trick: until your rule is for sure matching up, don’t use any CSS properties other than
color: red;It’s quick to type and easy to spot. As soon as you see the text go red in your HTML page, you know your rule is matching. Then and only then, now that you know your rule is matching the right part of your document, then deletecolor: red;and write your rule. EZ. - Master the patented JM3 Gasbag Model: a CSS layout is like a big bag of objects. each of those objects can exert forces (Think gas jets. Like your layout is farting at you.) Mostly the forces “push” out (margins, padding, and float are all properties that “push” objects around.) By altering CSS rules, you adjust the forces. Viewing your page in a browser just shakes the bag, and things will settle where the forces direct them. This is the secret of CSS - manage the forces, and the objects will balance. Fight the forces, apply too many properties at once, all fighting against each other and your objects will jostle around, poking holes in the bag and in each other, and your page will leak all over the place. No fun.
Gasbag Example 1: to center something, set margin-left: auto; and margin-right: auto; This works because you balance the opposing forces on the left and right, so the element is held perfectly centered like a ball held between two magnets
- Gasface Corollary 1: the JM3 Gasbag Model only applies when using the default CSS rules of “relative” positioning. It’s also possible to use something called “absolute” positioning, where you position each little box by giving it specific coordinates. don’t do this. it will take you a long time and your layout will look terrible if the amount of text or graphics ever changes. Only weird print designers use this :-)
- Rule A - Divs and Spans: The lingua franca of CSS are two tags called <div> and <span>. Neither
<div>nor<span>tags have a default appearance; other than the fact that<div>’s are boxes and<span>’s are “inline” within text, they’re just generic tags for applying styles to. - Rule B - Divs are boxes, <span>s are text:
<div>s are boxes, and have height, width, and alignment that you can can play with. By default, the height of a<div>is the height of its contents (text or images or other<div>s)<span>s are for “markup” within text. these are called “inline” elements, because they only make sense “in a line” of text.” Tags like bold (b), italic (i), underline (u) etc. are all <span> / inline elements.
Don’t use <div>s (boxes) to markup text, and don’t use <span>s for boxes, and your layout will go much easier. - Global, Local, or Intimate: you can apply CSS properties at three levels: across multiple HTML pages (via a file named something.css), on a single page (in a style block), or to a specific tag within a page (via the style=”…” attribute within a tag). When you FINISH a layout, it’s good to move all your CSS code into a separate CSS file so you can share it globally. But while you develop and test your code, it’s easier to just put the CSS rules in a style block inside the HTML page - then you’re not switching back and forth between two files as you’re write the code.
- Keep it clean: writing clean HTML these days is really easy. But even people who consider them self e1337 CSS HAX0Rs often don’t write very clean, efficient CSS. Efficiency doesn’t make the page load faster, it just makes your code easier to work on.
Three tips:- condense rules like (
font-family, font-size) or (margin-left, margin-right) into single-line rules:margin: 0px 10px 10px 10px; - stack your classes: no one EVER uses this trick; you can apply as many css classes to a single tag as you want, just put spaces between the names, like <h1 class=”exciting warning”> will apply both the class exciting AND the class warning. this saves TONS of duplication in your CSS. (i don’t know why no one uses this trick. it’s great. when you see someone’s stylesheet that has dozens of lines like:
.redtext {
font-family: Arial, Helvetica, sans-serif;
color: red;
}.bluetext {
font-family: Arial, Helvetica, sans-serif;
color: blue;
},that's a sign that they probably don't know this trick.
- use commas to apply the same CSS rule to many HTML tags at once:
p, b, i {…will apply the … style to paragraphs, bold, and italic text in one line.
- condense rules like (
- Hacks are stupid. You don’t need them. Many CSS tutorials teach that to make a page work in multiple browsers, that you need to learn various “CSS hacks”. All this stuff is crap. You don’t need any of it.
(The Only) Ten Things To Know About CSS
