ملخص: Web Page Format (CSS)

Learning Objectives

• Discuss web page layout using CSS.
• Write the basic structure of CSS correctly.
• List the benefits of CSS.

Why CSS?

HTML is a coding language used to create static web pages shown in browsers. HTML was designed to describe the content of a page. Later, tags such as <font> and color attributes were added to format pages, but developing large sites became tiring because font and color formatting had to be added to every page. To solve this, the World Wide Web Consortium (W3C) created CSS (Cascading Style Sheets), which removes the need for formatting tags inside the HTML page.

CSS is used to format the appearance of web pages: font color, font size, page color and so on. It can control the formatting of many pages at the same time.

Benefits of CSS

• Saves time: put the formatting code in a separate CSS file and include it in as many HTML pages as you like.
• Loading speed: the browser downloads the CSS file once and stores it, then reuses it for every page linked to it.
• Separates design from content: the appearance of all pages can be changed from one file without changing the HTML structure of each page.
• Responsive and adaptive pages: the design can adjust to different screen sizes such as computer, mobile and tablet.

Basic Structure of CSS

Selector {Property: Value}

• Selector: the HTML element or group of elements to be formatted, such as body.
• Property: what you want to change (color, size, spacing...).
• Value: how you want to change it.

Three Ways to Add CSS

1. Inline CSS: applies formatting directly to elements of the page.
2. Internal CSS: formats a single page.
3. External CSS: preferred for large sites to unify the design of their pages.

External CSS

• The code is written in a separate file with the .css extension.
• It is linked to the HTML page using the <link> tag inside the head area: <link href="fileName.css" rel="stylesheet">
• href is the name and path of the CSS file; rel="stylesheet" tells the browser that the linked file is a CSS file to be applied to the page.
• The external CSS file must not contain HTML tags.
• Changing one file changes the look of all linked pages.

Example

HTML page: <link rel="stylesheet" href="mystyle.css"> in the head, with an <h1> heading and a <p> paragraph in the body. CSS file: body {background-color: lightblue;} h1 {color: brown; font-size: 24px;} The body rule makes the page background light blue; the h1 rule makes main headings brown and 24px in size. Two pages (school data and student data) can share one formatting this way with minimal code.