Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
47 views

What Is CSS?: Cascading Style Sheets, Fondly Referred To As CSS, Is A Simple

CSS (Cascading Style Sheets) is a language for styling web pages that describes how HTML elements are displayed on screen, paper, or other media. CSS saves work by allowing control of layout and formatting across multiple web pages from a single stylesheet file. It separates the structure and presentation of content, making web pages more flexible, accessible, and easier to maintain.

Uploaded by

Surendra Saurabh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
47 views

What Is CSS?: Cascading Style Sheets, Fondly Referred To As CSS, Is A Simple

CSS (Cascading Style Sheets) is a language for styling web pages that describes how HTML elements are displayed on screen, paper, or other media. CSS saves work by allowing control of layout and formatting across multiple web pages from a single stylesheet file. It separates the structure and presentation of content, making web pages more flexible, accessible, and easier to maintain.

Uploaded by

Surendra Saurabh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

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
 External stylesheets are stored in CSS files
 Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making web
pages presentable.
 CSS is designed to enable the separation of presentation and content,
including layout, colors, and fonts.[3] This separation can improve
content accessibility, provide more flexibility and control in the specification of
presentation characteristics, enable multiple web pages to share formatting by
specifying the relevant CSS in a separate .css file, and reduce complexity and
repetition in the structural content.
 Separation of formatting and content also makes it feasible to present the
same markup page in different styles for different rendering methods, such as
on-screen, in print, by voice (via speech-based browser or screen reader),
and on Braille-based tactile devices. CSS also has rules for alternate
formatting if the content is accessed on a mobile device.[4]
 The name cascading comes from the specified priority scheme to determine
which style rule applies if more than one rule matches a particular element.
This cascading priority scheme is predictable.
 The CSS specifications are maintained by the World Wide Web
Consortium (W3C). Internet media type (MIME type) text/css is registered
for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS
validation service for CSS documents.[5]

Proper use of CSS

In the early days of the World Wide Web (WWW), it was common for HTML
files to include not only markup language and content, but formatting
information and JavaScript as well. This made webpages difficult to write,
difficult to read, difficult to update and difficult to maintain. As the web
matured, it became a best practice to divide HTML, scripting content and style
information into separate, easy-to-maintain files. As such, a modern webpage
is typically made up of three separate entities: a cascading style sheet,
a JavaScript file and the HTML file itself.
Example of CSS

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

h1 {

color: white;

text-align: center;

p{

font-family: verdana;

font-size: 20px;

</style>

</head>

<body>

<h1>My First CSS Example</h1>

<p>This is a paragraph.</p>
</body>

</html>

Types of CSS (Cascading Style Sheet)

Cascading Style Sheet(CSS) is used to set the style in web pages which contain
HTML elements. It sets the background color, font-size, font-family, color, … etc
property of elements in a web pages.
There are three types of CSS which are given below:
 Inline CSS
 Internal or Embedded CSS
 External CSS

Inline CSS: Inline CSS contains the CSS property in the body section attached with
element is known as inline CSS. This kind of style is specified within an HTML tag
using style attribute.
Example:

<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>

<body>
<p style = "color:#009900;
font-size:50px;
font-style:italic;
text-align:center;">
GeeksForGeeks</p>
</body>
</html>

Internal or Embedded CSS: This can be used when a single HTML document must be
styled uniquely. The CSS rule set should be within the HTML file in the head section i.e
the CSS is embedded within the HTML file.
Example:

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div class ="geeks">A computer science portal for
geeks</p>
</div>
</body>
</html>

External CSS: External CSS contains separate CSS file which contains only style
property with the help of tag attributes (For example class, id, heading, … etc). CSS
property written in a separate file with .css extension and should be linked to the
HTML document using link tag. This means that for each element, style can be set
only once and that will be applied across web pages.
Example: The file given below contains CSS property. This file save with .css
extension. For Ex: geeks.css
body {

background-color:powderblue;

.main {

text-align:center;

.GFG {

color:#009900;

font-size:50px;

font-weight:bold;

#geeks {

font-style:bold;

font-size:20px;

}
Advantages of CSS
The Style Sheets specification works by allowing you to specify
rules that say how the content of elements within your document
should appear. Converting from an HTML page to a CSS design page
may be a bit difficult and time consuming task. However, Cascading
Style Sheet design has many advantages and benefits. Following are
some major advantages associated with using CSS for web design.

One of the primary advantages of CSS is that it allows developers to


separate content from its presentation layer. CSS change the
traditional method of setting style and layout on each individual web
page by allows CSS designers to use a single file to control the style
and layout of multiple web pages in the same website. So you can
change the appearance of an entire website by editing one style sheet.
The bigger your website, the more time CSS saves you. Also Style
Sheets reduces the risks associated with maintenance of large
websites.
The ability to edit any number of HTML pages at one time by editing
a single Style Sheet file will reduces the file size and bandwidth
usage . Since Style Sheet is cached in browser cache after the first
request and can be reused for every page on the same website, it
doesn`t have to bedownloaded with each web page request. That
means the Style Sheet classes are not loaded from the server, each
time different pages of same website sharing the same CSS file.
Moreover, when CSS separates your website`s content from HTML
page, the HTML file size is smaller and the pages will load faster .

Change the appearance of an entire website by editing one style sheet


ensures that your web pages have consistent styling throughout your
website. So Search engines will no longer have to struggle to read
your website content. The advantage of improved Search Engine
friendlyaccessibility of content will allow a large number of users to
locate you on the Internet. Also less code and more content will play a
major role in Search Engine Optimization (SEO).

Style Sheets can exactly positions your element where ever you want
in the web page. It allows you to put a layer on a specific place on
your screen, so that it stays the same no matter what screen resolution
or browser window sizes a viewer uses. In any phase of web
development, the developer feels that particular Styles are not going
well with the situation then it becomes easier for them to position
them easily using Style Sheets.
Style Sheets can be used to create printer friendly web pages. CSS
enabled web pages can be easily printed. The colors, images and other
things which are difficult to be printed can be eliminated and printed
easily by Style Sheets.

Advantages of CSS

Disadvantages of Cascading Style Sheet (CSS)

Cross-Browser Issues
Implementing initial CSS changes on a website is easy on the developer’s end.
However, after the changes have been made, you will have to confirm the
compatibility if the CSS is displaying similar change effects on all the browsers.
This is simply due to the fact that CSS works differently on different browsers.

Confusion Due to Its Many Levels

The programming language world in itself is crazily complicated for non-


developers and beginners. To add to that, different levels of CSS i.e. CSS; CSS
2; CSS 3 can be quite confusing for the mentioned lot.

Vulnerable

If you have worked with CSS, you probably know that it is easily accessible
because of its open text-based system. An accident or a mere act of mischief
with the files can end up disrupting the display and formatting of your entire
website. It would only require a read/write access to the intended website to
override the changes.

You might also like