CSS stands for
Cascading Style Sheets and it is used to style HTML elements.
Styling HTML with CSS
CSS was introduced with HTML 4 to provide better ways to style HTML documents.
There are three ways by which you can add CSS to a HTML document, these are
1.Inline - using the style attribute in HTML elements
2.Internal - using the <style> element in the <head> section
3.External - using an external CSS file.
Inline Styles
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.
EXAMPLE: This Ex 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>
HTML Style Example - Background Color
Here you will see how to change the background color of an element using style sheets.
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>
OUTPUT :
HTML Style Example - Font, Color and Size
Here You will see how to change font,color and size of an HTML document with the help of stylesheets
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>
OUTPUT:
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>
OUTPUT:
Internal Style Sheet
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, see the example,
EXAMPLE:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
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 is placed inside the <head> section.
EXAMPLE:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
