Cascading Style Sheet
CSS is a style sheet language used to determine the style or formatting of an HTML document.
Before we had CSS, all of the styling of HTML was embedded directly in the document- either in the form of attributes like width or bgcolor (background color) or in the form of presentational tags like font, center, strike etc.
Using separate style sheet for an entire site. A developer can apply styles across a whole site while updating a single css file.
Created by Hakon Wium Lie> of MIT in 1994.
CSS has as become the W3C standard for controlling visual presentation of web pages
There are three types of stylesheets
- Internal CSS ----> Use inside HTML page
- External CSS ----> Use outside HTML page
- Inline CSS ----> Use inside a particular tag
CSS Syntex
Creating an internal stylesheet
Use an internal stylesheet when you want an HTML document to have a unique style. An internal stylesheet is defined using the <style> tag and goes in the head section of an HTML document.
The <style> tag specifies the content type of a stylesheet with its type attribute which should be set to "text/css".
(How to write a CSS in HTML code)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{color: green}
</style>
</head>
<body>
<p>The text in this paragraph will be green.</p>
<p>This paragraph too.</p>
</body>
</html>
(How a Internal CSS Looks like on browser)
The text in this paragraph will be green.
This paragraph too.
Creating an External stylesheet
Use an external stylesheet when you want to apply one style to many pages. If you make one change in an external stylesheet, the change is universal on all the pages where the stylesheet is used.
An external stylesheet is declared in an external file with a .css extension. It is called by pages whose interface it will affect. External stylesheets are called using the <link> tag which should be placed in the head section of an HTML document. This tag takes three attributes.
Attributes of the <link> tag
- rel - When using an external stylesheet on a webpage, this attribute takes the value "stylesheet"
- type - When using an external stylesheet on a webpage, this attribute takes the value "text/css"
- href - Denotes the name and location of the external stylesheet to be used.
(How to write a CSS in HTML code)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>
The text in this paragraph will be blue.
</p>
</body>
</html>
(How a External CSS Looks like on browser)
The text in this paragraph will be blue.
Creating an Inline stylesheet
Use inline stylesheets when you want to apply a style to a single occurence of an element.
Inline stylesheets are declared within individual tags and affect those tags only. Inline stylesheets are declared with the style attribute.
(How to write a CSS in HTML code)
<html>
<head>
</style>
</head>
<body>
<p style="color:red">This text will be red.</p>
</body>
</html>
(How a Inline CSS Looks like on browser)
This text will be red.
