Archive results for: CSS

CSS Tools and Methodologies Presentation

Brad Westfall gave a great presentation on CSS methodologies.  If you want to learn how to write CSS the right way, you need to watch this, really.

PPK Presentation on Mobile Viewports

Peter-Paul Koch(ppk) of gave a very interesting presentation at this years HTML5 Dev Conference about mobile viewports.

CSS Tip: Float example

Using CSS floats is very commonplace for web pages layouts and designs and here is just another example.

I needed a layout for an interior page that would display information in a pseudo calendar format with dates on one side and the event description on the other. I wanted it to be easy to read and would look fine on smaller devices without making any style changes.

So this is what I came up with:


Formatting Tables Quickly

tablesWhen you have lots of data tables on a website and need to quickly format them so they are readable look at least somewhat not too boring a little CSS and jQuery can go a long way.

As we all know tables should be only used for tabular spreadsheet-like data but even then there are considerations to me made when trying to design them in a way that matches the rest of your site. So every situation will be unique but here is a sample that can be used as a starting point.

These styles add a thin border around all cells, put content vertically spaced, unique header background color, and consistent text alignment to the left. Read more ›

CSS Preprocessors

CSS has no memory or intelligence, meaning you’ll have to write certain style declarations again and again. Plus if you have to change something, you’ll have to find those places again and hand-edit them (even with using Object Oriented CSS).

CSS_preprocessorsPreprocessors take some ideas from hardcore computing programming and puts them back into CSS. The benefits include reusing the same code across multiple projects, change an entire site’s styling with a few edits, completely separating styling from content mechanics.

But since no direct browser supports preprocessed CSS you must either compile your pre-CSS on your development machine and upload the standard CSS that is generated or can setup your server to work with the raw pre-CSS files generating the CSS on the fly.

There are three main CSS preprocessors used right now: Read more ›

CSS Tip: Reset Methods

The browser will give elements such as the body, headings, paragraphs and lists certain margins, line heights and padding by default. If we don’t reset any of the default CSS parameters, the browser will use its own default parameters instead.

Since different browsers have different default CSS, a site layout can end up looking inconsistent, depending on which browsers you use. That’s why it’s usually good practice to use a CSS reset, because it gives us a good baseline for laying out pages by completely removing certain browser style inconsistencies such as margins, padding, line height, and heading font sizes.

There are two common CSS reset methods used today, Eric Meyers’ reset CSS and normalize.css.
Read more ›

CSS Selector Types

A CSS selector is the part of a CSS rule set that actually selects the content you want to style. Let’s look at all the different kinds of selectors available.

The universal selector works like a wild card character, selecting all elements on a page.

The three lines of code inside the curly braces (color, font-size, and line-height) will apply to all elements on the HTML page. The universal selector is declared using an asterisk. Read more ›

Page 1 of 212