The Box Model in CSS is the foundation of layout and design.
It describes how elements are
rendered as rectangular boxes on a webpage. The box model consists of four main areas,
starting from the inside and working outward:
1. Content: The actual content of the box (like text, images, etc.). This is the innermost
area where the main content resides.
2. Padding: The space between the content and the border. Padding is transparent and
can be adjusted to increase or decrease the space between the content and the border.
3. Border: The line surrounding the padding (if any) and content. You can style borders
by setting thickness, color, and style (solid, dashed, etc.).
4. Margin: The outermost space around the element. It separates the element from other
elements on the page. Like padding, margins are transparent, but they don't affect the
box's dimensions.
Example:
.box {
width: 200px; /* Content width */
padding: 20px; /* Space between content and border */
border: 5px solid black; /* Border thickness and style */
margin: 10px; /* Space outside the box */
}
CSS has a variety of selectors that allow you to target specific HTML
elements in a document. Here's a breakdown of the most common CSS
selectors and how they differ:
1. Universal Selector (*)
Targets all elements in a document.
css
Copy code
*{
margin: 0;
padding: 0;
Use: To apply a rule to all elements.
2. Type Selector (Element Selector)
Targets all elements of a specific type.
css
Copy code
p{
color: blue;
Use: To style all <p> (paragraph) elements, for example.
3. Class Selector (.classname)
Targets elements that have a specific class.
css
Copy code
.my-class {
font-size: 16px;
Use: To style elements based on their class attribute.
4. ID Selector (#idname)
Targets a single element with a specific ID (IDs must be unique).
css
Copy code
#my-id {
background-color: yellow;
Use: To apply unique styles to an element with a unique ID.
5. Attribute Selector ([attr=value])
Targets elements based on the presence or value of an attribute.
css
Copy code
input[type="text"] {
border: 1px solid black;
Use: To style elements with specific attributes or attribute values.
6. Group Selector (,)
Allows grouping multiple selectors to apply the same styles.
css
Copy code
h1, h2, p {
font-family: Arial;
Use: To style multiple elements with the same rule.
7. Descendant Selector (Space)
Targets elements that are descendants of another element.
css
Copy code
div p {
color: green;
Use: To style all <p> elements inside <div> elements.
8. Child Selector (>)
Targets elements that are direct children of another element.
css
Copy code
ul > li {
list-style-type: none;
Use: To style <li> elements that are direct children of a <ul>.
9. Adjacent Sibling Selector (+)
Targets an element that is an immediate sibling (next to) another
element.
css
Copy code
h1 + p {
margin-top: 10px;
Use: To style the first <p> that comes right after an <h1>.
10. General Sibling Selector (~)
Targets all elements that are siblings of a specified element.
css
Copy code
h1 ~ p {
color: red;
Use: To style all <p> elements that are siblings of an <h1>.
11. Pseudo-Class Selectors
Apply styles to elements based on their state.
:hover: Targets elements when hovered.
:nth-child(n): Targets the nth child element.
:focus: Targets an element when it has focus.
Example:
css
Copy code
a:hover {
color: orange;
12. Pseudo-Element Selectors
Target specific parts of an element.
::before: Inserts content before the element.
::after: Inserts content after the element.
::first-letter: Styles the first letter of an element.
Example:
css
Copy code
p::first-letter {
font-size: 2em;
color: blue;
13. Combinator Selectors
Combine multiple selectors in complex ways:
Descendant ( ): Selects all elements that are descendants.
Child (>): Selects direct children.
Adjacent Sibling (+): Selects the next sibling.
General Sibling (~): Selects all siblings.
14. Not Selector (:not())
Excludes certain elements from being selected.
css
Copy code
p:not(.intro) {
color: gray;
Use: To exclude elements with a particular class or attribute from a
rule.
15. Attribute Selectors (Multiple Types)
There are different ways to target attributes:
[attr]: Has a certain attribute.
[attr=value]: Attribute with specific value.
[attr^=value]: Starts with a specific value.
[attr$=value]: Ends with a specific value.
[attr*=value]: Contains a specific value.
css
Copy code
a[href^="https"] {
color: green;
Each selector type serves different purposes and allows you to apply
styles more precisely to HTML elements based on their type, class, state,
or position in the DOM.
The CSS Cascade is the mechanism by which the browser determines
which CSS rules should apply when multiple rules are competing to style
the same element. The process involves evaluating a rule's specificity,
importance, and source order to determine which styles take
precedence. Here's how the browser chooses:
1. Importance
CSS rules can be marked as !important, making them more
significant than other rules, regardless of specificity.
The browser will always apply the !important rule over others,
unless another !important rule with higher specificity competes.
Example:
css
Copy code
p{
color: blue !important;
p{
color: red;
The paragraph will be blue because the !important rule overrides
the red color, even though both rules target the same element.
2. Specificity
Specificity is a ranking system that calculates the weight of a selector. The
more specific a selector, the more weight it has, and thus it overrides less
specific ones. Specificity is calculated based on different parts of a
selector:
Inline styles (style attribute) have the highest specificity.
ID selectors (#idname) have more weight than class or element
selectors.
Class selectors (.classname), attribute selectors ([attr=value]),
and pseudo-classes (:hover, :nth-child) are less specific than IDs
but more specific than element selectors.
Type selectors (e.g., div, p, h1) and pseudo-elements
(::before, ::after) have the lowest specificity.
Specificity Calculation:
Inline styles: 1000 points
ID selectors: 100 points
Class, attribute selectors, and pseudo-classes: 10 points
Type selectors and pseudo-elements: 1 point
Example:
css
Copy code
p{
color: blue; /* 1 point */
#my-id {
color: green; /* 100 points */
.my-class {
color: red; /* 10 points */
In this case, the green color will be applied because the ID selector
(#my-id) has the highest specificity.
3. Source Order
When two rules have equal specificity, the rule that appears last in the
CSS code will be applied. This is called the "last declaration wins"
principle.
Example:
css
Copy code
p{
color: blue;
p{
color: red;
Since both rules have the same specificity (they are both type
selectors), the paragraph will be red because the second rule comes
after the first.
4. Inheritance
Some CSS properties are inherited by default from parent elements, such
as color, font-size, and line-height. Other properties, like margin and
border, are not inherited by default. If no competing rule is found,
inherited styles can still be applied. You can also force inheritance using
the inherit value or prevent it using initial or unset.
Example:
css
Copy code
body {
color: blue;
p{
color: inherit;
}
The <p> element will inherit the blue color from the body, unless a
more specific rule is applied directly to the paragraph.
5. Default User-Agent Styles
Browsers have default styles, known as user-agent styles, that apply to
certain elements if no other rules are defined. These can be overridden by
custom styles, unless they're using high specificity or !important
declarations.
Cascade Example:
html
Copy code
<head>
<style>
p{
color: red; /* Type selector, low specificity */
.special {
color: green; /* Class selector, higher specificity */
#unique {
color: blue; /* ID selector, highest specificity */
p{
color: yellow !important; /* Type selector with !important, overrides
specificity */
</style>
</head>
<body>
<p id="unique" class="special">Hello, World!</p>
</body>
Explanation:
1. The ID selector (#unique) has the highest specificity, so the blue
color would normally apply.
2. However, since the yellow color is marked !important, it overrides all
other rules, including those with higher specificity.
How to Control the Cascade:
Use more specific selectors (e.g., ID selectors or combining
classes with elements) to give your rules higher specificity.
Use !important sparingly to ensure that a rule always takes
precedence.
Make sure to order your CSS rules in a logical manner so that the
most specific or intended rule comes last in the stylesheet.
