RSS Element,demiblog Class,Language,Link,Title,Description
channel,,en_GB,http://tobyinkster.co.uk/tag/css/,"Articles Tagged with ""Css""",
item,B,en_GB,http://tobyinkster.co.uk/blog/2008/03/22/css-quiz/,22/03/2008: CSS Quiz,"66
"
item,B,en_GB,http://tobyinkster.co.uk/blog/2008/01/22/css-compile/,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 style attributes all over the place.
However, it is slow work using style attributes as you can’t take advantage of CSS selectors. Instead…
"
item,B,en_GB,http://tobyinkster.co.uk/blog/2007/08/12/php-debugging-with-style/,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…
"
item,A,en_GB,http://tobyinkster.co.uk/article/more-complex-spiral/,More Complex Spiral,"====
HTML
Really easy…
<ul id="spiral"> <li id="sp1"><a href="#">Home<span></span></a></li> <li id="sp2"><a href="#">Articles<span></span></a></li> <li id="sp3"><a href="#">News<span></span></a></li> <li id="sp4"><a href="#">Links<span></span></a></li> <li id="sp5"><a href="#">Contact Us<span></span></a></li> </ul>
CSS
Really hard…
<code…"
item,A,en_GB,http://tobyinkster.co.uk/article/html-tutorial-3/,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:
<link rel="stylesheet" href="style.css">
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 {…"
item,B,en_GB,http://tobyinkster.co.uk/blog/2003/10/19/web-design/,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…
"