What is CSS ?
Cascading Style Sheets(CSS) outline how materials are displayed, in print or maybe pronounced on the screens. Since the consortium was established in 1994, W3C has actively promoted the use of web style sheets.
Styling HTML with CSS
CSS saves a lot of work. The layout of several web pages may be controlled simultaneously.
CSS can be added to HTML elements in 3 ways:
- Inline Style Sheet − Define style sheet rules directly along-with the HTML elements using style attribute.
- External Style Sheet − Define style sheet rules in a separate .css file and then include that file in your HTML document using HTML <link> tag.
- Internal Style Sheet − Define style sheet rules in header section of the HTML document using <style> tag.
Inline Style Sheet
Inline styles relate to a specific HTML tag, using a style attribute with a CSS rule to style a specific page element. They’re useful for quick, permanent changes, but are less flexible than external and internal stylesheets as each inline style you create must be separately edited should you decide to make a design change.
Styles for an item in your HTML code are applied directly to an element. They use the style attribute, followed by regular CSS properties.
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>
Output:
This is a Blue Heading
External Style Sheet
An external stylesheet is a standalone .css file that is linked from a web page. External stylesheets have the advantage of being able to create it once and to apply rules in several web pages. In cases where you need to make widespread changes to the design of your site, you can change the style sheet by saving time and effort on all linked pages.
The CSS file in the document head must be referenced in an HTML page designed with external CSS stylesheet. Once the CSS file has been created the server needs to be uploaded and linked to the code in the HTML file.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
This is a heading
This is a paragraph.
Internal Style Sheet
An internal stylesheet holds CSS rules for the page in the head section of the HTML file. You can only configure CSS classes and IDs for styling several elements in the page code on that page. Again, all tagged elements on this page are subject to a single change to the CSS rule.
Rather than linking an external .css file, HTML files using an internal stylesheet include a set of rules in their head section. CSS rules are wrapped in <style> tags, like this:
Example:
<!DOCTYPE html>
<html>
<head>
<style>body {background-color: powderblue;}h1 {color: blue;}p {color: red;}</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
This is a heading
This is a paragraph.