View Comments Linking CSS stylesheets to a page
(This tutorial assumes basic knowledge of HTML and how to write CSS. If you’re not sure I’d suggest hitting tizag.com and looking at some of the tutorials there first).
There are three ways to insert CSS into a web page: An External .css file, an internal stylesheet, and inline styles.
The best way is to create your page, create a stylesheet, and link the two: eg make index.html and style.css, and inside index.html’s <head> section, include a tag like this: eg
<html>
<head>
<title>MyPageTitle</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
{{{Put all the page content in the body}}}
</body>
</html>
This approach is designed to completely separate design from content, so you can change the css stylesheet on the fly without having to go into the html page and change everything. A good example of this is http://www.csszengarden.com – using the links on the left you can change the stylesheet – but the html page remains exactly the same
Option number 2 for stylesheets is to include the styles inside the html page head – not a link to the sheet, but the styles themselves. EG:
<html>
<head>
<title>MyPageTitle</title>
<style>
body
{
background: white;
color:black
font-family:arial, helvetica, sans serif;
}
</style>
</head>
<body>
{{{Put all the page content in the body}}}
</body>
</html>
This has most of the advantages structurally of separating the html content from the styles of the page – and keeps them all in a single unit rather than needing two files.
Option number three: inline styles. This is done by adding style=”(css code here)” to any html element. Example:
<html>
<head>
<title>MyPageTitle</title>
</head>
<body>
<h1 style=”color:red;font-weight:bold;”>Page header</h1>
<p style=”background-color:#000;color:#fff;”>Lorem ipsum blah blah blah, some paragraph text here</p>
<p>Lorem ipsum blah blah blah, another paragraph</p>
</body>
</html>
The separation of content from design here is non-existent – to change the way the page looks you must get down into the nitty gritty of the html page itself to edit its presentation. It does have SOME advantages, though: 1, it’s quick and easy to implement. 2, it’s prettymuch the strongest way to style something. It will override any styles specified if there is an external stylesheet, or a stylesheet in the header – but only for the element in which it is specified – eg the first paragraph <p> has a black #000 background, but the second doesn’t.
Recent projects
Code wise, recently I’ve updated the text clock to use jQuery, so it works in IE. Perhaps I should glam it up with some fade in effects?
The second is a quick fee calculator for sellers on Folksy, a lovely hand-made goodies site.
Check out the calculator or the code repo at BitBucket
Affordable programming books
Recently, @parsingphase gave me a handy tip if you’re looking for programming books that don’t break the bank – follow @OReillyMedia on twitter and keep an eye open for their e-book specials. Recently I’ve managed to pick up Building Android Apps with HTML, CSS, and JavaScript and jQuery Cookbook for $9.99 each – that’s a combined saving of $32 over the full price ebooks or $45 over the equivalent print versions. Woot!
O’Reilly’s Bookworm appears to be a very handy way to manage them in ePub format online, but they’re also available in multiple other DRM free formats, including PDF.
Getting “out there”
The biggest struggle I’ve come across since I started programming and wanted to do it as a career is getting enough proof of what I can do. Over the last few years I’ve done uni projects, countless personal sites or site designs that never made it past the Photoshop/GIMP stage, dabbled in actually doing real sites for people, and in a few cases even managed to get real sites live. (The most recent is Ella’s Alley – check it out)
My favourite things to develop for, in no particular order:
- WordPress themes. WordPress has a wonderful API and great documentation that makes it really good to work with. My current milestones are to get a) TPF Hibiscus polished enough to submit to the wordpress theme directory, followed by creating a proper theme “skeleton” that I can use for later designs and primarily just customise its CSS and images.
- Javascript – I used to really hate javascript, mostly due to the poor browser support and cross-browser issues. At the time it was mostly used for flashy nonsense. The web’s matured somewhere, however, and the needs of the user demand interactivity that can’t be provided with static HTML. The text clock I did recently was loads of fun to do – but I keep on reminding myself that I need to move with the times. It seems all the cool kids are using MooTools, jQuery, or some other javascript pluginy whatsit, so that’s on the list to learn. Will it get me more jobs?
- Mercurial – this isn’t a programming language at all, but is pretty darn nifty for keeping track of your code. The guide section makes hitting the ground running easy – and it integrates wonderfully with Google Code and BitBucket.
- Good ol’ php. It’s been a whole since I used it, and since I last used it I’ve learned a lot about Object Oriented Programming. I need to merge the two together. It’s the basis for my Ginger image gallery project.
I’m hoping, by keeping active in talking about what I like to do, and what tools I use, that I’ll get a clearer portfolio and web presence. Here’s to giving it a go!
Portfolio updated
I keep on thinking about this place with loads of good intentions – “I’ll update it when X is finished” or “I think that such and such a project should go on here, but I’m going to finish it first.” Somewhere along the line came the realisation that the good intentions weren’t getting very far.
SO:
- I’ve updated the portfolio links, with new projects and their Google code links. Check it out – the clock is actually cool. Also, Mercurial is a rocking version control system.
- I’d LIKE to revamp this site. Logic says it’s not all that bad, right? focus on the code
- I think I’ll see if I can blog regularly about the things I’m doing, code wise. Active content makes a site interesting, right?
We are accepting new jobs!
ThePageFoundry is currently accepting new commissions. If you’re interested in a quote for a job – big or small, please feel free to contact us for a no obligation quote.
TPF-Hibiscus, our first WordPress theme has been released!
This is our first public theme release, although we’re looking forward to designing and releasing more. Please feel free to download it and spread the word to your friends. Download the zip: tpf_hibiscus
9 free ways to integrate Twitter into your online life
Organisation:
TwitterCal is a tool to integrate your Google Calendar into Twitter. Once you’ve added the ‘gcal’ bot as a friend and authorised for it to access your Google account, all you need to do is DM the ‘gcal’ to add an event.
RTM / twitter integration
Remember The Milk – if you don’t already use Remember The Milk, it’s well worth a look. As well as being a great todo / reminder service that’s easy to integrate into you calendar / smartphone / iGoogle etc., the RTM twitter bot can send you tweet reminders before the due date of tasks (and wrench you away from whatever #trendingtopic you were otherwise enthralled in). You can also add new tasks by DMing the bot, retrieve today’s todo list, and even send tasks to other Twitter & RTM users!
EverNote – a handy tool to remember anything, accessible from prettymuch anywhere – here’s another way to access it. Follow @myEn and send it DMs to add notes. Evernote allows you to clip text, webpages, emails, tweets, and even allows full-text searching on images.
Music
Whilst sharing every single song you listen to on Twitter can be annoying, something like Last.fm Love Tweet – allows you to share more sparingly and automatically tweet when you ‘love’ a song on Last.fm. Use Lasttweet.com show your last tweet in your last.fm sidebar.
Grooveshark – Free songs, anywhere, anywhen. Grooveshark has an option to tweet the song you’re listening to straight from the player.
Blogging
Whilst all in all the subject of Twitter + blog probably deserves its own article, here are a few quick ways to meld your blog and Twitter.
There are oodles of tools to integrate Twitter into your WordPress blog. Show a feed of your tweets in the sidebar, automatically tweet new blog post URLs, or even integrate ping.fm.
Twitter widgets have options to add a twitter badge to your Blogger, TypePad, MySpace, or Facebook, like this:
For other blog / journal services, try Twitterfeed – mix your rss feed with your twitter account, and presto! Auto-twitter notifications every time you post to Twitter. It even has some customisation available, such as update frequency, link shortening services, etc.
Do you have a favourite twitter-integration tool you’d like to share? Pipe up in the comments.
Fractal 4D
Fractal 4D example
We’ll start out our first blog post with a beautiful little design app that can keep you entertained for hours, and allows you to create beautiful effects in seconds. Remember windows 95/98 and being entranced by the Mystify screensaver? Well, Fractal 4D is a tool to create your own fractal designs like that old screensaver favourite, but a hundred times better.
Once you’ve gotten it installed your first instinct will be to trail your pointer around endlessly, vary the speed and shapes that you make and watching as the colours and lines grow behind it, whether it’s for fun or for serious design purposes. Check out the designer’s videos here.