CSS – Cascading Style Sheets
CSS is the language we use to style a Web page.
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper,
or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all
at once
Cascading Style Sheets, fondly referred to as CSS, is a simply designed
language intended to simplify the process of making web pages presentable.
While HTML uses tags, CSS uses rule sets. CSS is easy to learn and understand,
but it provides powerful control over the presentation of an HTML document.
Benefits of using CSS
CSS saves time: You can write CSS once and reuse the same sheet in
multiple HTML pages.
Easy Maintenance: To make a global change simply change the style,
and all elements in all the webpages will be updated automatically.
Search Engines: CSS is considered a clean coding technique, which
means search engines won’t have to struggle to “read” its content.
Superior styles to HTML: CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison
to HTML attributes.
Offline Browsing: CSS can store web applications locally with the help of
an offline cache. Using this we can view offline websites.
Versions of CSS
CSS Syntax:
CSS comprises style rules that are interpreted by the browser and then applied to the corresponding
elements in your document. A style rule set consists of a selector and declaration block.
1. Selector: A selector in CSS is used to target and select specific HTML elements to apply
styles to.
2. Declaration: A declaration in CSS is a combination of a property and its corresponding
value.
Selector -- h1
Declaration -- {color:blue;font size:12px;}
Example Program : 1
Output :
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
main {
width: 600px;
height: 200px;
padding: 10px;
background: beige;
}
h1 {
color: olivedrab;
border-bottom: 1px dotted darkgreen;
}
p {
font-family: sans-serif;
color: orange;
}
</style>
</head>
<body>
Example Program :2
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
} Output :
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
Adding Styles to HTML
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
Example:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a
<style> element.
Example
<head> <style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style> </head>
External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each
HTML page:
Example - [Link]
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="[Link]">
</head>
body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body> </html>
Example - [Link]
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}