Cascading Style Sheet
CSS is stand for Cascading Style Sheet mainly used for applying style with HTML. It is used to describes the presentation of a document written in HTML.
CSS Styles can be defined in 3 ways
o Inline Styles
o Embedded Styles
o External Style Sheet
Inline Styles:
- In this Inline CSS we defined using the style attribute on each element.
- Styles are unique to each element and can’t be reused.
The other benefit of Inline CSS is render faster as they are applied directly to elements.
< h2 style=”background-color: red; color: white; text[1]align: center;”>What is HTML</h2>
Embedded Styles:
- In this Embedded system Defined within the <style> tag, typically in the <head>.
- Allows central configuration of styles for multiple elements.
- Good for reusability across the page.
- its Slower than inline styles due to broader scope
<title>Styles</title>
<style>
h2 {
background-color: green;
color: white;
text-align: center;
} </style>
<body>
<h2>what is HTML</h2>
<h2>CSS</h2>
</body>
External File
- external style is maintained in separate style that have extensions of .css.
- we need to create a separate file named style.css and then call in head section.
- Styles are reusable across multiple pages.
- Increases the number of requests, potentially affecting page load time.
Minification of CSS
– Minification is the process of compressing CSS. File and always recommended to Minify and use the CSS for
production. [Live]
for more details of minification you can visit https://apitpoint.com/css-minify
.
CSS Selector
CSS can use various types of selectors
The primary selectors used in styles are:
- Type Selector
- ID Selector
- Class Selector
ID Selector:
- In Id selector Each element can have a unique ID for styling.
- Use the ID to target the element and apply specific effects.
- Allows precise control over which element receives styles.
- Defined with syntax: <div id=”test”> </div>
<h2 id=”txteffects”>HTML</h2>
#txtEffects {
text-align: center;
color:yellow;
}
Class Selector:
- In class selector defined with a . (dot) prefix in CSS (e.g., .cssClassName).
- Applied to elements using the class attribute.
- Elements can have multiple classes, separated by spaces.
- Example: <div ></div>
The CSS selectors are further classified into various
groups based on behavior
- o Combinators / Rational Selectors
- o Attribute Selectors
- o Pseudo Selectors
- o Structural Pseudo Selector
Rational or Combinator
These selector is used to select elements based on their relation default with parent and child elements
other elements (e.g., descendant, child, adjacent sibling).
- Descendant Selector
Description: Targets all tags under a specified parent, including any level of hierarchy.
Syntax:parentElement childElement { }
Example:ol li { color: red; }(Targets all<li>elements inside<ol>)
- Child Selector
Description: Applies effects only to the direct child of the parent element.
Syntax:Parent > child { }
Example:div > p { color: red; }(Targets the direct<p>child of<div>)
Selector: Adjacent Sibling
Description: Applies effects to an element immediately following the specified element. It targets the first adjacent element.
Syntax: FirstElement + adjacentElement { }
Example: h2 + p { color: red; } (Targets the first <p> immediately following <h2>)
Selector: General Sibling
Description: Applies effects to all elements that follow the specified element, not just the first one.
Syntax: FirstElement ~ AdjacentElements { }
Example: h2 ~ p { color: red; } (Targets all <p> elements following <h2>)
Attribute Selectors:
Elements in HTML are identified using attributes or select html elements based on a specific attribute or value (e.g., type=”button”, type=”radio”).
Styles can be applied based on the attribute and its value.
Syntax:
tagName[attribute] { }
tagName[attribute=value] { }
CSS Attribute Selectors Overview
[attribute="val"]
Purpose: Matches exactly the value of the attribute.
Example:p[class="Effect"] { color: red; }(Targets<p>withclass="Effect")
[attribute^="val"]
Purpose: Matches values starting with the specified term.
Example:p[class^="Effect"] { color: red; }(Targets<p>withclassstarting with “Effect”)
[attribute$="val"]
Purpose: Matches values ending with the specified term.
Example:p[class$="Effect"] { color: red; }(Targets<p>withclassending with “Effect”)
[attribute*="val"]
Purpose: Matches values containing the specified term anywhere.
Example:p[class*="Effect"] { color: red; }(Targets<p>withclasscontaining “Effect”)
[attribute|="val"]
Purpose: Matches values starting with the specified term, separated by a hyphen.
Example:p[class|="effect"] { color: red; }(Targets<p>withclassstarting with “effect” or “effect-something”)
[attribute~="val"]
Purpose: Matches values that contain the specified term, with spaces.
Example:p[class~="Effect"] { color: red; }(Targets<p>withclasscontaining “Effect” as part of a list of classes)
Pseudo-Classes
this class describes or indicates that the effect can change according to state and situation
that indicate when a user moves the mouse over it
- :link: Specifies the effect for hyperlinks that have not been clicked or visited yet.
:visited: Defines the effects for hyperlinks that have been clicked and visited by the user.
:hover: Defines the effects when the mouse pointer hovers over an element, such as a link or button.
:active: Defines the effects when a link or element is in its active state, such as when it is being clicked.
:focus: Defines the effects when an element, like a form input or a button, gains focus (e.g., when a user clicks on it or navigates to it using the keyboard).
