It’s pretty basic stuff for most experienced CSS developers, but if anyone wants a quick primer on CSS positioning, this should be a good guide. The video is embedded below and I’ve summarized the content here in this post.

Some main points from the screencast:

• The position property in CSS takes 4 common values supported in all browsers. There are other values, but this video only deals with the well supported ones.
• In order to position something with the top, right, bottom, and left values, you need to set the element to either “position: absolute” or “position: relative”.
• If a child is absolutely positioned, it will be positioned relative to the viewport or the closest relatively positioned parent.
• You can make an element automatically expand to fit its relative parent by using “0” values for all the offsets.
• Static elements will ignore an absolutely positioned element, behaving as if it’s not there. Because of this, absolute positioning is not recommended for large layout features or other areas of your site that are dependent on the natural flow of elements.
• CodePen demo used in the screencast.

The post CSS Positioning Basics (Screencast) appeared first on Impressive Webs.

If I understand it right clear float is automatic in most modern browsers right?

If you’re new to CSS, then it would seem that the answer to this question should be “yes, of course — modern browsers don’t have these types of bugs!” But the necessity to clear floats is not a browser bug; it’s actually, well, more of a CSS feature. And it’s still needed in so-called “modern” browsers (assuming you’re using floats for layout).

This doesn’t mean, though, that clearing floats will always be necessary. The eventual goal of CSS layouts is to never need to use floats for layout. Instead, we want to be able to use a better method.

But clearing floats are a fact of developer lives today, and so I thought I’d explain why clearing them is still necessary, even in “modern” browsers.

What Does a Float Do?

Here is, in part, how the W3C spec explains what floats do:

Content flows down the right side of a left-floated box and down the left side of a right-floated box … Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.

You can see this behaviour demonstrated in the JS Bin below:

http://jsbin.com/azuwul/1/edit

Notice that the green box is acting as if the red box is not even there, rather than “flowing” around it like the text does. This is what floats do: They cause other floated elements and inline content to flow around the float, but other block boxes ignore the float.

The only problem I have with the W3C definition is that it sounds like it’s talking about absolutely positioned elements. So it seems that floats should have a different wording ascribed to them. I prefer to say that floats are taken out of the normal flow in relation to sibling block elements.

Regardless of the explanation, you should be able to see that no matter how far browsers advance, they will never clear floats automatically (as the original question seemed to assume) — because the behaviour of floats is not a bug; it’s a feature.

Float Clearing Methods

To round this post out, let’s cover the most popular methods for clearing floats.

clear: both/left/right
The primary way to prevent an element from flowing alongside a floated sibling is to use the clear property. Any value other than “none” will clear the element that you want to follow the float (rather than bump up against it).

overflow: hidden/auto
The main problem with floats is what you might refer to as the collapsing container, which causes background elements to disappear. In this case, you don’t have a trailing element that you can “clear” to fix this. But instead, you want the parent element to fully contain all the floated children. In this case, at the very least you’ll need to use the overflow property. Using a value of “hidden” or “auto”, the parent will expand to contain all floated children. Although this is probably the easiest way to clear floats, it’s really not recommended, because of the problem of scrollbars appearing or child elements being cut off due to positioning, margins, or CSS3 transforms.

I think the only time I would consider using this one is for a small widget-like box in the page that has floated children (like a tab switcher or something like that), where I know that positioned elements and margins are not going to be a problem.

clearfix
The best method to use to clear floats is the clearfix method. I can’t remember who originally came up with this, but the most updated and optimized syntax that works in all browsers is the one proposed by Nicolas Gallagher and used in HTML5 Boilerplate. Here’s the code:

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
/* For IE 6/7 only */
.clearfix {
    *zoom: 1;
}

With that in your CSS, all you have to do is add a class of “clearfix” to any element that is “collapsed” due to floated child elements. Again, you could use the overflow method instead, but it’s not universally ideal. I’ve found it causes too many problems in complex layouts.

To Sum Up

Yes, float clearing is still necessary in modern browsers, and the best method is the clearfix method. But eventually, we want all in-use browsers to support an alternative, more intuitive method for doing CSS layouts, so we don’t have to worry about hacks and workarounds to fix these types of problems.

Post excerpt photo credit: Root beer float from Bigstock

The post Clearing Floats: Why is it Necessary Even in “Modern” Browsers? appeared first on Impressive Webs.

I’ve been collecting links to beginners resources for web development for some time now, so I thought I’d share that list here. Feel free to add your own in the comments.

A Beginner’s Guide to HTML & CSS (website)
A simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development.” This guide, led by front-end developer Shay Howe, looks quite comprehensive, covering everything from tag semantics to new CSS3 features like gradients.

HTML & CSS: Design and Build Websites (book)
A beautifully designed book by Jon Duckett that has been the #1 selling web design book on Amazon for a number of months now. The website describes the book as “a book about code that doesn’t read like a 1980s VCR manual. It’s not just for programmers, it’s written and presented to make it easy for designers, bloggers, content and e-commerce managers, marketers to learn about the code used to write web pages.”

30 Days to Learn HTML and CSS (screencast series)
A video screencast series by Jeffrey Way of the Tuts+ Network that teaches viewers HTML and CSS from the ground up. All the lessons are in the Tuts+ Premium section, but unlike other courses on Tuts+ Premium, this one doesn’t require that you be a Premium member.

The CSS3 Anthology (book)
This book, by Rachel Andrews, is a great question-and-answer type book that can complement linear tutorial-style learning. It’s not the type of book you’ll read cover to cover (although you would definitely benefit from that), but instead works well as a problem-solving reference that you can go back to time again. Excellent for beginners and includes lots of new CSS3 techniques along with an introduction to responsive web design.

Code Avengers (interactive learning)
A free interactive online tutorial that will teach you Javascript, HTML, and CSS, “the fun and effective way.” There are currently three courses to choose from: HTML/CSS, JavaScript level 1, and JavaScript level 2. The site aims to use beginner-friendly terminology and tries to make the lessons resemble real-world problem solving.

30 Days to Learn jQuery (screencast series)
Another free screencast series from the Tuts+ Network, this time covering how to use the jQuery JavaScript library. Definitely looks like a great option for those who want to learn jQuery from scratch.

Don’t Fear The Internet (screencast series)
Video lessons created by Jessica Hische and Russ Maschmeyer. The site offers short tutorial videos that cover topics starting from an introduction to the internet as well as web browsers, HTML and CSS.

Codecademy (interactive learning)
A very popular interactive online learning website created by Zach Sims and Ryan Bubinski. It features beginner-level learning covering JavaScript, HTML, CSS, and jQuery, putting you “on the path to building great websites, games, and apps.”

Treehouse (screencast series / quizzes)
An affordable option for high-quality learning of HTML, CSS, responsive design, and even iOS development for building iPhone and iPad apps. Using Treehouse, users watch videos, take quizzes, and unlock badges.

jQuery Air: First Flight (screencast series)
A free course that’s one of the many programming courses available on Code School. This one covers JavaScript and jQuery fundamentals.

Scrunchup (website)
“The aim of this site is to give decent advice to students who want a career in web design or development. Sure, there are lots of websites out there that give advice on writing really good code, but not many of them are aimed specifically at young people who are just starting out.”

W3C’s Web Education Community Group Wiki (website)
A wiki with articles and resources for teaching and learning web development. Includes a Web Standards Curriculum.

Google: HTML, CSS, and Javascript from the Ground Up (screencast series)
A Google Code resource comprising a series of videos totalling nearly 2 hours of playing time covering the basics of the big three in front-end development.

HTML5 & CSS3 Fundamentals: Development for Absolute Beginners (screencast series)
MSDN presents 21 episodes with Bob Tabor teaching the fundamentals of HTML5 & CSS3 programming. Includes concepts about web pages, CSS3 styles and HTML5 features.

jQuery Fundamentals (website)
Described as “a guide to the basics of jQuery”, this is a very good resource for jQuery and JavaScript beginners. As the intro page explains, it’s “designed to get you comfortable working through common problems you’ll be called upon to solve using jQuery… Each chapter will cover a concept and give you a chance to try example code related to the concept.”

JavaScript For Cats (website)
This one-page resource, billed as “an introduction for new programmers” covers the basics of JavaScript starting with strings, variables, and functions.

Javascript Fundamentals: Development for Absolute Beginners (screencast series)
Another MSDN video series by Bob Tabor, this time covering JavaScript from the ground up. Includes 21 videos.

MDN’s Learn How to Make Websites (links to external sources)
Mozilla Developer Network’s resource for learning HTML, CSS, and JavaScript from the ground up. These aren’t original articles, however. They’re basically just collections of links to articles on other sites (A List Apart, SitePoint, dev.opera, etc).

Beginner Articles on CSS-Tricks (blog articles)
A collection of beginners articles by Chris Coyier.

CSS Basics on Impressive Webs (blog articles)
The CSS Basics section on this site, which I’ve neglected lately, but has some good basic stuff for beginners or those who have been out of the CSS loop for some time.

Learn CSS Layout (info app)
A simple info-app site that teaches CSS layout stuff from the ground up.

Got More?

If you know of any others, I’ll continue to update this list.

The post Web Development for Beginners (Resources) appeared first on Impressive Webs.

This article is filed under the CSS Basics category on this blog, but any developers who already use Sass on Windows can add their feedback, too.

Overall, Sass is not difficult at all to get set up, even if you’re doing it on the command-line. But if you have no interest in going through all these steps, but still want to use Sass on Windows, well, just skip to the final heading in this post for a list of apps that let you start using Sass on Windows with minimal setup.

1. Install Ruby

Because Sass is a Ruby gem, the first thing you need to do is install Ruby using the Windows installer. Unlike OS X, Ruby is not installed by default on Windows, so Windows users need to install it manually.

When you go through the installation wizard, you’ll come to this options screen:

From what I can tell, the only option that you need to check on that one is the middle option, which helps your command-line instructions recognize where to find (as it says) “Ruby executables”. Otherwise, you’ll get the error message “ruby is not recognized as an internal or external command” when you try to install Sass in the command prompt (see next step).

If anyone has any other pertinent info on this particular aspect of the setup, then please comment and I’ll update accordingly. But that should be enough for the first step.

2. Install Sass on Windows Using the Command Prompt

Now that you have Ruby installed, you’ll be able to install Sass. To do this, open the command prompt by doing one of the following:

• Start–>Run, then type “cmd”; or
• Start–>All Programs–>Accessories, then choose “Command Prompt”

Once the command prompt is open, install Sass by typing the following in the prompt:

gem install sass

Then hit “enter”, and wait for Sass to be installed. It should look like this when done:

If you want to have the added benefit of Compass, which is an authoring framework that uses Sass, you can instead choose to do “gem install compass”, which will install both Compass and Sass at the same time. I won’t get into the details on Compass here, but you can Google around for some info on that once you’ve started using Sass.

3. Set Up a Sass File

Now that Ruby and Sass are installed, you want to tell Sass what file you’re working on and let it compile your CSS from your Sass file.

In the command prompt, navigate to the folder where you’re going to write your CSS using Sass syntax. This is not a tutorial on command-line syntax, so you’ll have to figure that out on your own if you’ve never done it. You can check out this link or just do a Google search for tutorials on simple command-line expressions.

Here’s how my prompt looked after I navigated to my folder:

Notice that I’ve navigated using the “cd” or “change directory” command to locate the folder I’m working in.

Now, using Windows Explorer, go into that folder and create a new CSS file with the extension “.scss”. So instead of the usual “.css” extension, you’re simply adding an “s” to the front of the extension. You can do this by either creating a regular CSS file and changing the extension, or by creating a blank text file and changing the .txt extension to .scss.

4. Tell Sass to “watch” the File

Once your file exists, you want to tell Sass to keep an eye on it for changes, so it can compile it into a regular CSS file with traditional CSS syntax.

In the command prompt, inside the folder where your .scss file exists, type the following then hit enter:

sass --watch styles.scss:styles.css

You can copy the above code and paste it into the prompt by right-clicking and choosing “paste” (ctrl-V won’t work there). Ensure that “styles.scss” matches the file name that you chose when you created your new .scss file, and the same for the resulting .css file. Don’t worry that the .css file doesn’t exist yet; Sass will create it automatically.

Once you’ve used the correct command as shown above, you should see this in the command prompt:

As you can see, Sass is now ‘watching’ your .scss file for changes. To stop the watching, just hit ctrl-C in the prompt.

5. Write Some Sass on Windows and Let it Compile

Using any text editor, open your .scss file and throw some Sass in there. This article is not about Sass syntax (there’s tons of stuff online for that, and I’ll probably cover something in the future), but here’s an example you can copy and paste, taken from the Sass website (use the “view plain” link to get a clean copy of the code without line numbers):

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

After pasting that into your text editor, just save your .scss file then go back to the command prompt. You should see something like the following:

Notice that Sass has automatically detected the changes to the file and has produced a new file in the same folder. In that folder, you’ll see that new file, called “styles.css” (or whatever you named your .scss file). Open that new file in your text editor to see the compiled CSS.

Using the example above, you should see the output appear as follows (there might be a slight variation in curly brace placement or spacing):

.content-navigation {
  border-color: #3bbfce;
  color: #2ca2af;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Now you can continue to write Sass-based code in your .scss file and Sass will keep detecting those changes and overwriting your CSS file every time you save the original file.

Of course, keep in mind that in your HTML file, when you reference your CSS, you’ll point to your regular .css file. The .scss file is just for your editing, and doesn’t get used directly in any web pages.

Skip Everything Above and Use an App!

If using the command prompt still bothers you (and it really shouldn’t, as the above instructions are pretty simple), then you can try out one of the following apps:

• Prepros App
• Koala
• Compass.app
• Scout App

The post Setting Up Sass on Windows appeared first on Impressive Webs.

But you’ve probably noticed that those properties can put unnecessary constraints on your page elements. So you might benefit from knowing and using related properties that use the “min” and “max” prefixes.

min-width / min-height

The min-width and min-height properties accept unit values the exact same way that the height and width properties do, so there’s no difference in the syntax. You can use any acceptable unit, including pixels, ems, and percentages.

These properties are used to tell the browser to render an element at a “minimum” size. Here’s an example with both:

.element {
    min-height: 200px;
    min-width: 200px;
}

A block-level element with the above CSS would have, at the very least, dimensions of 200×200 pixels — even if the element was empty. However, since block-level elements will, by default, naturally expand to fit the available space, only the min-height value would actually have any effect in many cases.

To see the effects of min-width, you could add a float to the element. Here’s a demonstration. Try removing the float in that example, and you’ll see the element expand to fit the page.

max-width / max-height

Like the “min” properties, max-width and max-height accept the usual unit values. But this time, instead of a minimum size for an element, these properties set the maximum size. Here’s another simple example:

.element {
    width: 15%;
    height: 15%;
    max-height: 200px;
    max-width: 200px;
}

Notice that this time I’ve specified percentage values for the width and height, but I’ve constrained the maximum width and height values at 200px. The width of “15%” will be calculated based on the size of the parent element (that is, 15% of the parent). But even if the parent element is 5000px wide, the .element box won’t get any wider than 200px, which is the maximum width that we’ve set.

Final Notes

Min- and max- width and height values should become a regular part of your CSS toolbox. min-height is useful if you want to give an element layout in IE7. Also, you could have a problem where you have a fluid header or footer that doesn’t expand properly, which can be fixed with min-width.

And, of course, these properties are quite useful for responsive web design. Used in conjunction with CSS3 media queries, the max- properties can help you ensure that you don’t have overly-wide elements on any page, which can make content awkward and unreadable.

The post Using Min/Max Width and Height in CSS appeared first on Impressive Webs.

A “selector” is the instruction in a CSS rule set that tells the browser what elements to ‘select’ for styling. Look at the two examples below:

.box {
  background-color: red;
}

form textarea {
  background-color: blue;
}

In each of those examples, the selector is the part of the rule set that appears before the opening curly brace. “.box” is the first selector and “form textarea” is the second selector.

Selectors Defined with Examples

Here is a brief definition of each type of selector, with examples:

Universal Selector
This selector consists of the asterisk character, like this:

* {
  background-color: red;
}

When used on its own like above, this selects every element on the page.

Element Type Selector
Also called just the “type selector”, this selector matches HTML elements by tag name. Two examples:

h2 {
  background-color: red;
}

div {
  background-color: red;
}

Class Selector
This selects an element that matches a class name defined in a class attribute in the HTML.

.element {
  background-color: red;
}

This is easily my favourite selector, and all good CSS developers should use it abundantly. You can put multiple classes separated by spaces on a single class attribute, which makes this selector quite powerful.

ID Selector
This selects an element that matches an id defined in an id attribute in the HTML.

#element {
  background-color: red;
}

Descendant Selector
This selector is defined with a space character separating two selectors, and represents a child element, but not just immediate children, further nested ones as well.

.parent .child {
  background-color: red;
}

Attribute Selector
This selector targets an element based on an HTML attribute and/or attribute value. Both examples below are valid attribute selectors:

div[style] {
  background-color: red;
}

input[type="text"] {
  background-color: red;
}

The first example targets any <div> element that has a “style” attribute. The second example targets any <input> element that has a “type” attribute with a value of “text”.

Child Selector
This selects an element based on it being an immediate child of another element:

.one > .two {
  background-color: red;
}

So this will not style a “.two” element unless it is an immediate child of a “.one” element. It can’t be nested inside another element, it has to be an immediate child element. And only the child is styled, not the parent.

Adjacent Sibling Selector
This selector, which uses the plus sign, targets elements that are “adjacent” to each other, or immediate siblings, and they must have the same parent element.

h2+p {
  background-color: red;
}

General Sibling Selector
This uses the tilde character and is exactly the same as the adjacent sibling selector except the elements don’t have to be immediate siblings.

h2~p {
  background-color: red;
}

Pseudo-class
While technically falling under the category of “selectors”, these are not normally referred to as “selectors”, but just pseudo-classes. These select an element based on a state the element is in. Here are a few examples:

a:visited {
  background-color: red;
}

input:focus {
  background-color: red;
}

Pseudo-element
Again, not normally referred to as a selector, these actually represent elements in the HTML page that are not really part of the rendered HTML:

p:first-letter {
  background-color: red;
}

p:before {
  content: "";
  background-color: red;
}

The “:before” and “:after” pseudo-elements are unique from other pseudo-elements in that they must be used along with the content property. For more on these, see my article on Smashing Magazine.

If you enjoyed this article, you might also like a post I wrote defining a number of different CSS Terms.

The post CSS Selectors Defined appeared first on Impressive Webs.

Let’s look at how shorthand works with some common examples, and I’ll try to explain some of the quirks associated with CSS shorthand.

A Shorthand Example

Declaring a background image is quite common in CSS. A background declaration in shorthand looks like this:

.element {
  background: #fff url(../images/bg-image.png) no-repeat fixed 20px 20px;
}

To understand what’s happening in this shorthand declaration, here is the exact same CSS using longhand:

.element {
  background-color: #fff;
  background-image: url(../images/bg-image.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 20px 20px;
}

You can see already why most CSS developers prefer shorthand notation over longhand — the first example condenses five lines of CSS into one.

Simple Shorthand Declarations

Some shorthand declarations work in a very simple way. The example I showed you above with the background property is one of the more complex types (more on that below). But other shorthand declarations are quite easy to understand and work with.

The margin and padding properties are good examples of properties you’ll use often in their shorthand notation. And they’re not difficult to understand:

.element {
  padding: 20px;
}

In this example, although I’ve left out three other values, those values are assumed to be equal to the one value shown. So with this code, all four sides of the targeted element will have 20px of padding.

We can also do this:

.element {
  padding: 20px 10px;
}

In this example, we are declaring the top and right padding explicitly. The bottom and left padding, although not declared explicitly, will assume the same values as top and right — in that order. So the box will have 20px of top and bottom padding, and 10px of right and left padding.

And again, the long-hand equivalent of the example above would look like this:

.element {
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

Margins and CSS3’s border-radius property work exactly the same way, except with border-radius we’re dealing with corners instead of sides.

The More Complex Shorthand Declarations

Other shorthand declarations are a little more complicated, but with a few small exceptions, shouldn’t really cause you too many problems once you get the hang of them. The background shorthand declaration I showed you earlier is one example of these.

Other shorthand properties that may trip you up at times include:

• list-style
• font
• border
• outline

CSS3 features that use shorthand using the more complex style of notation include:

• animation
• border-image

So what is it that makes these other shorthand properties more difficult to understand? Well, because these properties accept different types of values (sometimes keywords, sometimes units, etc.), leaving out certain values in a shorthand declaration will often have unexpected results.

Here’s an example using background:

.element {
  background-color: blue;
  background: url(../images/bg-image.png) no-repeat;
}

With the code above, you would expect that the targeted element would have a non-repeating background image set over a blue background. But that will not happen unless we reverse the order of the properties. Because we’ve used background shorthand, this causes all the values associated with the background property to be reset to their initial, or default, state. In this case, the background color becomes “transparent”, overwriting the “blue”.

Avoid Getting Tripped Up

So it’s important to understand that anytime you use one of these more convoluted shorthand declarations, all omitted values associated with that shorthand declaration will be reset to their defaults.

Normally this is not a problem, because with properties associated with backgrounds, lists, padding, etc, those properties aren’t inheriting their values from parent elements. The only place where I have found this can cause headaches is in association with the font shorthand property.

That’s why I did this old screencast (which is a bit out of date now) and created this cheatsheet that discusses some of the problems you might run into when using the shorthand font property. Basically, we expect certain typographical properties to inherit from their parents. But when we use font in shorthand, all the properties associated with that declaration are reset to their initial state, thus losing that natural inheritance.

Another thing that can happen with font shorthand and some other shorthand declarations is that if you omit a mandatory value, the entire line will be ignored by the browser. This is another thing to keep in the back of your mind in case you’re scratching your head wondering why a certain CSS property isn’t having any effect.

Conclusion

Overall, I highly recommend using shorthand whenever you can. The only one that I avoid like the plague is font. I’m perfectly content to use longhand for those, and I think many feel the same way.

It does help to use longhand when you’re first starting out, to get to know each of the individual properties. But for the most part you’ll stick to shorthand once you’ve got a good handle on the syntax for the property you’re using.

The post Understanding CSS Shorthand appeared first on Impressive Webs.

Using a Unique Link Class

Probably the most common and easiest way to do this is by simply applying a different class with appropriate styles on the current page link. So in your HTML you would see something like this:

<ul class="nav">
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="services.html">Services</a></li>
  <li><a href="products.html" class="current">Products</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

The CSS would then require something like the following:

a:link, a:visited {
  color: blue;
}

a.current:link, a.current:visited {
  color: white;
  background-color: blue;
}

Now all links with a class of “current” will have white text on a blue background, while all other links will have just blue text.

The only thing you have to make sure of is that the location of the class gets changed depending on the page you’re on. For example, the HTML shown above would appear on the “Products” page, but on the “Contact” page the “current” class would be moved to the “Contact” link.

Adding a Class to the <body>

This next method is a lot messier, but is an option if you don’t mind more HTML. You can add a unique class to the <body> tag and then have a different class for each link. The body class would change depending on what page the user was viewing. So on the “About” page, your <body> tag would look like this:

<body class="about">

The HTML for your links would look like this:

<ul class="nav">
  <li><a href="index.html" class="home">Home</a></li>
  <li><a href="about.html" class="about">About</a></li>
  <li><a href="services.html" class="services">Services</a></li>
  <li><a href="products.html" class="products">Products</a></li>
  <li><a href="contact.html" class="contact">Contact</a></li>
</ul>

Then in your CSS you would have the following:

a:link, a:visited {
  color: blue;
}

body.home a.home:link,
body.about a.about:link,
body.services a.services:link,
body.products a.services:link,
body.contact a.contact:link {
  color: white;
  background-color: blue;
}

This includes a separate selector for each nav item. So although the different unique link classes will appear in the HTML on every page, the unique “current page” styles will only take effect on the page that has the matching <body> class.

Final Notes

A few things can be noted about the technique outlined here:

• If you are using PHP (or some other back-end language), you can generate the classes dynamically based on the current page
• Although I’m applying the unique classes to the link elements, you can use the <li> elements if you want
• I’ve seen people use a class of “active” instead of the class of “current” that I’m using here; I think “current” (or something else other than “active”) is better because CSS already has a pseudo-class called :active that means something completely different, so that might be confusing for beginners
• I suppose you could use the :nth-child() pseudo-class to target the current link by number in the list, but that seems a little convoluted and not very convenient or maintainable
• If you want to do this on a WordPress site, this article covers that topic

The post Current Page Link Styles appeared first on Impressive Webs.

Two of the most common selectors used in CSS are the “class” selector and the “ID” selector. There are many others, but this post will focus on these two, and I’ll describe the difference so you’ll know the potential effects of using either of these selectors.

The ID Selector is Very Specific

An ID is defined in your HTML like this:

<div id="element">
<!-- stuff goes here... -->
</div>

And in your CSS you can target the element, and apply styles to it, like this:

#element {
    background: blue;
}

CSS styles are applied based on rules relating to the cascade and specificity. Because this is a post aimed at CSS beginners, I’m not going to go into the gory details of those subjects. If you want to delve into this, there’s a nice article on Smashing Magazine by Inayaili de Leon that might be worth a peek.

The specificity of a selector can have a profound effect on the future maintenance and debugging of your CSS code. So, with that in mind, do realize that if you choose to use the ID selector, you may end up causing specificity issues that will force you later in development to use even stronger selectors. This could easily get out of hand and cause your stylesheet to be less maintainable and bloated.

Styles in a CSS file are supposed to “cascade”. So, theoretically, this should allow styles declared later in your stylesheet to override styles that are declared earlier. But because of more specific selectors (like IDs), this doesn’t happen as often as we’d like.

For example, if you had the following HTML:

<div id="element" class="element">
<!-- stuff goes here... -->
</div>

And CSS:

#element {
    background: blue;
}

body div.element {
    background: green;
}

Even though the body div.element selector appears after the #element ID selector, and despite the fact that the “body” element is included as part of the selector, the background of the element will be blue — not green — because the ID selector is more specific than the second selector, and the natural cascade has been overridden.

It may seem at first glance to be an advantage to have a very specific selector. But in the long run, this is not a good thing. Also, because an ID has to be unique and must only appear once per HTML page, you can’t reuse the styles on an ID selector, so your stylesheet will be much larger if you end up using a lot of IDs.

Class Selectors are Much Easier to Work With

Classes are applied in HTML like this:

<div class="element">
<!-- stuff goes here... -->
</div>

And you target the element in your CSS like this (which, I’ve already demonstrated in the previous section, really):

.element {
    background: blue;
}

Class selectors are, in my opinion, highly underrated and a much cleaner and easier to use option for applying styles to elements. There are a number of reasons for this.

Classes can be reused (you’re not limited to a single class per page, like IDs). This allows you to avoid repeating styles unnecessarily. You can also include multiple classes using a single attribute, like this:

<div class="element class2 class3">
<!-- stuff goes here... -->
</div>

You also have the option to chain your classes using selectors like .element.class2.class3 (notice no spaces between the classes). While this is possible, you should know that this method is buggy in IE6, which is why these types of chained class selectors have been largely avoided for so many years.

And best of all, class selectors are not extremely specific. So a class of .element will override the less specific element selector (e.g. a plain span or div selector), but it will not override other classes — unless it appears after those classes in the CSS.

This is great for maintenance and debugging of your CSS, because when you add new classes to your CSS, you won’t be scratching your head wondering why the styles don’t take effect right away.

Final Notes

So my advice is: Don’t use IDs as CSS selectors unless you have really good, practical reasons for doing so. Use classes abundantly and allow the natural cascade to work its magic.

This doesn’t mean you won’t use IDs. You will still need IDs for in-page links (i.e. fragment identifiers), and for JavaScript and jQuery hooks.

You might think: What if there’s an element on the page that already has an ID (for non-CSS reasons), and it’s an element that you absolutely know is going to be unique and won’t have repeated or reusable styles? Well, in my opinion, even in this case, there is no reason to use the ID selector in your CSS, and you should still use a class instead.

If you take each one as a stand-alone selector, regardless of all other styles and selectors, there is no difference between #element and .element. But when you factor in the negative effects of an ID selector (the non-reusability, the high specificity, the detriment to the cascade), I think the class selector is much more powerful and should be an overwhelming choice.

Finally, if you want to get into some more good reasons to use classes heavily, you can check out my recent Smashing Magazine article covering Object Oriented CSS.

The post What’s the Difference Between Classes and IDs in CSS? appeared first on Impressive Webs.

In my opinion, this is one of those areas that, once understood correctly, can help beginners to take their CSS skills to the next level.

Block-level Elements

A block element is an element that has, but may not be limited to, the following characteristics:

• If no width is set, will expand naturally to fill its parent container
• Can have margins and/or padding
• If no height is set, will expand naturally to fit its child elements (assuming they are not floated or positioned)
• By default, will be placed below previous elements in the markup (assuming no floats or positioning on surrounding elements)
• Ignores the vertical-align property

So, for a block element, it’s not necessary to give it a set width or to give it a width of 100% if you want it to fill its parent horizontally. In fact, doing either of those things may cause maintainability issues or other undesirable problems.

And, as the fourth item in the above list indicates, it’s also not necessary to “clear” a block element; assuming no floats are affecting the block element, it will be cleared automatically and will start on the next “line” in the page’s output.

Examples of Block Elements:
<p>, <div>, <form>, <header>, <nav>, <ul>, <li>, and <h1>.

Inline Elements

An inline element has, but may not be limited to, the following characteristics:

• Flows along with text content, thus
• Will not clear previous content to drop to the next line like block elements
• Is subject to white-space settings in CSS
• Will ignore top and bottom margin settings, but will apply left and right margins, and any padding
• Will ignore the width and height properties
• If floated left or right, will automatically become a block-level element, subject to all block characteristics
• Is subject to the vertical-align property

The easiest way to picture an inline element is to think of it as a box that acts like text. What happens, for example, to text that’s not separated by other elements? It flows one letter after the other. If you put an inline element next to text, it will flow next to that text just like another piece of text.

Examples of Inline Elements:
<a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code>.

Other Notes

You’ll notice that the examples of both block and inline elements are quite revealing: The block examples are structural elements, while the inline elements are text-based. This is an easy way to remember which is which, although at first you will sometimes be confused.

Generally speaking, you can put any block element inside another block element. You can also put any inline element inside a block element, as well as any inline element inside any other inline element. But you cannot put a block element inside an inline element — with (I believe) one exception: You can wrap an <a> element around any content, whether it be block elements, or inline elements, or a mixture of both.

You have the option to change any block-level element to an inline element, and vice-versa, using the display property. So keep that in mind if you need to do this. But don’t use the wrong element for the wrong purpose. An SEO guy once told me to put an <h2> element inside of a paragraph, and style it to look like regular text, because he wanted an SEO boost. Not a good idea, that’s what <em> is for.

One final thing to note is that, although from a CSS perspective block and inline do exist, from an HTML5 perspective, the different types of elements have been re-categorized, so that they’re more specific. You can read about these content models in the WHATWG HTML5 spec.

Bonus Tip: Replaced Elements

At the beginning, I said that block and inline were just two types of content. Generally speaking, those are the two primary kinds, and you won’t have to worry too much about any other kinds.

But there are what are referred to as replaced elements. Basically, these are neither block nor inline. But you might classify them as something closer to inline, but with block-like structure.

I won’t provide a detailed explanation here; you can check out the SitePoint article linked in the previous paragraph for full details. But some examples of replaced elements include:

<img>, <object>, <input>, and <select>.

Conclusion

If you’re just starting out with CSS, understanding the behaviour of block vs. inline elements will go a long way to helping you code sites that are efficient and maintainable and don’t rely on overuse of floats or other undesirable methods.

The post The Difference Between “Block” and “Inline” appeared first on Impressive Webs.