Articles Tagged with "Css"

22/03/2008: CSS Quiz

22/01/2008: CSS to HTML Compiler

I’ve searched around the ‘Net for something like this before, but without success, so decided to write my own. The basic idea is this: there are certain circumstances in which you need to write some styled HTML without access to the document’s header. For example, when composing HTML-formatted e-mails, which may be displayed in a web-based e-mail client; when adding content to limited content-management system; or in an eBay auction description. In such a situation, you can’t (validly) include a <link rel="stylesheet"> element, nor a block (if you do include such a construct it may just about work, but the document will not be valid), so instead you are reduced to using HTML style attributes all over the place.

However, it is slow work using style attributes as you can’t take advantage of CSS selectors. Instead…

12/08/2007: PHP Debugging with Style -OR- How I Learned to Stop Worrying and Love the Bug

PHP lets you define your own error handler, so I decided to get a bit fancy. MegaErrorHandler (MEH) outputs its errors as specially-formatted HTML comments, with the details of the error encoded using JSON.

A small client-side script, with an associated stylesheet then pulls this data out of the comments and formats it as a nice little interactive bug-viewing console, allowing you to view a stack trace for each bug, inspect superglobals, view the syntax-highlighted source code for the file where the error occurred, check the list of defined constants and other useful things…

More Complex Spiral

====

HTML

Really easy…

&lt;ul id="spiral"&gt;
  &lt;li id="sp1"&gt;&lt;a href="#"&gt;Home&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="sp2"&gt;&lt;a href="#"&gt;Articles&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="sp3"&gt;&lt;a href="#"&gt;News&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="sp4"&gt;&lt;a href="#"&gt;Links&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="sp5"&gt;&lt;a href="#"&gt;Contact Us&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

CSS

Really hard…

<code…

Chapter 3: Adding Some Style

====

So now you know how to make a basic web page. When writing the page, we focused on structure — how the page was divided up into its various parts (headings, paragraphs, etc) — but not on style.

In this chapter we’ll focus on how to apply style to your page, but without even changing the HTML!

Applying A Basic Style

Right now, our page looks something like this:

You’ll remember that one of the lines in the HTML file said this:

&lt;link rel="stylesheet" href="style.css"&gt;

So we shall now create a file called style.css and add some formatting instructions to it.

body {
       font-family: Arial, Helvetica, “Sans Serif”;

       background-color: white;

       color: black;

       font-size: 12px; }

h1   {…



19/10/2003: On Web Design
local wrote:

Now I wonder how important cross-browser coding actually is. How many browsers do I have to test, which versions?

I have two philosophies on this question.

The first is the philosophy I apply when making my own website — I stick to the standards and let any browser that can’t handle it be damned. If 99% of browsers don’t work on it, that’s fine by me. (OK, so I have added a few little workarounds for IE6, but nothing major)

The second philosophy is similar and is what I use for other people’s websites. Again, write to standards, but make sure it works more or less perfectly in:



IE 5+ (Windows)
Netscape 6+
Opera 7+
Konqueror




and make sure the content is readable and the site is navigatable in:



Netscape 4.x
IE 4 (Win)
IE 5 (Mac)
Opera 5+
Lynx




Now, the best way to do this, is to follow my smiple (sic) 7 point design

procedure:

1. Content

Start with the content. It may be cliche to say so nowadays, but content really is king.

2. Markup

Mark up the content…