Life Hacks night school

How to Make a Web Site Part II: Styling and CSS  January 14, 2016 – 03:21 am
This one would have totally
  • A plain text editor to write your HTML
  • Your web browser of choice to test your HTML
  • A desire to beef up your knowledge of how the web works

As you can see, it doesn't take much to get started.

What Are Styles and CSS?

CSS stands for Cascading Style Sheets, and it's the language your browser uses to interpret how elements on a web page should look. The CSS language is pretty easy to understand: You define specific CSS properties, which span everything from element dimensions (width and height), text (weight, style, font-type, color, etc.), positioning, and spacing (margins and paddings).

Essentially, if it has anything to do with how an element should look, it has to do with CSS. To extend on the metaphor above, HTML and the elements in your document are the bones of the site. They provide structure. CSS dresses your site and makes it look nice—or not. That part depends on your design chops.

How to Apply CSS to Elements

Of course, you need to know where to apply your CSS styles so that the elements on your page reflect them. (You couldn't just go typing color:red; willy-nilly and expect results. You can use CSS to apply styles to any element on your web page in one of three ways:

  • Inline styles: This method is best for quick, one-off styles that you want to apply to one element without a lot of overhead. You can add inline styles to any element by defining the style attribute of an element. For example:

    The text inside this paragraph tag will be red.

    You can define more than one property using inline styles as long as you remember the semicolon between them:

    The text inside this p tag will be red, 20-pixels wide, and use Helvetica.

  • Internal stylesheets: Inside the document (often inside the head), you can define styles for elements in the page using selectors. Internal stylesheets look like this:

    In the example above, the h3 is the selector. It's saying, "All H3 elements on this page should use the following styles." You can also define selectors using classes or element IDs.

  • External stylesheets: These stylesheets move the CSS to an external file ending with .css (for example, style.css. The syntax for external stylesheets is exactly like what you saw with internal stylesheets, but you don't need the style declaration. Instead, you link to your external stylesheet like so:

    In this instance, I've got the style.css file inside a stylesheets folder, and I'm telling the web browser: "When you load the page, looks for the CSS here." Everything inside looks the same as what goes inside the style tags of internal stylesheets.

When to Use Classes, IDs, and Element Selectors?

Most of the time, for the sake of organization, you'll want to use external stylesheets. But how do you decide which selectors to use? Let's quickly run through your options:

  • Element selectors: You should use an element selector when you want most elements of that type to look the same way on your page. So if you wanted all h2 elements to be 30 pixels, you could add the following to your CSS file:

    h2 { }

    From then on, every h2 will respect that style unless you override it.

  • Class selectors: Classes are useful for broad styles that you want to apply to more than one element, but it may be a style that you want to use a little more selectively than you would when using the element selector. In the video, I defined the very boring red class like so:
  • ID selectors: Defined in CSS by a preceding hash (#), the ID selector is for one specific element and one element only. Essentially this provides a way to adjust styles for one specific element without using inline styles—keeping all your styling in one place. (IDs are also very useful for JavaScript, but that's well beyond our scope here.) If I wanted an 800x600px div with a red background called my_red_div, it would look like this:

    #my_red_div { width:800px; height:600px; background:red; }

Watch the video to see all this in practice. Reading is one thing, but it all starts to make more sense when you can see it.

That's It?

In a nutshell, yes! Of course there's more to CSS, and there are some seriously more advanced ways of handling CSS selectors so you can really narrow down how elements inherit their styles, but that's really the basics. The only thing missing: the properties!

I'm not, however, going to walk through every CSS property available (we frankly don't have time in this lesson). As with most things of the programming nature, you'll learn more from searching out your options than I could provide in one quick guide. Here are a few CSS references you might want to browse:

I'd love to hear more favorites in the comments for reference tools! I'm mostly a googler for this kind of stuff. I'm not CSS expert, but I've spent a good amount of time hacking CSS for my own pet projects, and believe me: A little bit goes a long way, but there's plenty you can learn if you want to go deep.


You might also like:

Stay Organized after School Tips and Life Hacks
Stay Organized after School Tips and Life Hacks
Back to School Life Hacks! | Meredith Foster
Back to School Life Hacks! | Meredith Foster
Back to School LIFE HACKS! Alisha Marie
Back to School LIFE HACKS! Alisha Marie
  • avatar visiting san francisco in september--what to wear to during the day and at night? | Yahoo Answers
    • September, especially late September, has some of the nicest weather of the entire year. You may run into warm (high 70s or more) days. It's very rare that an evening is warm, however.
      The the deal with San Francisco dressing is layers. The temperature can change 10 degrees in the space of a few blocks; and if the wind comes up, it gets very cold and misty. No one's going to care how you dress, so bring stuff that pleases you. Wait, no, I forgot: leave the shorts at home.

Related posts:

  1. Life Hacks for middle school
  2. Life Hacks Back-to-School
  3. Life Hacks grad school