1/16/25, 11:46 AM StackEdit
CSS (Cascading Style Sheets) - Comprehensive Notes
CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation,
layout, and styling of web pages. It enables developers to separate content (HTML) from
design, improving maintainability and flexibility. This guide provides an in-depth
understanding of CSS, covering both basic and advanced topics.
1. Introduction to CSS
CSS is used to style and layout web pages, including changes to colors, fonts, spacing, and
positioning. It operates on the principle of separating concerns: HTML handles content,
while CSS handles presentation.
Key Features
Separation of Content and Design: CSS enables maintaining HTML structure and
styling independently.
Reusability: Styles can be reused across multiple HTML pages.
Efficiency: External CSS files minimize redundancy.
Improved Accessibility: CSS aids in creating visually consistent designs.
CSS Syntax
A CSS rule consists of:
Selector: Specifies the HTML elements to style.
Declaration Block: Contains properties and their values.
selector {
property: value;
}
Example:
https://stackedit.io/app# 1/13
1/16/25, 11:46 AM StackEdit
p {
color: blue;
font-size: 16px;
}
Types of CSS
1. Inline CSS: Applied directly within an HTML element’s style attribute.
<p style="color: blue;">Hello World</p>
2. Internal CSS: Defined within a <style> tag in the <head> section of the document.
<style>
p {
color: blue;
}
</style>
3. External CSS: Written in a separate .css file and linked to the HTML document.
<link rel="stylesheet" href="styles.css">
2. Selectors in CSS
Selectors are patterns used to select the elements you want to style.
Basic Selectors
Universal Selector ( * ): Targets all elements.
* {
margin: 0;
https://stackedit.io/app# 2/13
1/16/25, 11:46 AM StackEdit
padding: 0;
}
Type Selector: Targets elements by their tag name.
h1 {
font-size: 2rem;
}
Class Selector ( . ): Targets elements with a specific class.
.btn {
background-color: blue;
}
ID Selector ( # ): Targets an element with a specific ID.
#header {
background-color: gray;
}
Advanced Selectors
Attribute Selectors: Targets elements based on attributes.
input[type="text"] {
border: 1px solid black;
}
Group Selectors: Combines multiple selectors.
h1, h2, h3 {
color: green;
https://stackedit.io/app# 3/13
1/16/25, 11:46 AM StackEdit
Descendant Selector: Targets nested elements.
div p {
font-size: 14px;
}
Pseudo-classes: Targets elements based on their state.
a:hover {
color: red;
}
Pseudo-elements: Targets specific parts of an element.
p::first-line {
font-weight: bold;
}
3. The Box Model
CSS follows the box model for layout and spacing. Each element is a rectangular box
consisting of:
Content: The content inside the element (text, images, etc.).
Padding: Space between the content and the border.
Border: The boundary surrounding the padding (or content if no padding).
Margin: Space between the element and its neighbors.
Example
https://stackedit.io/app# 4/13
1/16/25, 11:46 AM StackEdit
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 15px;
}
The total width = content width + padding + border + margin.
Box Sizing
The box-sizing property controls how the dimensions of an element are calculated.
content-box : Default. Width/height includes only the content.
border-box : Width/height includes padding and border.
.box {
box-sizing: border-box;
}
4. Positioning
CSS provides various positioning methods to control element placement.
Types of Positioning
1. Static: Default position in the document flow.
position: static;
2. Relative: Positioned relative to its normal position.
position: relative;
top: 10px;
https://stackedit.io/app# 5/13
1/16/25, 11:46 AM StackEdit
left: 5px;
3. Absolute: Positioned relative to the nearest positioned ancestor.
position: absolute;
top: 50px;
left: 100px;
4. Fixed: Positioned relative to the viewport and does not scroll with the page.
position: fixed;
bottom: 0;
5. Sticky: Switches between relative and fixed based on scroll position.
position: sticky;
top: 0;
5. Flexbox
Flexbox is a layout model designed for arranging items in one-dimensional space.
Key Properties
display: flex; Enables flex context.
flex-direction : Defines the main axis direction (row, column).
justify-content : Aligns items along the main axis.
align-items : Aligns items along the cross axis.
flex-wrap : Controls whether items wrap onto multiple lines.
Example
https://stackedit.io/app# 6/13
1/16/25, 11:46 AM StackEdit
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
6. Grid Layout
CSS Grid is a two-dimensional layout system for creating complex designs.
Key Properties
display: grid; Enables grid context.
grid-template-rows and grid-template-columns : Defines grid structure.
gap : Defines spacing between grid items.
Example
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
7. Responsive Design
Responsive design ensures that web content adjusts to different screen sizes.
Techniques
Media Queries: Apply styles based on device width.
https://stackedit.io/app# 7/13
1/16/25, 11:46 AM StackEdit
@media (max-width: 600px) {
body {
background-color: lightgray;
}
}
Flexible Units: Use relative units like % , em , rem , and vw .
CSS Frameworks: Use frameworks like Bootstrap or Tailwind CSS.
8. Advanced CSS Techniques
Custom Properties (CSS Variables): Define reusable variables.
:root {
--primary-color: blue;
}
h1 {
color: var(--primary-color);
}
Transitions and Animations: Add smooth effects to elements.
div {
transition: background-color 0.3s;
}
div:hover {
background-color: yellow;
}
Pseudo-classes and Elements: Style dynamic or specific parts of elements (e.g.,
:hover , ::before ).
Clipping and Masking: Create complex shapes and effects.
https://stackedit.io/app# 8/13
1/16/25, 11:46 AM StackEdit
9. Performance Optimization
Use minified CSS files for faster loading.
Avoid unnecessary CSS selectors.
Use shorthand properties where possible.
Implement critical CSS for above-the-fold content.
Use modern tools like PostCSS and autoprefixers.
CSS IMP INTERVIEW QUESTIONS
1. What is CSS, and why is it used?
Answer: CSS (Cascading Style Sheets) is a stylesheet language used to describe
the presentation of HTML or XML documents. It controls the layout, colors,
fonts, and overall visual appearance of web pages.
2. How do you include CSS in an HTML document?
Answer: CSS can be included in an HTML document in three ways:
Inline CSS: Using the style attribute within HTML elements.
Internal CSS: Within a <style> tag inside the <head> section.
External CSS: Linking an external .css file using the <link> tag.
3. What is the CSS box model?
Answer: The CSS box model describes the rectangular boxes generated for
elements in the document tree and consists of:
Content: The actual content of the element.
Padding: The space between the content and the border.
Border: The surrounding area around the padding.
Margin: The outermost space that separates the element from others.
4. Explain the difference between class and id selectors in CSS.
https://stackedit.io/app# 9/13
1/16/25, 11:46 AM StackEdit
Answer:
- Class Selector ( . ): Targets multiple elements and is denoted by a dot followed by
the class name (e.g., .example ).
- ID Selector ( # ): Targets a single unique element and is denoted by a hash symbol
followed by the ID name (e.g., #example ).
5. What are pseudo-classes and pseudo-elements in CSS?
Answer:
- Pseudo-classes: Define the special state of an element (e.g., :hover , :active ).
- Pseudo-elements: Style specific parts of an element (e.g., ::before , ::after ).
6. How can you center a block element horizontally in CSS?
Answer: By setting the element’s margin-left and margin-right to auto and
specifying a width:
```css
.centered {
width: 50%;
margin-left: auto;
margin-right: auto;
}
```
```
7. What is the difference between padding and margin ?
Answer:
- Padding: The space between the content and the element’s border.
- Margin: The space outside the element’s border, separating it from other elements.
8. Explain the concept of specificity in CSS.
Answer: Specificity determines which CSS rule is applied when multiple rules could
apply to the same element. It’s calculated based on the types of selectors used: inline
styles, IDs, classes, attributes, and element types.
https://stackedit.io/app# 10/13
1/16/25, 11:46 AM StackEdit
9. What is the z-index property in CSS?
Answer: The z-index property specifies the stack order of positioned elements.
Elements with a higher z-index are displayed in front of those with a lower z-
index .
10. How do you apply a style to multiple selectors?
Answer: By separating selectors with a comma:
h1, h2, h3 {
color: blue;
}
```
11. What is the difference between inline , block , and inline-block elements?
Answer:
Inline: Does not start on a new line; width and height cannot be set.
Block: Starts on a new line; takes the full width available.
Inline-block: Behaves like an inline element but accepts width and height.
12. How can you make a list horizontal using CSS?
**Answer:** By setting the list items to display inline:
```css
li {
display: inline;
}
```
```
13. What are CSS preprocessors? Name a few.
https://stackedit.io/app# 11/13
1/16/25, 11:46 AM StackEdit
Answer: CSS preprocessors are scripting languages that extend CSS and compile into
regular CSS. Examples include SASS, LESS, and Stylus.
14. How do you select all paragraph elements inside a div?
Answer: Using the descendant selector:
```css
div p {
/* styles */
}
```
```
15. What is the purpose of the float property in CSS?
Answer: The float property is used to position an element to the left or right,
allowing text and inline elements to wrap around it.
16. Explain the use of media queries in CSS.
Answer: Media queries allow the application of CSS rules based on device characteristics
like width, height, and orientation, enabling responsive design.
17. What does the box-sizing property do?
Answer: The box-sizing property defines how the total width and height of an
element are calculated, including padding and borders. The border-box value
includes padding and border in the element’s total width and height.
18. How can you create a CSS triangle?
Answer: By manipulating the border property:
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
https://stackedit.io/app# 12/13
1/16/25, 11:46 AM StackEdit
border-bottom: 100px solid red;
}
```
19. What is the display property, and can you name a few of its values?
Answer: The display property specifies the display behavior of an element. Values
include none , block , inline , inline-block , flex , and grid .
20. How do you make a font bold in CSS?
Answer: By using the font-weight property:
p {
font-weight: bold;
}
```
https://stackedit.io/app# 13/13
