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.

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.

A document is structured by it elements. The HTML elements that we commonly know are p, div, table, headings, span and many more. In CSS (2.1) each element has its own box that contains the element’s content. Hence these elements are broadly classified as:

• Replaced and Non-replaced elements
• Block-level and Inline elements

This classification is made on the basis of their nature of presentation.

1.       Replaced elements:

Replaced elements are those where the content of the element is replaced with some content external to that document. For example, the ‘img’ element has no content of its own. It takes the path to the file that needs to be displayed in the box created by the element.

2.       Non-replaced elements:

All other elements are non-replaced elements. For instance, the ‘p’ (paragraph) element;

<p>Some text </p>

Other non-replaced elements are div, span, headings, lists, tables, etc.

3.       Block-level elements:

As the name suggests create a box for their content. It creates a space of its own and adds breaks before and after its box. Examples of Block level elements are ‘p’ and ‘div’.

Lists are also block-level elements. But unlike other block elements, lists have their own set of presentation properties in addition to those inherited from block-level elements. These properties include indentation and bullets (for unordered lists) and numbers (for ordered lists).

4.       Inline-level elements:

Inline elements spawn an element box within the line of text and do not break the flow of the line. In other words they do not break from rest of the display. The most used inline element is ‘span’. Other examples are ‘a’, ‘strong’.

Microsoft Expression Web 2 Step by Step (Step By Step (Microsoft)) by Chris Leeds

The book has easy steps, hands-on exercises and practice files. It is a step by step guide to beginners and intermediate users. Learn at your own pace and create professional web sites with advanced design techniques and tools to incorporate XML, XHTML, ASP.NET, Silverlight, Media and much more into your website.

Special Edition Using Microsoft Expression Web 2  by Jim Cheshire

As the cover states “The ONLY EW2 book you need” it is indeed one of the best books you could have. The book is comprehensive of basic features and powerful tools including CSS tools of Expression Web 2 and advanced features like ASP.NET and PHP development.

CSS property float is used to position (float) a block level element within another element. You can float block level elements like divisions <div>, paragraphs <p>, images <img /> and lists <ul> to left or right of the page. Float is widely used to align image and wrap text around it in a same container. Let us see how.

Float an image to the left in a paragraph and wrap text around it

Set a style for the image by creating a New Style in Apply/Manage Styles task pane. In the New Style dialog box given below; choose Layout and set float: left.

Then in Box category, set margins as top: 5px, right: 10px, bottom: 5px and left: 0px. Also set a border for the image in Border category. Click on OK to generate below mentioned style;

<style type=”text/css”>

img{

                float: left;

                margin:5px 10px 5px 0px;

                border: thin black dotted;

}

</style>

In the main body of the page, add a paragraph, enter the text and embed the image into it. Go to the Design view and type in the text. To insert the image, go to Insert menu > Picture > From File… Then browse to the path of the image and click on Insert. In the Code view the code looks as follows:

<body>

       <p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

<img src=”arrow_right_green.png” style=”float:left”/>

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  

</p>

</body>

</html>

Save the file and preview it in the browser. The output will be as follows:

‘em’ and ‘ex’ units are both relative units; viz. they are measured in relation to other values.

In CSS, one ‘em’ is defined to be the value of font-size of a given element. For example, if the font-size of a paragraph element is 12 pixels then 1em = 12 px.

But as I already mentioned ‘em’ value depends on the element with which it is used. Consider following example.

p {font-size: 12px; padding-left: 1em;}

h1 {font-size: 22px; padding-left: 1em;}

The output would be: 

This is because; the value of ‘em’ is relative to its parent. So the left padding for the paragraph was 12px whereas left padding for Heading 1 was 22px.

‘ex’ on the other hand refers to the height of the lowercase letter ‘x’ in the font that is assigned for a given element. Different fonts have different heights for ‘x’ even if their font-size is same. Hence the value of ‘ex’ differs from font to font. Take a look at these fonts:

The Expression Web 2 status bar displays information about your current editing modes like visual aids mode, Style Application mode, Rendering mode and Page size mode along with some information about the file your are working with such as file size, HTML and CSS Schema.

To view status bar, go to Tools > Application Options > General tab and check the box: Show status bar

The status bar looks as shown in image below:

The information shown on the status bar is explained below:

·         HTML Incompatibility Detected icon – Depicts that there is an incompatibility in the HTML code, double click on the icon to go to the HTML schema incompatibility in your code.

·         Code Error Detected icon – Illustrates an error in the code and when you double click on the icon it takes you to the error in the code.

·         Visual Aids: On – Lets you change the Visual Aids mode. Double click to switch.

·         Style Application: Auto – Displays the current Style Application mode and lets you change the same. Double click to open the Style Application toolbar.

·         329 bytes – Displays the current size of the file.

·         Standard – Is the Rendering mode in which Microsoft Expression Web displays the files. The rendering mode is determined by the DocType you have declared in the page. Double to open the Page Editor Options dialog box.

·         707 x 206 – Displays the current size of the page. Click to choose a page size from the available list of sizes.

·         XHTML 1.0 T – Is the HTML Schema Expression Web has applied to current page. Double click to open Page Editor Options and change the schema.

·         CSS 2.1 – Displays the CSS Schema Expression Web has applied to current page. Double click to open Page Editor Options and change the schema.

Incremental search is a user interface interaction method to progressively search for and filter through text. In Expression Web, Incremental Search, searches the text as you type, and as soon as a match is found it immediately presents it to you. Incremental Search gives you an advantage, to stop short of typing the entire word or phrase you are looking for.

How to search incrementally?

1.       Open the page or CSS file you want to search and place the cursor where you want to begin your search.

2.       Go to Edit > Incremental Search. Your cursor would now change to .

3.       Now just type in the characters you want to search. The status bar would display the characters as you type them, and the first occurrence of the letters you have typed, would be highlighted in the page.

4.       To locate and move to the next occurrence of the characters press F3 and to go to the previous instance press SHIFT + F3.

To stop the incremental search either press Esc, or Enter or just click somewhere in your page.

The Quick Tag Editor enables you to quickly add, modify or wrap a set of tags around other tag or set of tags while working in Design view or Code view of a web page. You also have access to IntelliSense in Quick Tag Editor.

To access Quick Tag Editor:

1.    Switch to Design or Code view in your workspace and place the cursor at the position where you want to add or modify or wrap an HTML tag.

2.    Do any one of the following:

·         Go to Edit > Quick Tag Editor or

·         key in the shortcut keys CTRL + Q or

·         On the Quick Tag Selector bar located at the top of the document, select the tag you want to modify, click on the small arrow next to it and from the menu; choose Edit Tag, Insert HTML or Wrap Tag.

The Quick Tag Editor looks as shown below:

3.    The editor gives you three options:

·         Edit Tag – enables you to edit a current tag with its attributes and properties, along with addition of new tags.

·         Insert HTML – lets you add HTML to the page

·         Wrap Tag – lets you nest tags by adding tags inside the one selected by you.

4.    The drop down menu on the left of the Quick Tag Editor lets you select either of the above mentioned functions. The next box is where you enter your HTML and the right most buttons; green right mark means Enter and the red cross means Cancel.

Visual Aids in Microsoft Expression Web 2 help you with these

1.       See elements that are empty, invisible or with hidden border and styles.

2.       ASP.NET non-visual controls and errors.

3.       Size of margins and padding around your tags.

4.       Determine which tags are written around specific content in your page.

To show or hide a Visual Aid;

·         Go to View > Visual Aids and then choose a Visual Aid or

·         On the Status Bar right click on Visual Aids and then click on the Visual Aid.

Let us take a closer look at all the Visual Aids:

1.       Block Selection= This is enabled by default. Expression® Web displays a block selector for HTML blocks. A Block selector is a small tag indicator, when you hover over your cursor in a block a dotted rectangle appears around the tag. When you select the block a shaded area is displayed indicating padding around the element.

2.       Visible Borders= This selection displays dotted borders around HTML elements that don’t have borders. For instance, a table in Expression® Web, Visual borders will render a dotted border around every cell even if the table has no border.

3.       Empty Containers= The Empty Containers Visual Aid displays borders around certain elements that act as containers for other elements. For example, an HTML form is visible by default in Design View, even when the form has no controls in it.

4.       Margins and Padding= This shows the margins and padding around all elements; margins appear in red and padding appears in blue. You cannot use Margins and padding visual aid to change margins and padding.

5.       CSS Display: none elements= Shows elements that are hidden by a style that includes display: none.

6.       CSS Visibility: hidden Elements = Shows elements that are hidden by a style that includes visibility: hidden.

7.       ASP.NET Non-visual Controls= Shows a rectangle for ASP.NET controls which don’t display anything.

8.       ASP.NET Control Errors= Shows an error message when an ASP.NET control encounters an error, such as not connecting to a data source.

9.       Template Region Labels= Shows a border around editable template regions, including a tab with the name of the region, in pages based on Dynamic Web Templates or ASP.NET master pages.