CSS (Cascading Style Sheets) is used to style HTML elements. Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the Web since the Consortium was founded in 1994.
Cascading
Style Sheets (CSS) is a style sheet mechanism that has been specifically
developed to meet the needs of Web designers and users. With
CSS, you can specify a number of style properties for a given HTML element. Each
property has a name and a value, separated by a colon (:). Each property
declaration is separated by a semi-colon (;).
<p
style="color:red;font-size:24px;">Using Style Sheet
Rules</p>
This
will produce following result:
Using Style Sheet Rules
There
are three ways of using a style sheet in an HTML document:
Styling HTML with CSS:
CSS
was introduced together with HTML 4, to provide a better way to style HTML
elements.
CSS
can be added to HTML in the following ways:
- Inline - using the style attribute in HTML elements
- Internal - using the <style> element in the <head> section
- External - using an external CSS file
The
preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.
However,
in this HTML tutorial we will introduce you to CSS using the style attribute.
This is done to simplify the examples. It also makes it easier for you to edit
the code and try it yourself.
Inline Style Sheet:
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. You can apply style sheet rules directly
to any HTML element. This should be done only when you are interested to make a
particular change in any HTML element only. To use inline styles you use the
style attribute in the relevant tag. Below is an example:
Example:1
<p style="color:blue;margin-left:20px;">This
is a paragraph.</p>
Example :2
<p
style="color:red;font-size:24px;">Using Style Sheet
Rules</p>
This will produce following
result:
Using Style Sheet Rules
HTML Style Example - Background Color:
The background-color property defines the background color for an element:Example
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
HTML Style Example - Font, Color and Size:
The font-family, color, and font-size properties defines the font, color, and size of the text in an element:Example
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
The
font-family, color, and font-size properties make the old <font> tag
obsolete.<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
HTML Style Example - Text Alignment:
The text-align property specifies the horizontal alignment of text in an element:Example
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The
text-align property makes the old <center> tag obsolete.<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Internal Style Sheet:
If you
want to apply Style Sheet rules to a single document only then you can include
those rules into that document only. Below is an example:
<head>
<style type="text/css">
body{background-color: pink;}
p{color:blue; 20px;font-size:24px;}
</style>
</head>
An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this:
External Style Sheet:
If
you have to give same look and feel to many pages then it is a good idea to
keep all the style sheet rules in a single style sheet file and include this
file in all the HTML pages. You can incluse a style sheet file into HTML
document using <link> element. 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="yourstyle.css">
</head>
Deprecated Tags and Attributes:
In
HTML 4, several tags and attributes were used to style documents. These tags
are not supported in newer versions of HTML.
Avoid
using the elements: <font>, <center>, and <strike>, and the
attributes: color and bgcolor.
Using styles in html source:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {color:red;}
h2 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>All header 1 elements will be red</h1>
<h2>All header 2 elements will be
blue</h2>
<p>All text in paragraphs will be
green.</p>
</body>
</html>
result:
All header 1 elements will be red
All header 2 elements will be blue
All text in paragraphs will be
green.
Link that is not underlined source:
<!DOCTYPE html>
<html>
<body>
<a
href="http://www.creativedesignbest.blogspot.com"
style="text-decoration:none;">Visit
creativedesignbest.blogspot.com to see HTML tutorials!</a>
</body>
</html>
result:
Link to an external style sheet source:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css" href="styles.css">
</head>
<body>
<h1>I am formatted with an external style
sheet</h1>
<p>Me too!</p>
</body>
</html>I am formatted with an external style sheet
Me too!
No comments:
Post a Comment