Posts Tagged ‘web pages’

CSS properties worth remembering

Tuesday, June 4th, 2013 | Limited, Programming

A lot has changed since I wrote my first line of CSS – which is probably going on a decade ago now. Other things have been there all along, but have sometimes been overlooked or neglected. Below is a collection of CSS that it is easy to forget exists.


Obviously you can use . # * etc, but there are actually far more options. As well as chaining them (p, div) and specifying them being inside each other (p div) you can also specify they must be the parent (p > div) or immediately after one another (p+div).

As well as checking attributes (input[type=text]) you can also do contains (input[title~=something]) and starting with (input[type|=something]).

We’re probably all familiar with :visited and :hover states, but there are actually dozens you can use – :focus, :first-letter, :first-line, :first-of-type, :last-of-type, :only-child, :empty, :enabled and “checked just to name a few.

Sizing in rem

It’s good practice to use em sizing to make everything relative – that way if a user scales up the page then everything stays in proportion (though modern browsers tend to handle this well anyway). But isn’t it annoying that it stacks? A 2em value inside a 2em value will give you a font size of 4.

You can solve this by using rem. Specifying 2rem will make it 2 x the root (html) element of the document – so you can make it all relevant to that and not worry about nesting.


You can add gradients as backgrounds and even create complex patterns with multiple colours starting and stopping at different points.

background-image: linear-gradient(bottom, #22E7D2 12%, #3EFFFC 56%, #2FAB24 100%);


It’s simple to add a drop shadow to an element.

box-shadow: 10px 10px 5px #888;

You can add it to text as well.

text-shadow: 2px 2px #ff0000;

Box sizing

Tired of having to work out what width you want something to be, then taking off the padding and the border? Sometimes maybe you don’t even have the option to do that because you want it to be 100% wide. Box sizing to the rescue. Set the box sizing to border and it will calculate the width factoring these properties in.

box-sizing: border-box;

Border radius

Want some nice rounded corners? Easy.

border-radius: 5px;
border-top-left-radius: 3px;
border-bottom-right-radius: 10px;


You probably shouldn’t clip as it means you’re sending an image to the browser that is too big and then cutting it down. However, the functionality to do it does exist within CSS>


There is a background-clip property too.


Want to present your text in a series of columns? Theres a property for that.

column-count: 3;
column-gap: 5px;

Introduction to HTML

Sunday, September 16th, 2007 | Programming, Tech

HTML is the standard for creating web pages over HTTP. HTML stands for hyper text markup language. HTML is controlled by the W3C which is an assosiation assigned to setting world standards on the internet.

HTML has had different versions throughout its life. Until a few years ago (about 2000) HTML 4.01 was the standard, but since then the W3C has made XHTML 1.0 the official standard lanuage although software has been slow on the uptake. Internet Explorer 6.0 supports XHTML, and a few of the latest web editors such as Dreamweaver MX also support it.

What is HTML made of?

HTML is made up of tags such as <head> or <table> of which content is then put inside. <p> stands for paragh and every time a new <p> tag is used another paragragh is added to the page. Take a look at this code:

<p>This text would be in its own paragragh</p>

After the content is in the tag is closed with a slash inside the tag. In this case it is </p>. Most tags need closing. However some tags such as Horizontal Lines <hr /> do not. A HTML page is made up of two main sections. The head and the body. You will learn more about these later.

Printer friendly pages

Saturday, October 18th, 2003 | Programming, Tech

There is nothing like reading an article on the website and finding it one of the best you have ever read – you immediately want to show to it other people. You flick the switch on your printer to on, hit Control + P and prepare for it to emerge. But what do you get? A mess of DHTML, adverts or half the text missed off the edge of the page.

You could always hope the visitor turns their page to landscape but with the length web pages usually turn out like it is not very likely. Save them the trouble of having to print selection or copy and paste into a word processing package by making your pages printer friendly for them to print straight from.

Making them friendly in the first place
There are two main ways to allow visitors to print the pages easily. The first is to make the original web page with the article or content on, the right size to be able to print. For liquid width sites this is ok as long as they can condense down although for fixed width sites this is not as easy.

Generally you have a width of about 600 pixels, which the users printer will print. This is good if you have a navigation or sky scraper advert down the site taking the last 200 pixels of your page as the user does not need these printing. Although if your article goes all the way to the edge its time to rethink the design.

One way of getting round this would be to have a link, which chances the width of the page. The user clicks a link to say somepage.php?mode=printer. Then you could have something, which says if the mode is set to printer the page width is altered to 600 rather than 800 pixels using server side scripting. This could also be done to a certain extent using JavaScript so the page will not always have to be reloaded although in some browsers it may have to be and there is more chance of it going wrong.

The printer friendly page

This is a more common solution to the problem of visitors not being able to print. All you have to do is set up a separate page without all your adverts, logos and navigation, which is less wide or uses a liquid width so that the user can print this.

Generally you wont want to include adverts on this page, otherwise visitors may not use it at all as they can remove the ads themselves using print selection or copy and pasting the text. However you may want to include your logo and visitors won’t mind and it increases branding when the article is passed around.

If your articles are static then you may end up creating a separate page for each of these but if your articles are dynamic, most likely stored in a database you will simply be able to make a dynamic page just like your main article page for the printer friendly page and link them together.

Making it usable

Whatever solution you use you may want to include a print link to. This will encourage users to print the article simply by clicking the link, as their finger will already be on the mouse button, so users who would not normally print the article may give it a click.

Another good point about users printing the whole page rather than copy and pasting the text into a word processor is that the URL of the page will be at the bottom so other people who read it will see it and when the visitor looks at it later they will remember your website.