tags: CSS

Action executed in 0.000

Each Tag


Common tags - number of posts

HTML (8), layout (5), display (3), JavaScript (2), awesome header (2), flex (2), inline-block (2), style (2), SVG (1), custom (1), design (1), O'Reilly (1), email (1), font (1), css3 (1), reference (1), conference (1), blue (1), min-height (1), CMX (1), web standards (1), test (1), table (1), accessible (1), compound numbering (1), blog (1), quirks mode (1), position (1), media queries (1), IE (1), form (1), HTML5 (1), CSS3 (1), Annual CSS Naked Day (1), web (1), genetik (1),

2 way join

CSS, awesome header, CSS, display, CSS, flex, CSS, HTML, CSS, inline-block, CSS, JavaScript, CSS, layout, CSS, style

3 way join

CSS, display, flex, CSS, display, inline-block, CSS, display, layout, CSS, flex, layout, CSS, HTML, JavaScript, CSS, HTML, layout, CSS, inline-block, layout

4 way join

CSS, display, flex, layout, CSS, display, inline-block, layout


Web Typography: Designing Tables to be Read, Not Looked At · An A List Apart Article

tags: CSS, layout, HTML, table
Illustration for the Web Typography: Designing Tables to be Read, Not Looked At article Tables come in many forms. Some contain simple numbers, others are complex with mixtures of numeric data and textual information. Some require reading row by row, others are scanned vertically. The potential use for tables is as varied as the written word. They can be financial statements, bus timetables, multilanguage dictionaries, tables of contents, numerical conversions, pricing options, feature comparisons, technical specifications, and so on.

url: https://alistapart.com/article/web-typography-tables

type: none, format: blog


JavaScript, HTML5, CSS3 Conference - O'Reilly Fluent

O'Reilly Fluent Conference Practical training in JavaScript, HTML5, CSS, and the latest web development technologies and frameworks.

url: http://conferences.oreilly.com/fluent/

type: none, format: none


Articles – Sara Soueidan – Freelance Front-end Web Developer

tags: web, CSS, SVG
Sara Soueidan

I’m a Lebanese self-employed front-end web developer, writer and speaker, focusing on HTML5, SVG, CSS and JavaScript. I have a Bachelor’s Degree in Computer Sciences, and I work with companies across the globe, delivering websites for small and medium businesses, as well as work as an outsourcing partner to various web and design agencies.

url: http://sarasoueidan.com/articles/index.html

type: person, format: blog

Switching from inline-block to flex

Holy Grail Layout by Mozilla

While disliking CSS floats, i though i achieved the nirvana of page layout by using display: inline-block. Then i found display: flex.

Both the left side navigation and the right side main content were inline-blocks with the left side width: 20% and the right side width: 80%. I just had to make sure there was no margin on these elements and there was no white space between the elements. So often i had code like this <div><div class='left'>menu</div><div class='main'>content</div></div>; or for forms like this: <div class='form_style'><label>name</label><div><input/></div></div>.

Now i'm using display: flex. It's pretty well supported among all browsers. It easy to support responsive layouts. I'm looking forward to finding and switching to a flex based grid.

Reference: Using CSS flexible boxes


How To Use CSS3 Media Queries To Create a Mobile Version of Your Website – Smashing Magazine

Smashing Magazine

In this article I’ll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. We’ll have a look at a very simple example and I’ll also discuss the process of adding a small screen device stylesheet to my own site to show how easily we can add stylesheets for mobile devices to existing websites.

url: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

type: article, format: none


Solved by Flexbox — Cleaner, hack-free CSS

tags: flex, display, layout, CSS
Better, Simpler Grid Systems

CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity.

url: http://philipwalton.github.io/solved-by-flexbox/

type: article, format: none


A List Apart: Articles: Prettier Accessible Forms

A LIST Apart: For People Who Make Websites

It can be time consuming to make web forms both pretty and accessible. In particular, laying out forms where the form label and input are horizontally adjacent, as in the image below, can be a real problem. We used to use tables, which worked well in this scenario—but forms don’t constitute tabular data, so it’s a semantic faux pas.

url: http://www.alistapart.com/articles/prettyaccessibleforms/

type: article, format: wiki


CSS tests and experiments

tags: CSS, test
Brunildo daisy logo The pages listed here contain tests and experiments about features, possibilities, browsers’ bugs regarding CSS. I would love to hear any comments that you may have, especially if you find errors.

url: http://www.brunildo.org/test/

type: none, format: none

Using inline-block for page layout

Helephant.com logo Thanks to a "gotcha" spotted by Helen at Helephant, i'm now able to replace the flaot: left i mean position: absolute style on my website with display: inline-block; width: 20% for the #sidebar. The #content gets 80%.

The problem i was facing was the #content at 80% width was falling below the #sidebar at 20% width.

What Helen spotted was that that these divs are now treated as inline and laid out in the flow of the page. So whitespace between the divs appears on the page. This space is enough to overflow the 100% width of the page.

BTW, one disadvantage to using position: absolute was the #sidebar and #content were taken out of the flow. Thus the #footer was not placed correctly on the page.


Blog | 1976design.com

1976design header screenshot blog of Dunstan Orchard

url: http://1976design.com/blog/

type: none, format: none


CSSquirrel: Kyle Weems

squirrel CSSquirrel is the personal website of Kyle Weems, where he waxes eloquently about the things he is passionate about, which mostly is the world of web standards, design and development. These thoughtful essays are accompanied by a weekly web comic that details his views of the web world from the point of view of a small red squirrel.

url: http://www.cssquirrel.com/

type: none, format: none


Guide to CSS support in email clients

tags: email, CSS, HTML
We’ve put together this CSS support in email clients guide to save you the time and trouble of figuring it out for yourself. With 21 different sets of results, all the major email systems are covered, both desktop applications and webmail.

url: http://www.campaignmonitor.com/css/

type: none, format: none



tags: font, reference, CSS
How Do I Size Fonts? This is one of the most commonly asked questions about CSS. The basic answer is that you use the font-size property.

url: http://css-discuss.incutio.com/?page=FontSize

type: none, format: none


Quirks mode

Quirks mode refers to a technique used by some web browsers for the sake of maintaining backwards compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standards mode.

url: http://en.wikipedia.org/wiki/Quirks_mode

type: article, format: wiki


Jack of All Trades Web Development

tags: CSS, HTML, JavaScript
Marc Grabanski is a professional web developer out of Minneapolis, Minnesota. He is currently consulting during part of his week, leaving the rest of the week for developing his own web applications.

url: http://marcgrabanski.com/

type: person, format: unknown


Stopdesign | Making the Absolute Relative

tags: design, CSS, HTML
Stopdesign was founded in 1998 by Douglas Bowman as a small design consultancy. This site is a collection of creative work and shared thinking representing the collaborative problem solving, simple solutions, and cost-effective results Stopdesign produces and delivers for clients and readers around the world. Bowman founded Stopdesign while working in San Francisco at HotWired in the mid-1990s.

url: http://stopdesign.com/articles/absolute/

type: unknown, format: unknown

CSS Naked Day

I support web standards.

To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.

CSS Jedi Warriors

tags: genetik, CMX, CSS

Here's a good link that comes by way of genetik


tags: style, CSS
While i'm taking a closer look at color, i should also look at font style, font size, layout, etc.
parent post: Regarding Color of Links and Accessibiltiy
notify me: yes

Min-height Workaround and Compound Number

I wanted to post a three techniques i've found to be helpful in my web work.

  • Min-height Workaround
  • Compound Numbered Lists
  • IE Float Right Bug

Very few browsers implements the CSS propertiy min-height. Brian Huisman figured out a nice workaround

I was getting into the ability for CSS to auto number ordered lists. I wanted to number lists in an outline form like this:


Compound numbering can be done with CSS, however again, most browsers to not support it yet; not even Firefox.

Finally there are times in IE when text become invisible. Here's a link to another work around.

website color

tags: blue, CSS
parent post: TrickleUp is Active
notify me: yes