HTML & CSS Book (English)

Step 9 Formatting the Content Division

Step 9 Formatting the Content Division

Formatting the Content Division After adding the information into the Web page, you have to format it with CSS rules. The CSS rules are written in CSS selectors. There are three common types of CSS selectors (type, ID, and class) and there are three ways to combine CSS rules with HTML code (external, internal, and inline).

CSS Selector Types

Type Selector: It is an HTML tag selector. It corresponds with any HTML element type (<body>, <p>, <h1> etc.). The CSS rules in Picture X.30 are applied to all <p> elements in the page.


ID Selectors: The CSS rules in ID selector are applied to an element that has a specific ID attribute value. Since ID attributes must have unique values, an ID selector can never match more than one element in a Web paget. An ID selector is a name preceded by a pound character (#). The CSS rules in Picture X.31 are applied to the HTML element its ID is comment.


Class Selector: Class selectors can be used to select any HTML element that has a class attribute, regardless of their position in the HTML page. A class selector is a name preceded by a full stop (.). The CSS rules in Picture X.32 are applied to all HTML elementw whose IDs is comment.


Three Ways to Insert CSS

External style sheet: It is an external CSS file that contains only CSS code and is saved with a .css file extension. An external style sheet is ideal when the style is applied to many pages. Each page must link to the style sheet using the <link> tag in the head section of the page.


Internal Style Sheet: Internal style sheets are used to define styles for an HTML page. You define internal styles in the head section of an HTML page, by using the <style> tag. Internal CSS has the higher priority than external CSS.


Inline style: It is used to apply CSS styles to one HTML element using the style attribute. Inline CSS has the highest priority out of the three ways you can use CSS: external, internal, and inline.

Formating the Image

We want to lace the image to the left side and move the following text to the right of the image. HTML is used to structure content and place the content one after another. To control the layout of the element and format you need CSS. We will use a CSS class selector for this task.

  • Assign a class attribute (img-left) to the image Tuqay.jpg in the index.html file (Picture X.32).

Picture X.32: Adding a class attribute.

  • Define a CSC class selector for the img-left class in the StyleSheet.css file (Picture X.33).


Picture X.33: CSS rules of the .img-left class selector.

  • Save and run the page to see the result (Picture X.34). The image is floated to the left. Padding gives some space between the border and text. Margin gives the space between the objects.

CSS selectors

Picture X.34: After formatting the Tugay.jpg image.

Enlarging the Text

  • Increase the text size of Ğabdulla Tuqay and Габдулла Тукай. You are going to change the formatting of a specific element (<p>), thus you can use inline CSS style (Picture X.35).


Picture X.35: Using inline CSS style to enlarge the text.

  • Save and run the page to see the result.

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

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