INTRODUCTION
➢CSS is the language we use to style a Web page.
➢CSS stands for Cascading Style Sheets.
➢CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
➢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.
➢External stylesheets are stored in CSS files.
➢CSS describes how HTML elements should be displayed.
➢Having no CSS is like living a faded life. No excitement, no moods, no emotions, just a straight-up structure with some content in it.
➢CSS stands for Cascading Style Sheets.
➢CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
➢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.
➢External stylesheets are stored in CSS files.
➢CSS describes how HTML elements should be displayed.
➢Having no CSS is like living a faded life. No excitement, no moods, no emotions, just a straight-up structure with some content in it.
Types in CSS
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.
➢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.
➢The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red.
➢An inline CSS uses the style attribute of an HTML element.
➢The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red.
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.
➢The following example sets the text color of ALL the h1 elements (on that page) to blue, and the text color of ALL the p elements to red. In addition, the page will be displayed with a "powderblue" background color.
➢An internal CSS is defined in the head section of an HTML page, within a style element.
➢The following example sets the text color of ALL the h1 elements (on that page) to blue, and the text color of ALL the p elements to red. In addition, the page will be displayed with a "powderblue" background color.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: red; }
h1 {color: orange; }
p {border: 2px solid green; }
</style>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
<html>
<head>
<style>
body {background-color: red; }
h1 {color: orange; }
p {border: 2px solid green; }
</style>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
RESULT:
heading
paragraph
Run
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.
➢To use an external style sheet, add a link to it in the <head> section of each HTML page.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
RESULT:
heading
paragraph
Run
CSS Comments
➢CSS comments are not displayed in the browser, but they can help document your source code.
