Download presentation
Presentation is loading. Please wait.
2
HTML Style was introduced to provide a better way of styling HTML elements. Style can be added to HTML in three ways Inline - using the style attribute in HTML elements Internal - using the element in the section External - using an external Cascading Style Sheet (CSS) file The preferred way to add style to HTML, is to put styling syntax in separate CSS files.
3
CSS has the following general rule: element { property : value} When there are multiple entries, these are separated by a semicolon such as element { property_1 : value_1; property_2 : value_2; … property_n : value_n }
4
An inline style can be used if a unique style is to be applied to one single occurrence of an element. The inline style is applied as an attribute in the relevant HTML tag. The inline HTML style follows the following syntax:
7
An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the section of an HTML page, by using the tag. Example body {background-color: lightgrey;} p {text-align: right;}
9
An external style sheet is ideal when the style is applied to many pages. Each page must link to the style sheet using the tag. Example Where, - defines the relationship between a document and an external resource.
10
A CSS rule has two main parts: a selector, and one or more declarations..header { font-size: 14px;} selector declaration CSS comments Comments are used to explain your styling code, and may help you when you edit the source code at a later date. A CSS comment begins with "/*", and ends with "*/"
11
In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The file in which CSS rules are defined is saved with a.css extension.
12
Example: #para1 { text-align:center; color:red; } The class selector is used to specify a style for a group of elements. The class selector is most often used on several elements. The class selector uses the HTML class attribute, and is defined with a named dot "."
13
Example.center {text-align: center;} Multiple styles will cascade into one, the order will be 1. Browser default 2. External style sheet 3. Internal style sheet (in the head section) 4. Inline style (inside an HTML element) Where number 4 has the highest priority
14
Visit http://www.w3schools.com/css/default.asp for more examples.
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.