Explain in detail the different CSS 3 style sheet with an example.

99views

written 6.3 years ago by

binitamayekar ★ 6.6k

• modified 6.2 years ago

Cascading Style Sheets (CSS)

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens.
CSS is independent of HTML and can be used with any XML-based markup language.
CSS makes the separation of structure (or content) from presentation.
Thus with CSS designer has much better control over the layout and appearance of web pages.
The way by which CSS is included in HTML can be categorized into following three types:

An internal style sheet should be used when a single document has a unique style.
In this, style of CSS is specified in the <head> section.it affects all the elements in the body section. Internal CSS is used in the condition when we want a style to be used in the complete HTML body not in any other web page.

Example:

<head>

<style type="text/css">

p {color:red; font-size: 10px;}

</style>

</head>

Advantages of Internal CSS:

Only one page is affected by stylesheet. Classes and IDs can be used by internal stylesheet.
There is no need to upload multiple files. HTML and CSS can be in the same file.

Disadvantages of Internal CSS:

Increased page loading time.
It affects only one page – not useful if you want to use the same CSS on multiple documents.

An external style sheet is ideal when the style is applied to many pages. With this we can change the look of an entire Web site by changing only one file.
External CSS file contains only CSS code and it is saved with a “.css” extension.
The CSS file uses <LINK> tag instead of <STYLE> tag to link with web pages. The <LINK> tag is placed in the <HEAD> section of the HTML document.
<link> tag has following attributes such as 'rel' to specify a relationship of CSS with HTML document,' type' it specifies which type of style language is used, 'href' points to the external style sheet file's URL.
Example:

<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>

Advantages of External CSS:

Disadvantages of External CSS:

Inline CSS is used for a specific HTML tag. <style> attribute is used to style a particular HTML tag. It will affect only single elements.
It is not the best practice for a good programmer and the code will be quite large and very complex.
Whenever our requirements are very small we can use inline CSS. For example, in cases when we don’t have an access to CSS files or need to apply style for a single element only.
Example:

<body style="background-color:black;"> <p style="color:white;">Something useful here.</p></body>

Advantages of Inline CSS:

Disadvantages of Inline CSS:

ADD COMMENT EDIT