HTML & CSS Book (English)

Step 5: Adding a CSS Cascading Style Sheet File

Step 5: Adding a CSS Cascading Style Sheet File

Adding a CSS Cascading Style Sheet File You have just created the divisions. It is time to apply formatting (width, color, font…) to each division. Using the CSS, all page elements can be controlled . You need to create a CSS file and create a link to that file from your page.

  • Click New and New File (Picture X.13).
  • Select CSS and type a name or leave it as default and click OK. The file is created and added to your site (Picture X.14 and Picture X.15).

Picture X.13: Adding a new file to the project.

Picture X.14: Creatig a CSS file.

Picture X.15: A CSS file with an empty body rule.

  • Open the index file and add a <link> tag in the head section to link the CSS file to the index file (Picture X.16).

 

Picture X.16: Linking the CSS style sheet file to the Web page.

  • Open the CSS file and change background color of the page (Picture X.17). The CSS rule will be applied to the body tag of the index page.

 

Picture X.17: Changing the background color of the Web page.

  • Change the divisions formatting. The container division width should be 900 pixels and should be put at the center of the browser window automatically (Picture X.18). The CSS rule will be applied to the HTML element whose id is container.

 

Picture X.18: Setting the width of the Web page.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *