What is CSS? Explain the ways by which CSS included in HTML.

64views

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.
The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments.
CSS saves a lot of work, time and redundancy of code by controlling the layout of multiple web pages all at once and also can apply a style multiple times in a single Web page.
This is referred to as the separation of structure (or content) from presentation.
Thus with CSS designer has much better control over the layout and appearance of web pages.
Syntax: selector {1st property: value; 2nd property: value;......Nth property: value}
Here selector is an HTML tag at which a style will be applied such as <h1>,<p>.A property is a type of attribute of HTML tag like color, border etc. and Values are assigned to properties eg. red is value for color property.
CSS can be linked to an HTML document by using three ways
- The Internal CSS or Embedded CSS
- The In-line CSS

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