Scribd
Upload
42 views7 pages

CSS Advantages

CSS, or Cascading Style Sheets, is a standard language for describing the presentation of web pages, introduced in 1996 by W3C, with CSS3 being the latest version. It allows for easy application of styles across multiple elements and pages, and can be included in HTML documents through inline styles, embedded styles, or external style sheets. Each method has its own syntax and use cases, enabling developers to control the layout and formatting of web content effectively.

Uploaded by

mdinamulrahmani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
42 views7 pages

CSS Advantages

CSS, or Cascading Style Sheets, is a standard language for describing the presentation of web pages, introduced in 1996 by W3C, with CSS3 being the latest version. It allows for easy application of styles across multiple elements and pages, and can be included in HTML documents through inline styles, embedded styles, or external style sheets. Each method has its own syntax and use cases, enabling developers to control the layout and formatting of web content effectively.

Uploaded by

mdinamulrahmani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 7

CSS

 CSS stands for Cascading Style Sheets.


 CSSis a standard style sheet language used for describing the
presentation (i.e. the layout and formatting) of the web pages.
 CSS
was introduced in 1996 by the World Wide Web Consortium
(W3C).
 CSS3 is the latest version of the CSS specification.
CSS Advantages:
 You can easily apply same style rules on multiple elements.
 Youcan control the presentation of multiple pages of a website with
a single style sheet.
 You can present the same page differently on different devices.
 You can alter the display of existing HTML elements.
Including CSS in HTML Documents
 There are three methods of including CSS in an HTML document:
 Inline styles — Using the style attribute in the HTML start tag.
 Embedded styles — Using the <style> element in the head section of a document.
 External style sheets — Using the <link> element, pointing to an external CSS file.
Inline Styles

 Inline styles are used to apply the unique style rules to an


element by putting the CSS rules directly into the start tag.
 It can be attached to an element using the style attribute. It
includes a series of CSS property and value pairs. Each “property:
value” pair is separated by a semicolon(;).
 Example:
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
Embedded Style Sheets
 Embedded style sheets are defined in the <head> section of an HTML document using the
<style> elements in an HTML document.
 Ex.
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>My HTML Document</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
External Style Sheets
 An external style sheet is ideal when the style is applied to many pages of the website.
 You can attach external style sheets in two ways — linking and importing.
 Linking External Style Sheets
 Before linking, we need to create a style sheet first. Let's open your favorite code
editor and create a new file. Now type the following CSS code inside this file and save
it as "style.css". Ex.
 body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}
Cont.

 An external style sheet can be linked to an HTML document using the <link> tag. This
tag goes inside the <head> section. Ex.
 <!DOCTYPE html>
 <html lang="en">
 <head>
<title>My HTML Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
CSS Syntax

You might also like