Tag Archives: CSS

W3C Validator Bug on “border-radius”

I have applied border-radius in my CSS code to create a curve on two corners of my background blocks:

When I validate the CSS file, I am getting the following error on each border-radius line: “Parse Error: [empty string]”

I searched for what the error may be and found that there is a reported W3C bug. Read the details at: http://www.w3.org/Bugs/Public/show_bug.cgi?id=11975

I will be keeping the border-radius code and adding comments and a link to the bug notification.


using google web based fonts

As I want my site to pop (even though this is not a design unit), I have explored the possibilities that Google Web Fonts has to offer. Zinemac’s target audience is primarily youth and therefore I have been looking for a graffiti and/or blackboard style font. Google Web Fonts has one called Cabin Sketch, by Pablo Impallari. I quite like this font and have applied it as the Headings of my site.

To apply Google Web Fonts to your site:

  1. Go to Google Web Fonts
  2. Select the font you are interested in (for example Cabin Sketch) You are able to view the font character set, some history and current stats of usage as well as download it.
  3. Select the tab Use this font and you will be directed to a page with two sets of code. The first needs to be added in the <head> section of your html file and the second piece of code is an example of how to apply the code in your CSS file. I have applied the code to my <h1> – <h6> tags.

I have also been toying with the letter-spacing property and you will see in the above image the h1 and h2 tags have a value of 0.1em, while the h3 tag has no letter-spacing.

Other uses for Google fonts

In addition to being able to use Google fonts on your site, you can also download the font and insert it into your word processor library. This is a great feature if you are needing to create documents that match the branding elements of your site…or…for a number of alternative reasons, including making your assessments stand out a little more!

Definitely check it out and let me know how you go 🙂

adobe creative suite 5.5: design and deliver across media

I have just been told that there is a free info session being run by Adobe in Sydney 31 May 2011. It aim is most likely to tell you all about the products (if you are doing Digital Graphic and Still Image you most likely have 5)…but…the agenda caught my attention and they may have some hints and tips that will not only help in this unit, but other MIMM units:

9.00 Welcome and Keynote
9.30 Flash and the Multi-Screen World; Open Web – HTML5 and CSS3
10.15am Video and Audio Production
10.45am Break
11.00am Design for Print and Digital Publishing
11.45am Digital Imaging
12.20pm Conclusion and Prize Draw
12.30pm Close

Thought it may be of interest to you…registrations are limited (to the number of seats in the room) and it is free. Information can be accessed from http://www.adobe.com/ap/special/cs55roadshow/

designing a website

While DMT is not a design unit, there is still some element of design required for building my project…and therefore I have been focusing a little this week on example designs. An interesting blog post was presented to me in Digital Graphics and the Still Image: http://creativenerds.co.uk/tutorials/80-fresh-photoshop-tutorials-for-creating-awesome-websites/

The great thing about the blog post is that it provides instructions on how to create the design using Photoshop.

I have summarised the list of 80 below into a couple of categories based on what I know people in the class are working on…

If you are creating a portfolio site:

If you are interested in developing an app or site to promote your app:

If you are interested in creating a contemporary/fresh site:

If you are developing a store:

Designs I am interested in to work/play with:

accessibility and usability considerations with CSS

Knowing some examples of how CSS can aid in clickability and readability is highly important as it also takes into consideration accessibility and usability. Hudson et. al. (2005) state that CSS can be used to “…manipulate the presentation of content, without affecting the structure of the content” (p.5).

The article by Hudson et.al (2005) provide the following ideas for clickability and readability with CSS:

  1. Increasing the line height between text can aid in readability
  2. Increasing the margin by “1.5 or 2 full lines of space” will assist readability
  3. Adding hover affects, for example when hovering over a link have the colour change, assist the user to find the links (if it is not already obvious)
  4. Increase the active area on links to increase the target area
  5. Reverse colours, for example “…light coloured text on a dark background”

The above are only couple of examples and they are the ones that I would like to test out on my site for the purpose of usability and readability of the site. For more ideas, examples and the CSS information on how to implement, refer to Hudson et. al. (2005) CSS to aid clickability and readability

Source: Hudson R., Weakley R., and Firminger P. 30 January 2005, ‘Developing sites for users with cognitive disabilities and learning difficulties’ viewed 29 March 2011 at <http://drr.lib.uts.edu.au/link/1604>

apply body id for CSS

The most interesting aspects of this weeks class (for me) were the instructions on how to apply different Cascading Style Sheets (CSS) to different pages, how precedence works with CSS and media type CSS files.

My interest is in relation to my workplace where divisions would like identifiers to make their section of the site a little different from others, yet the brand requirement is to have some design elements across all pages. It was great to see in practice how precedence works when you have multiple CSS files for a site with a similar requirement of the organisation (where Faculties would like their own design elements, but there is an over-arching brand requirement).

Below is what I found interesting and the how to…

…apply CSS elements to specific pages:

In Alaistair Weakley’s video tutorial, he explained the way to apply different CSS to different pages, is to apply a body id and then add the creative element details:

Apply Body ID to the page/s:

<body id=”home_page”>

Edit the CSS file:

#home_page h1 {

This means that all text with a Heading 1 (h1) tag, on pages that have the body id of “home_page” will be red.

…add media type link for CSS files into the HTML

A CSS file may be created for the specific purpose of a particular media type, for example printing. To link the specific media type file into HTML, add the following text (replacing the href= link with your file location):

<link rel=”stylesheet” type=”text/css” media=”print” href=”http://www.locationofcssfile.print.css” />

I am looking forward to applying these ideas to my final project.