Scribd
Upload
2 views

css

CSS (Cascading Style Sheets) is a styling language used to control the layout and appearance of web pages, introduced in 1994. It consists of a syntax with selectors, properties, and values, and can be applied in three ways: inline, internal, and external. CSS also has a priority order for styles and provides various selectors, including tag, class, and ID selectors, each with different levels of priority.

Uploaded by

kailashkumar.kola
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

css

CSS (Cascading Style Sheets) is a styling language used to control the layout and appearance of web pages, introduced in 1994. It consists of a syntax with selectors, properties, and values, and can be applied in three ways: inline, internal, and external. CSS also has a priority order for styles and provides various selectors, including tag, class, and ID selectors, each with different levels of priority.

Uploaded by

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

CSS (Cascading Style Sheets)

CSS is a styling language used to control the layout and appearance of web pages. It allows
us to separate the styles/design from the structure of the web page.
CSS was introduced in 1994.

CSS Syntax
CSS syntax consists of a set of rules known as styles, which are applied to elements of the
web page. It consists of:
1. Selector → Defines which element(s) the style will be applied to.
2. Property → Specifies what aspect of the element's style will be changed.
3. Value → Defines the value for the given property.
Example:
p{
background-color: red;
}
 p → Selector (targets all <p> elements)
 background-color → Property (defines the background color)
 red → Value (sets the background color to red)

Types of CSS
CSS can be applied to HTML elements in three ways:
1. Inline CSS
 Defined directly within the HTML element using the style attribute.
Example:
<p style="color: blue;">This is an inline-styled paragraph.</p>
 Advantage: Quick and easy for small changes.
 Disadvantage: Hard to maintain if used frequently.
2. Internal CSS
 Defined within the <style> element inside the <head> section of an HTML document.
Example:
<head>
<style>
p{
color: blue;
}
</style>
</head>
 Advantage: Better organization compared to inline CSS.
 Disadvantage: Still makes the HTML file longer.
3. External CSS
 Defined in a separate .css file and linked to the HTML document using the <link> tag.
Example:
<link rel="stylesheet" href="styles.css">
Content of styles.css file:
p{
color: blue;
}
 Advantage: Keeps styles separate, making HTML cleaner and more maintainable.
 Disadvantage: Requires an additional HTTP request to load the CSS file.
CSS Priority Order
From highest to lowest priority:
!important > Inline > Internal = External
 !important overrides all other styles.
 Inline styles override both internal and external styles.
 Internal and external styles have the same priority (whichever appears last is applied).

CSS Selectors
CSS provides multiple ways to select elements:
1. Tag Selector
 Selects all elements with a specific tag name.
Example:
p{
color: red;
}
(This applies to all <p> elements.)
2. Class Selector
 Selects multiple elements that share the same class.
 Uses a dot (.) notation.
Example:
.highlight {
background-color: yellow;
}
<p class="highlight">This is highlighted text.</p>
<div class="highlight">This div is also highlighted.</div>
3. ID Selector
 Selects a single, unique element using an ID.
 Uses a hash (#) notation.
Example:
#main-title {
font-size: 24px;
color: blue;
}
<h1 id="main-title">This is a unique heading</h1>
Selector Priority Order
#id > .class > tag
 ID Selector (#id) has the highest priority.
 Class Selector (.class) has medium priority.
 Tag Selector (tagname) has the lowest priority.

You might also like