Blogging Tips

CSS Basics: Font Styling

Let’s face it, the default settings on browsers are hardly great for the look of your site. So next step, with your HTML page, is to add in some font styling.

The Font Properties

Font properties work on any selector that contains text. Most font properties are easy to spot as they start with the word ‘font’, however our first selector is simply ‘color’ (and our last selector is line-height). This is one point …

Written by Sarah from Stuff By Sarah
Posted on December 4th, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

CSS Basics: The Background Properties

Last week I briefly touched on a few selector properties when styling hyperlinks. I’m going to start to go into more properties. These properties can be used on any selector (although not every property will necessarily have an effect on some selectors).

CSS Selectors

Just to recap, a selector is the tag, id or class you’re targeting eg.

[sourcecode language="css"]h1 { … }
#idname { … }
.classname { … }[/sourcecode]

and multiple selectors can be used, …

Written by Sarah from Stuff By Sarah
Posted on November 27th, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

CSS Basics: Styling Links

Last week I explained about linking pages using the anchor tag. This week is about styling those links. For the basics of styling read my previous post Understanding CSS.

Target the anchor tag

In our CSS we can simply target the anchor tag using the a as the selector. So if we wanted our links to always be green and bold we could use

[sourcecode language="css"]a {
color: green;
…

Written by Sarah from Stuff By Sarah
Posted on November 20th, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

Understanding CSS

CSS stands for Cascading Style Sheets. Its job is to control the presentation of a web page document, written in (x)HTML. The idea is that your web document, written in (x)HTML, contains the content and structure of your page, and then you apply the CSS to give the page colour and layout, keeping content separate from design. To understand more on this way of working I recommend reading SitePoint’s – What …

Written by Sarah from Stuff By Sarah
Posted on October 23rd, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

Link Block Hover Effect

It’s a fairly common trick used nowadays, a block of text with a title and some other information that acts as a link while the only thing that looks like a link in the block is the title. It doesn’t require any fancy tricks even, but it’s probably not the most semantic bit of code.

Check out the demo here.

The key is simply wrapping the entire block in the link, and …

Written by John Leschinski from Leschinski Design
Posted on July 19th, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

Use CSS to Style Link Types.

Ever wanted to style your links to represent the type of content it links too without having to add a class to each link? Well I’m here again to save the day with a no brainier solution. This is quick and simple so I’ll get right too it.

Say you want to have all links to PDF’s have a PDF icon next to it, letting users know they are about to have their …

Written by John Leschinski from Leschinski Design
Posted on July 5th, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

Fancy Forms

Forms can be a bit of a pain to style, in the old days tables were the method of choice to align everything just right, but this is the future; CSS OR DIE! P.Diddy will come to your home and kill you if you use tables for presentational markup. So in order to prevent a Diddy disaster here is some helpful information, I accept thanks for saving …

Written by John Leschinski from Leschinski Design
Posted on June 28th, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates