www.north-square.com          
+44 (0) 845 47 48 456     info@north-square.com

Skip navigation and jump to content

• Home­­
• Online Consultancy­­
• About Us­­
• Client Portfolio­­
• Resources­­
• Newsletter Sign Up­­
• Contact Us­­

The Benefits Of Using Cascading Style Sheets (CSS)

Page 2 of 2

<< Page 1: Benefits Of Using Cascading Style Sheets
<< Back to Resources Index

The following page contains 5 examples that demonstrate some benefits of Cascading Style Sheets.

Example 1: Pseudo Classes and Elements

Pseudo classes and elements are powerful tools in CSS and provide developers with controls that did not exist in older HTML standards. The code below is taken from the North Square website and controls how links appear in the body text.

.main_panel_text a:link {
text-decoration: underline; color: rgb(0,0,136)}

.main_panel_text a:active {
text-decoration: underline; color: rgb(57,83,170)}

.main_panel_text a:visited {
text-decoration: underline; color: rgb(128,0,128)}

.main_panel_text a:hover {
text-decoration: underline; color: rgb(255,255,255)}

Example 2: Printer-friendly Style Sheets

In your browser, click on Print Preview whilst on the North Square website. You will notice that the page layout is different. Many elements are not visible, such as the navigation bar, which is not required on printed website pages. For more on this, see Creating Printer-friendly Pages with Cascading Style Sheets (CSS).

Example 3: Create Dynamic Hidden Menus

CSS can even be used to create dynamic hidden menus. For the code and link to an example, see A List Apart: Drop-Down Menus, Horizontal Style (external website).

Example 4: Absolute Positioning

Absolute positioning is where objects on the page are controlled by x and y coordinates. The developer can choose the value of each; x being the value down the page from the top left corner, and y being the value across from the top left corner. The North Square website uses absolute positioning for the vast majority of the page's structure because it gave us greater control over layout.

Example 5: Bullet Styles

CSS provides developers with more control over bullets which makes them more useful. User's benefit from bullets because they generally encourage content writers to write more concise, user-friendly content. The table below shows some ways that bullets can be controlled.

Bullet Control	Description	Bullet Values
list-style-position	Places the list-item marker either inside or outside the list. Here is an example: Here is a list with the bullet marker set to outside. The bullet is hanging outside the left edge of the text. Here is a list with the bullet marker set to inside. The bullet is inline with the left edge of the text.	inside outside
list-style-image	Sets an image as the list-item marker	none url
list-style-type	Sets the type of list-item marker	none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha

by David Miller
Website Analyst,
North Square Interactive

---

North Square's Services

North Square Interactive is an online consultancy that delivers cost effective, best practice, Website Evaluation reports, Usability Testing, Website Competitor Analysis, Accessibility Audits, Browser Testing, and more. For further information about all of our services, please visit our Online Consultancy Index.

<< Page 1: Benefits Of Using Cascading Style Sheets
<< Back to Resources Index