How to Use Styles
When a browser reads a style sheet, it will format the document according to it.
There are three ways of inserting a style sheet:
- External style sheet
- Internal style sheet
- Inline styles
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Internal Style Sheet
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
An inline style can be used if a unique style is to be applied to one single occurrence of an element.
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
This is a paragraph.
The HTML head Element
The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.
The HTML title Element
The <title> tag defines the title of the document.
The title element is required in all HTML/XHTML documents.
The title element:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results
A simplified HTML document:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
The HTML link Element<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets:
The <link> tag is most used to link to style sheets:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
The HTML style Element
The <style> tag is used to define style information for an HTML document.
Inside the style element you specify how HTML elements should render in a browser:
Inside the style element you specify how HTML elements should render in a browser:
0 comments:
Posting Komentar