Saffron Stroke - Your Web Design Resource » css

Get rid of the dotted border from a focused hyperlink

Minal — Wed, 28 Apr 2010 08:04:23 +0000

You must have observed this behavior that when you click on a hyperlink it is surrounded with a dotted border as shown in the image below:

I observed this behavior in Internet Explorer 8 and Firefox 3.0 and above. I also tested the behavior in Safari 4.0.4 and Google Chrome 4, but they did not display such border. Even though, this is temporary and the border disappears as soon as the link loses its focus, I do not like it. So I came up with this solution.

Add the following CSS to your page:

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title> Get rid of the dotted bordertitle>
<style type=”text/css”>
a:focus {
outline: none;
}
style>
head>
<body>
<a href=”#” id=”anchor1″ target=”_blank”> Read More..a>

body>
html>

You can add the same code in your Expression Web page.

However, this could be a problem for users with disablity or those using keyboard instead of mouse. In that case, a woraround could be, when you remove the dotted border, you could change the color of the font similar to the hover/active hyperlink or change the font-weight to bold. This could help the user get a visual cue for navigation. See below:

a:focus{
outline:none;
color:#FF0000;
}

a:focus{
outline:none;
font-weight: bold;
}

Useful Resources for Microsoft Expression Web

Minal — Tue, 27 Oct 2009 10:47:20 +0000

Here are some websites and blogs that offer very informative tutorials, articles, tips, tricks, trainings, ebooks and other resources for Microsoft Expression Web.

http://expression.microsoft.com/en-us/cc197140.aspx for tutorials, videos, free Expression Web templates.
http://any-expression.com - is owned by Tina Clarke, who is a fellow Expression Web MVP. The site features plenty of tutorials, tips, ebooks on Expression Web and FrontPage.
Her blog http://www.expression-web.net/ also offers useful Expression Web resources.
http://by-expression.com features excellent Tutorials and Sample Sites by Expression Web MVP, Cheryl D. Wise. She also conducts trainings for EW.
http://www.expression-web-designer-help.com/ is a great site to seek help in MS Expression Web, run by Jim Davidson, MVP Expression Web.
http://www.expression-web-tutorials.com/ and http://www.expression-web-tips.com/
Owned by Expression Web MVP, Patricia Ann Geary, these sites include EW tutorials, templates, tips and news on EW as well as FrontPage tutorials.

To add a line height to a paragraph using CSS in Microsoft Expression Web 3

Minal — Wed, 23 Sep 2009 16:27:10 +0000

There are two ways to do this with CSS;

By assigning a line height to all the paragraphs:

In the Apply Styles or Manage Styles panel (task pane in earlier versions of Expression Web) click on ‘New Style’. In the selector box, type in ‘p’ and in the Block category, enter a value for line-height, say 20px.

Now all the paragraphs will have a same line height of 20px.

If you do not want a same line-height for all the paragraphs, define a class selector and assign a line-height value. The class selector could be generic (.line_ht) or specific to paragraph element (p.line_ht). (Both these concepts are explained later in the article.) To define these styles follow the same steps given above in pt. 1. Then apply the styles to the paragraphs.

Difference between Generic Class Selectors and Specific Class Selectors

A generic class selector could be assigned to any element like

. Unlike this kind of class selector, the specific class selector will be applied only to those paragraph elements that have a class attribute containing the word ‘line_ht’, and no other elements.

Take a look at these examples to make things more clear;

/*Element Selector */

p { line-height : 20px;}

This paragraph will have a line-height of 20px

This paragraph will have the default line-height

/* Generic Class Selector */

.line_ht { line-height : 20px;}

This paragraph will have a line-height of 20px

This paragraph will also have a line-height of 20px

This paragraph too will have a line-height of 20px

/*Specific Class Selector */

p.line_ht { line-height : 20px;}

This paragraph will have a line-height of 20px

This paragraph will have the default line-height

Creating Style Sheets in Microsoft Expression Web

Minal — Sat, 29 Aug 2009 11:04:18 +0000

Microsoft Expression Web has some pre-defined set of style sheets which you can directly use in your document. There are in all 13 style sheets that are written for different purposes like Bars, Blocks, Capsules, Expedition, Highway, Poetic, Sweets and such others. Each of these style sheets has a unique style, with headings, background, font styles, etc.

How to add a style sheet to your page?

Go to File menu > New > Page.

The ‘New Page’ window would then be prompted.

In the leftmost column of the window, choose Style Sheets. The center column would then list down all the available predefined style sheets. As you select a style sheet from the list, the top portion in the right most column, gives a brief description of that style.

You can choose one that may suit your page requirements and click OK.
A style sheet will now be opened in your main workspace with a name ‘Untitiled_1.css’.
Now you need to save this css file in the same location of your document. Give an appropriate name to it.
Link this file in your page by following these instructions:
- In Apply Styles or Manage Styles panel (task panes in versions earlier than 3) click on ‘Attach Style Sheet…’.
- In the Attach Style Sheet window browse to the location of css file. You can choose attach it as a link or import it into your current page, selected page or all HTML pages. In this case choose ‘Current Page’ and as ‘Link’.
- Click OK. The css file will now be attached to your page.
Now see your page being styled as per the styles defined in the attached style sheet.

Class Selectors

Minal — Fri, 21 Aug 2009 16:24:22 +0000

We learnt what ‘Element Selectors’ are and how to group declarations and selectors, in our tutorial Element Selectors in CSS. But as you advance in HTML and CSS, you will need more specialized rules to style an element. Apart from document elements (element selectors) there are two other types of selectors you can define on your own. They are Class selectors and ID selectors.

What are class selectors?

A class selector is set of styles that you can apply to one or more elements. See these examples:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

A class ‘desc_text’ when applied to the paragraph element stylizes the entire paragraph whereas when applied to the span element stylizes only the spanned text.

Though we will learn more about the ID selector later, the main difference between the two is that class selectors can be used for multiple selectors and ID selector can style a single element in the entire document.

Defining class selector in CSS

In CSS the class selector is preceded by a period ‘.’ followed by the class name and style definition. See below:

.desc_text {font-size: 10px; color: #cccccc; }

This kind of class selector could be applied to any element that matches the class attribute value ‘desc_text’.

You can also use the universal selector ‘*’ to define the class that matches any element in the document.

*.desc_text {font-size: 10px; color: #cccccc;}

But this one;

p.desc_text {font-size: 10px; color: #cccccc; }

will match any paragraph elements that have the class attribute containing the word ‘desc_text’. In the above example the span element would not match this class and hence the styles would not be applied. So this kind of rule applies only to a specific type of element.

Combination of general class selector and element-specific class selector

.desc_text { font-size: 10px; }

span.desc_text { color: #cccccc ;}

First declaration is an example of general class selector and the second one is of element specific class selector. You can declare both and use them together. The output of the above example would be as shown below:

Universal Selector in CSS2

Minal — Fri, 14 Aug 2009 13:39:18 +0000

CSS2 had introduced a new selector, the universal selector to match any element in your page. The selector is indicated as an asterisk ‘*’. The universal selector could be used to list every element in your page.
For example,

* {font-size: 12px}

This declaration would set the font size of all the elements used in your document to 12px.

NOTE: Even though the universal selector is one handy option, consider the specificity of other selectors for it to work properly.

Apply Jump Menu Go Behavior in Microsoft Expression Web 2

Minal — Mon, 03 Aug 2009 05:00:24 +0000

Jump Menu Go behavior lets you associate a button (Go button) with a jump menu. In that case a jump menu should already exist in the document. Though a jump menu does not need a go button to execute, selecting an item from the jump menu causes a URL to load on its own. But a go button may be required if you want to re-select the already chosen item, which may not be registered just by choosing it from the jump menu.

When you add a jump menu go behavior, your go button will perform the “jump” action to take to the associated URL. Selecting a menu item from the jump menu will no longer direct the user to the related page then.

To create a Jump Menu Go button, follow these steps:

If a jump menu is not already created create one. How do I create a jump menu?
Add a button object near the jump menu.

In the Behaviors task pane, choose Insert and from the menu select ‘Jump Menu Go’.

You would be prompted with ‘Jump Menu Go’ dialog box, as shown below:

Choose the menu for Go button to activate and click OK.

Renaming Class-based styles in Microsoft Expression Web 2

Minal — Tue, 28 Jul 2009 09:10:06 +0000

You may require to rename your existing class-based style, while you are working with your document. The important factor here is that you want all the references to that class to be updated too. Well EW lets you do that using the Apply Styles, Modify Styles or CSS Properties task pane and instantaneously update all the references. Here is how you can do that.

Open the web page where the style is defined and applied. If you are using an external style sheet, open that.
Do either of the following:
- In Apply Styles task pane, select the class-based style and click on the down arrow besides it. From the menu choose ‘Rename class “classname”…’.
- In Manage Styles task pane, right click on the class-based style and choose ‘Rename class “classname”…’ from the menu.
- In the CSS Properties task pane, under the Applied Rules section, find the class-based style and right click to choose ‘Rename class “classname”…’
The Rename Class dialog box will then appear.

The dialog box tells you where the style is defined and its current name. Enter the new name for the style in ‘New name’ box. The name should not begin with a period. Also this new name should not contain any underscores since they are now deprecated by the current CSS standards.
The checkbox ‘Rename class references in x files that uses this style sheet’ lets you update all the existing references to this class in your document. Check this box and click OK.

Element Selectors in CSS

Minal — Mon, 20 Jul 2009 06:52:50 +0000

Why is CSS preferred by all the designers? Well that is because of its ability to separate presentation from the content and most importantly its power to edit the document style by changing a single line of code. Don’t believe me? Find it yourself!

An element selector is an HTML element. There are other types of selectors too, which we will explore later. So the element selectors are the most basic selectors in your document structure. html, body, p, div, span, headings, etc are all different types of element selectors of a document. We can apply certain rules to them to stylize these selectors. For example, if we want all the paragraphs to be displayed in red color, we can do that by;

p { color: red}

Or if we want the heading 2 to appear with a gray background;

h2 { background-color: gray}

Grouping multiple declarations

We saw how to apply a single declaration to an element selector. But you can have multiple declarations in the same rule. See this example:

p { color: red; background-color: gray;}

In this rule, we have combined two declarations; (i) the font-color in all paragraphs to be red (ii) background color of all paragraphs to be gray. Semicolon is used as a separator between these declarations. If you notice, the last declaration is also followed by a semicolon. It is rather important to do so since browsers ignore the whitespaces in the style sheet. To make this clear see following example:

p { color: red; background-color: gray font-size: 10px; }

Since there is no ‘;’ after the value ‘gray’ for background-color, browsers check if the property has multiple values. But since font-size is not a valid value and background-color does not take multiple values, both the properties will be ignored. But note that the last declaration of the group need not end with a semicolon. For instance;

p { color: red; background-color: gray}

This will work absolutely fine in most of the browsers. But at a later stage, if you want to add some more declarations to the group, you must add a semicolon after this declaration, else it would ignored as shown in above example.

Grouping Element Selectors

We saw techniques to apply one or more styles to a single selector. But what if, you want to apply same style to more than one element selector. For instance, if you want heading 2 and paragraph both to be in red. It would be stupid of us if we write the same style for another element. There is a better way to do that;

h2, p { color: red}

In this example, we are using a comma to group two selectors, viz. ‘h3′ and ‘p’. Similarly you can group multiple selectors. This way you generate fewer lines of styles in your style sheet which in turn makes it easier for you to find out selectors and styles at a later stage when your style sheet has numerous rules defined in it.

Grouping multiple declarations with multiple selectors

By now we grouped multiple declarations for a single selector and we also grouped multiple selectors with a single declaration. Now it’s turn to group multiple declarations, with multiple selectors. Confusing enough isn’t it! Well this example would make it clear;

h2, p {

color: red;

background-color: gray;

font-size: 10px;

}

These were some powerful and effective techniques of CSS. We will learn more in our coming articles, but for now I hope you enjoyed reading this.

Most used values of the 'display' property in CSS

Minal — Tue, 07 Jul 2009 07:21:56 +0000

The display property defines how HTML elements should be displayed.

display: block

The element will generate a block around it with line break before and after the element.

display: inline

The element will generate an inline box around it, which will be in line with rest of the content.

display: inline-block

The element will generate a block box positioned as an inline box.

display : none

The element will not generate any box; the element will not be displayed at all.

display: inline-table

The element will generate a table like box positioned as an inline box.

display: list-item

The element is displayed as a list item. The list is an unordered list and hence preceded by a bullet mark.IE5 on Mac displays the list as ordered.

display: run-in

The element will generate a block box if it is followed by any box other than block box. It will generate an inline box if followed by a fixed and absolutely positioned block box.

display: inherit

The element inherits its value from its parent element.