ZAMBAK_IT_ExpressionWeb2
.pdf
Cascading Style Sheets
Cascading Style Sheets (CSS) is a language that defines how the contents of a Web page should be presented. You can apply formatting to page elements. For example, you can change font color, size, and style using CSS. And you also can change the position of text, tables, images, and so on.
Cascading style sheets give you more control over the appearance and presentation of your pages. It allows you to separate your content from your formatting. When you apply formatting with CSS, you simply make changes to a CSS file and it will apply to all relevant formatting across the entire site.
Before CSS, designers had to use tables if they wanted to arrange chunks of text, pictures, and even other tables in a graphically pleasing way. CSS has quite a few advantages over tables: Not only does CSS separate content from formatting but also you can use different style sheets to dress up a plain page for the Web, clear its decorative formatting to make it accessible for all visitors, straighten it out for printing, and simplify it for viewing on a pocket-size PDA. Tables for layout are out of fashion and such web pages do not work well in alternative web devices. As a result, CSS is the preferred method to use for your web page layout.
CSS Uses
There are three ways you can use style sheets on pages in your web site:
External Style Sheet
You can create an external style sheet file or files, link them to pages and you can apply them consistently across some or all pages in your web site. If you decide to change a style, you only need to make changes in the external style sheet and all of the pages linked to that style sheet will be affected by the change.
An external style sheet uses the .css file name extension, such as format.css. You can link a page to an external style sheet using the following code in the <head> tags.
<HEAD>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</HEAD>
Embedded Style Sheet
You can use an embedded style sheet when you want to define styles only for the current page. An embedded style sheet is defined between the <style> tags in the <head> section.
72 Chapter 5
An embedded style sheet would look like this:
<HEAD>
<style>
<!--
a:link { text-decoration: none: }
-->
</style>
</HEAD>
Inline styles
You can use inline styles when you wan to apply styles to individual elements on a page. An inline style is defined in the HTML tags using the style word.
An inline style looks like this:
<p style="border-style: solid">
CSS Types
•ID-based styles
•Class-based styles
•Tag-based styles
In this chapter, you will create a web site about butterflies.
ID-based styles
You can lay out a page using CSS, and position the page elements on the page where you want.
Create an empty web site by selecting File>New>Web site…
Specify the location and name of the site folder.
Creating a new Web site
Creating an empty Web site
Enhancing Your Web Site 73
Creating a new page
CSS and HTML pages
The used
CSS styles
Add a new page by selecting File>New>Web site.
Select a page layout which you want to use for your page from CSS Layouts, and click OK.
The selected page layout contains a header, navigation bar, two columns and footer.
Choosing a CSS layout
A page that is formatted with CSS and a separate CSS page are created.
Save the page giving a name default.html, and a title Butterfly - Wonderful creature.
Save the CSS file giving a name layout.css.
The CSS file is automatically attached to the page.
CSS layouts depend on two items: div tags (page divisions) and ID-based styles. ID-based styles can only be applied once per Web page. That limitation makes them ideal for styling such once-a page items as mastheads, navigation bars, layout columns, and footers.
You can see the used CSS styles on the page in Manage Styles. If you can not see it, click the Task panes menu and then Manage Styles. The red circles with the # sign are ID-based styles. The blue circles are HTML tags modified by CSS.
To make changes in the CSS styles, right-click the style and select Modify Style.
To change the background color of the page:
Right-click the body style and select Modify Style. The Modify Style dialog box opens.
74 Chapter 5
Specify a background color in the Background category and click OK.
The background color is changed and its code is added to the CSS file.
You should change the width of the page divisions, masthead, top_nav, container, and footer.
Type a width value in the Position category. |
Changing the background color |
|
Changing the width of the page divisions
Change the page background of the page elements.
To locate your page at the center of the window:
Select the right and left margins in the Box category.
Locating the page at the center of the window
To organize your files, create folders in the Folder List, css, images, multimedia.
Move the css file to the css folder in the Folder List.
Insert your page elements into the page divisions, banner into masthead, and navigation buttons into the top_nav.
You can use the Insert>Picture>From File, but it takes too much time if you have a lot of pictures. Instead, you can copy all pictures from the source to images folder in the Folder List. After that, you can simply drag and drop the pictures from the Folder List into the page.
To put page objects at the center of the cell:
Select center for text-align in the Block category.
Putting objects at the center
The created |
Moving a file |
folders |
into a folder |
|
|
|
|
Moving a picture into the page
Enhancing Your Web Site 75
The container division has two columns. You can resize column widths.
Change the left_col width in the Position category.
Changing the division width
After changing the left_col width, it is necessary to shift the page_content to the right leaving some space between the two columns.
Change the left value in the Box category.
Changing the
left margin
The two columns are divided as shown in the figure:
To give a good appearance to the page, it is also important to regulate the spaces between the border and page division (margin) and between the page division and text (padding), they are illustrated in the picture.
Make necessary changes to have a good appearance.
Change page_content’s background color and border.
76 Chapter 5
Create hyperlinks for the navigation buttons.
Type a text in the footer.
You can create other pages using this page because all pages have the same structure.
Right-click the default.html and select New From Existing Page from the pop up menu.
Creating a new page from the existing page
Untitled_x.html page is created, now you can save it.
Add text and pictures from a source to the pages.
Class-based styles
So far you have used ID-based styles for styling page items. ID-based styles can be used only once on a page. You added many pictures to the pages. To apply styles to the pictures, you need to use a class-based style which gives the
possibility to apply many times on a page. A class-based style starts with a dot
(.mystyle).
To create a class-based style by shifting the picture to the left and wrapping text around it:
Click New Style in the Manage Styles task pane.
Give a logical name starting with a dot.
Creating a new class-based style
Set float to left in the Layout category to shift the picture to the left.
Setting margin options
Shifting to the left
Enhancing Your Web Site 77
Give a value for the right and bottom margins to leave some space between the picture and text and click OK.
The .img-left style is created.
Copying a style
To create .img-right style, right-click .img-left style and select New Style Copy.
Change its name to .img-right, float to right in Layout and give values for left and bottom margins.
Now you have two new styles for positioning pictures.
To organize your CSS files and work easily, you can write them to different CSS files.
Create a new CSS file multimedia.css in the Folder list.
Creating a new CSS file
To attach a new css file to all HTML pages.
Click Attach Style Sheet in the Manage Styles task pane.
Attaching a CSS file
Find your CSS file using the Browse button, select All HTML pages for the Attach to option and Link for the Attach as option.
78 Chapter 5
Now, multimedia.css is available in Manage Styles.
To insert .img-left and .img-right styles into the multimedia.css file:
Moving a style
Click the style and drag and drop it into the multimedia.css and now it is in the multimedia.css file. Do that action also for the .img-right style.
The Multimedia.css file contains style codes for images.
CSS file with codes
Now you can apply these styles to the pictures.
To apply a style to a picture:
Click the picture to select it.
Enhancing Your Web Site 79
Click the Apply Styles tab, and click the style that you want to apply.
Applying
a style
The style is applied to the picture.
A picture applied a style
Tag-based styles
If you want to change the style of an HTML element, you can use tag-based styles.
Create a new css file text.css to insert tag-based styles and attach that file to all HTML files.
To create a Heading style:
Click the New Style button in the Apply Styles task pane and select h1 for the Selector.
Selecting a
Heading
To place new style codes into the css file directly:
In Define in, select Existing style sheet, and for the URL, find the css file where you want to place style codes.
Defining in an existing style sheet
80 Chapter 5