Scribd
Upload
0 views

Css

Uploaded by

anjumjamal8174
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

Css

Uploaded by

anjumjamal8174
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

CSS

(CASCADING STYLE SHEET)


CONTENTS
➢ INTRODUCTION TO CSS
➢ ADVANTAGES AND DISADVANTAGES OF CSS
➢ TYPES OF CSS
✓ INLINE
✓ INTERNAL
✓ EXTERNAL
➢ APPLICATIONS OF CSS
WHAT IS CSS?
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 is a style sheet language used for describing the presentation of a
document written in a markup language such as HTML. CSS is a cornerstone technology of the
World Wide Web, alongside HTML and JavaScript.
Cascading Style Sheets (CSS) is used to format the layout of a
webpage.
With CSS, you can control the color, font, the size of text, the
spacing between elements, how elements are positioned and
laid out, what background images or background colors are to
be used, different displays for different devices and screen sizes,
and much more!
 Tip: The word cascading means that a style applied to a
parent element will also apply to all children elements within
the parent. So, if you set the color of the body text to "blue",
all headings, paragraphs, and other text elements within the
body will also get the same color (unless you specify
something else)!
TYPES OF CSS

The most common way to add CSS, is to keep the styles in external CSS files.
INLINE CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
 Example
Inline styles are defined within the "style" attribute of the relevant
element:

<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>
SOURCE CODE OUTPUT
ADVANTAGES OF INLINE CSS
DISADVANTAGES OF INLINE CSS
▪ They make a document difficult to maintain and
increase the download time. Inline styles must be
applied to every element on which you want to apply a
style. Therefore, if you want all your headings to have
the font family Arial, you have to add an inline style to
each heading element in your document.
• Adding CSS rules to every HTML element is time-consuming
and makes your HTML structure messy.
• Styling multiple elements can affect your page's size and
download time.
INTERNAL CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
 Example
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
SOURCE CODE OUTPUT
ADVANTAGES OF INTERNAL CSS
DISADVANTAGES OF INTERNAL CSS

 They affect only the page in which they are applied. If


you want to use the same styles in several documents,
you need to repeat them for every page..
 They increase the page load time because the entire
CSS file needs to be implemented first to apply CSS.
EXTERNAL CSS
With an external style sheet, you can change the look of an entire website by changing
just one file!
Each HTML page must include a reference to the external style sheet file inside the
<link> element, inside the head section.
 Example
External styles are defined within the <link> element, inside the <head> section of an
HTML page:

<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
An external style sheet can be written in any text editor, and must be
saved with a .css extension.
The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks like:
 "mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Note: Do not add a space between the property value and the unit
(such as margin-left: 20 px;). The correct way is: margin-left: 20px;
SOURCE CODE OUTPUT
ADVANTAGES OF EXTERNAL CSS

▪ Thus, they allow you to control the look and feel of several
documents in one go and do not need to define aa specific style
for every element.
▪ They allow you to easily group your styles in a more efficient way.
DISADVANTAGES OF EXTERNAL CSS

 They increase the download time as the entire CSS file


has to be downloaded to apply the styles to the HTML
document. When the styles are less in number, applying
an external style can make the document complicated.
 They display the Web page only after the entire style
sheet is loaded.
APPLICATIONS OF CSS
• CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages.
You can define a style for each HTML element and apply it to as many Web pages as you want.
• Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time.
Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means
faster download times.
• Easy maintenance - To make a global change, simply change the style, and all elements in all the
web pages will be updated automatically.
• 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.
• Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type
of device. By using the same HTML document, different versions of a website can be presented for
handheld devices such as PDAs and cell phones or for printing.
• Global web standards - Now HTML attributes are being deprecated and it is being recommended
to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible
to future browsers.

You might also like