Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
20th April 2009

Top 50 CSS techniques Pt I

Part 1 of our Top 50 CSS techniques brings you 10 essentials tips and resources for creating perfect CSS

Part 1 of our Top 50 CSS techniques brings you 10 essentials tips and resources for creating perfect CSS. Discover how to create unordered lists, style text, control headers and more…

Unordered lists
Web designers have a couple of options when it comes to creating lists. There is the unordered list option or the ordered list option. Unordered lists create a list with bullet points and ordered lists use numbers, ie 1, 2, 3. To create a list, first add a set of opening and closing tags, ie <ul></ul>. Inside the tags, a set of list items tags, <li></li>, need to be added for each item in the list. To style the list, go to Text>CSS Styles>New, choose Tag from Selector Type and ul from the Tag drop-down list. Set the Margins to and click Apply and OK. Now head to the code and add list-style-type:none; to remove any bullets or numbers

ul {
margin: 0px;
list-style-type:none;
}

Background images
Top 50 CSS techniques Pt I
Background images are an essential element in any web design process, and adding to the
body tag is a breeze. In Dreamweaver, create a new style (as in Tip 1), select the Background category and add an image. How it displays is determined by the repeat option. No-repeat gives a single instance, repeat-y repeats horizontally/vertically and repeat-x repeats  horizontally/vertically. If a single instance of an image is used, this can be positioned anywhere within the tag, either body or a div tag. Use the default Horizontal and Vertical position options for quick positioning, or use specific measurements for more precise positioning.

Text styling
Top 50 CSS techniques Pt I
Text styling is one of the most common uses for CSS, and is guaranteed to be found in
almost every style sheet on the web. Create a new class, give it a name, choose a font, choose a style, choose a colour and it’s good to go. Repeat this process for all the text in a page. Make sure to plan ahead and try to decide exactly what font styling is needed throughout a site. Be sure to choose a font found as default in the different operating systems, ie Georgia, Verdana, Arial, to avoid fonts being substituted.

Cross-browser tooltips
Top 50 CSS techniques Pt I
Alt tags are used to replace images with a text description should the image be unavailable. Internet Explorer also uses the text in an Alt tag as an image tooltip. however, other browsers, ie Firefox, adhere more closely to standards and use the Alt tag for its intended purpose only. To ensure cross-browser tooltip compatibility, the title tag needs to be put into place alongside any Alt tags. Simply add immediately after the Alt tag, eg, title=”This is the text to be displayed”

Personalise hyperlinks
Top 50 CSS techniques Pt I
In Dreamweaver, go to Modify>PageProperties>Links to add the desired font, size and determine colours for the different states. Finally, select an underline style, ie Show underline only on rollover. This will apply to all links across a whole site. To style links to a specific element, ie div tag, a pseudo class needs to be created. For example, if the
div tag is named #news, then add #news a:link {color: #FFFFFF; text-decoration: none;}.This determines the colour and style of links in the #news tag. Add #news
a:visited, #news a:hover, #news a:active to determine different states.

Hot headers
To control the output of header tags, CSS can be used to determine the style for each tag.
The h1 tag should have the largest font size, with sizes decreasing for each header, ie h2, h3, h4. The simplest option is to determine the font size as follows: h1 { font-size: 25px; }, h2 { font-size: 22px; }etc. For further styling, add font: Georgia; font-weight: bold; for a bold header using the Georgia font. If all headers use the same font, group together as follows:
h1, h2, h3, h4 {font: Georgia;}
h1 {font-size: 25px; font-weight: bold;}
h2 { font-size: 22px;}
h3 { font-size: 20px;}
h4 { font-size: 18px;}

Straight to CSS
By default, Dreamweaver adds the ‘Layout CSS’ of a new document to the head of the
page. This means that the CSS is only relevant to the current page and will need to be placed inside a CSS file at a later on. To eliminate these steps, select Create New File from the Layout CSS drop-down list. Any new styles will be automatically added to the new style sheet. Alternatively, select Link to Existing File, click the Attach Style Sheet icon and add an existing style sheet.

CSS Play
www.cssplay.co.uk

Top 50 CSS techniques Pt I
Describing itself as “Experiments with cascading style sheets”, CSS Play should probably be best loved for the Demos section. Here, you’ll find a cavalcade of links to little design ideas that can be easily exposed by viewing the page source and studying the code. If you’ve ever wanted to achieve simple animations, photo galleries, puzzle games and various other CSS-powered ideas, then this is the place to find out how they are achieved.

Managing borders
Adding a border to a div tag will increase the width/height of the associated tag. If a one pixel border is used, this increases the height and width of a tag by two pixels in either direction. This can affect the page layout, so the size of the tag needs to be adjusted accordingly to ensure that the tag remains at its original size. Eg, if the original tag is 100 pixels wide by 50 pixels high, adding a two-pixel border will make the tag 104 x 54. Resize the tag to 96 x 46 to keep the original size.

Shorthand CSS
Standard CSS brings with it some plenty of plus points, including quick, site-wide
updates and lightweight code. However, using shorthand CSS tweaks and tunes standard CSS even further. Using CSS shorthand, the following code – #header {background-color: #FFFFFF; backgroundimage: url(background.gif);background-repeat: norepeat;}
– can be shortened to the: #header {background: #FFF url(background.gif) no-repeat;}

Tags: ,
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.