CSS

🌐 What is CSS?

CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to change fonts, colors, spacing, and positioning.

It works together with HTML, which defines the structure of a web page.

Advantages of CSS

Separation of Content and Style: CSS separates layout and design from HTML structure, making content easier to manage and update.

Better Maintainability: Since styles are centralized in a single CSS file, modifications can be made there and applied to the entire website.

Consistency Across Pages: A website's overall appearance and feel are guaranteed when external stylesheets are used.

Faster Page Load Times: CSS improves website performance by reducing the size of HTML files and enabling style sheet caching.

Support for Responsive Design: CSS allows websites to adjust to various screen sizes by supporting media queries and flexible layouts.

Better User Experience and Accessibility: By using CSS, developers can improve interaction, contrast, and readability for all users—including those with disabilities.

Increased Design Control: Compared to HTML alone, CSS offers much more precise control over layout, typography, color, animation, and other elements.

✅ CSS Syntax

The basic syntax of CSS consists of three main parts:

selector {

property: value;

}

📌 Breakdown:

Selector: The HTML element(s) you want to style.

Property: The style attribute you want to change (e.g., color, font-size).

Value: The value you assign to the property (e.g., red, 16px).

🧾 Example:

p {

color: blue;

font-size: 16px;

}

This example means:

Target all <p> elements,
Set the text color to blue,
Set the font size to 16 pixels.

Types of CSS (Cascading Style Sheet)

✅ Types of CSS (Cascading Style Sheets)

There are three main types of CSS based on how styles are applied to HTML:

1. Inline CSS

Applied directly to an HTML element using the style attribute.
Affects only that specific element.

✔️ Advantages: Quick to apply

❌ Disadvantages: Not reusable, harder to maintain

2. Internal CSS

Written inside a <style> tag within the <head> section of the HTML document.
Affects only the page where it's defined.

<head>

<style>

h1 {

color: blue;

}

</style>

</head>

✔️ Advantages: Useful for single-page styling

❌ Disadvantages: Doesn't apply to multiple pages

3. External CSS

Stored in a separate .css file, linked to the HTML using the <link> tag.
Can be used across multiple web pages.

<head>

</head>

✔️ Advantages: Best for maintainability, consistency, and reuse

❌ Disadvantages: Requires internet or file access to load the stylesheet

📝 Summary Table:

Type	Location	Scope	Maintenance
Inline	In HTML tag (style)	Single element	❌ Hard
Internal	<style> in <head>	Single page	⚠️ Medium
External	Separate .css file	Multiple pages	✅ Easy/Best

✅ CSS Colors

In CSS, you can apply color to text, backgrounds, borders, and more using different color formats.

🎨 Common CSS Color Properties:

color: sets the text color.
background-color: sets the background color.
border-color: sets the border color.

🧾 CSS Color Formats:

1. Named Colors

Use predefined color names.

<html>

<head>

<style>

#colorkeyword{

background-color: aqua;

padding: 10px;

}

</style>

</head>

<body>

<h3>Color Keyword - example</h3>

<p>As the keyword passed is aqua, the background will appear as aqua colored..</p>

This div element has a colored background based on the color keyword passed, i.e aqua.

</div>

</body>

</html>

2. Hexadecimal Colors

A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).

Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples of hexadecimal notation.

Example:

<html>

<head>

<style>

#hexcode {

background-color: #00ff00;

padding: 10px;

}

</style>

</head>

<body>

<h3>Hexadecimal code - example</h3>

<p>As the hexadecimal code is #00ff00 the background will appear green.</p>

This div element has a green background.

</div>

</body>

</html>

3. RGB Colors

This color value is specified using the rgb( ) property.It takes three values, one each for red, green, and blue.The value can be an integer between 0 and 255 or a percentage.

Example:

<html>

<head>

<style>

#rgbvalue {

background-color: rgb(255,0,255);

padding: 10px;

}

</style>

</head>

<body>

<h3>RGB - example</h3>

<p>As the rgb(255,0,255) is set the background will appear accordingly.</p>

This div element has a colored background based on the rgb values.

</div>

</body>

</html>

4. RGBA Colors

This color value is specified using the rgba( ) property.It takes four values, one each for red, green, and blue and the last value as the alpha (transparency) value.The alpha value can be any value between 0 and 1.

Example:

<html>

<head>

<style>

#rgbavalue {

background-color: rgba(255,0,255,0.2);

padding: 10px;

}

</style>

</head>

<body>

<h3>RGBA - example</h3>

<p>As the rgba(255,0,255,0.2) is set the background will appear with transparency value of 0.2.</p>

This div element has a colored background based on the rgba values.

</div>

</body>

</html>

5. HSL Colors

This color value is specified using the hsl() function.HSL stands for hue, saturation and lightness.Hue is represented in degrees (0-360), saturation and lightness are represented as percentages (0% - 100%).

<html>

<head>

<style>

#hslvalue {

background-color: hsl(355,70%,50%);

padding: 10px;

}

</style>

</head>

<body>

<h3>HSL - example</h3>

<p>As the hsl(355,70%,50%) is set the background will appear based on the hsl values passed.</p>

This div element has a colored background based on the hsl values hsl(355,70%,50%).

</div>

</body>

</html>

6. HSLA Colors

This color value is specified using the hsl() function.HSLA stands for hue, saturation, lightness and alpha.It takes four values, first for hue, second for saturation, third for lightness and fourth is the alpha (transparency) value.Hue is represented in degrees (0-360), saturation and lightness are represented as percentages (0% - 100%), and alpha value can be in between 0 and 1.

Example:

<html>

<head>

<style>

#hslavalue {

background-color: hsla(355,70%,50%,0.4);

padding: 10px;

}

</style>

</head>

<body>

<h3>HSLA - example</h3>

<p>As the hsla(355,70%,50%,0.4) is set the background will appear based on the hsla values passed, with high transparency.</p>

This div element has a colored background based on the hsl values hsla(355,70%,50%,0.4).

</div>

</body>

</html>

CSS Colors code

✅ Types of CSS Selectors

CSS offers several types of selectors to target HTML elements in different ways:

1. Type Selector (Element Selector)

Targets HTML elements by their tag name.

p {

color: blue;

}

2. Class Selector

Targets elements with a specific class attribute.

.intro {

font-size: 18px;

}

3. ID Selector

Targets a single element with a specific ID.

#header {

background-color: gray;

}

4. Universal Selector

Targets all elements on the page.

* {

margin: 0;

padding: 0;

}

5. Group Selector

Applies the same styles to multiple elements.

h1, h2, p {

font-family: Arial;

}

6. Descendant Selector

Targets elements inside a specific parent.

div p {

color: green;

}

7. Child Selector

Targets elements that are direct children of another element.

ul > li {

list-style-type: square;

}

8. Adjacent Sibling Selector

Selects an element that is immediately after another.

h1 + p {

margin-top: 0;

}

9. General Sibling Selector

Selects all siblings of a specified element.

h1 ~ p {

color: gray;

}

10. Attribute Selector

Selects elements based on attribute and value.

input[type="text"] {

border: 1px solid #ccc;

}

CSS Fonts

CSS provides several font-related properties that control the appearance of text on a webpage.

🔤 Font Style & Appearance

Font-family

Specifies the typeface for text. Can list multiple fonts as fallbacks.

font-family: "Arial", sans-serif;

2. font-size

Defines the size of the font. Supports units like px, em, rem, %, etc.

font-size: 16px;

3.font-style

Specifies whether text is normal, italic, or oblique.

font-style: italic;

4. Font-weight

Sets the thickness of characters. Accepts keywords or numeric values.

font-weight: bold;

5.font-variant

Controls the use of small-caps.

font-variant: small-caps;

6. Font-stretch

Adjusts the width of the font (if supported).

font-stretch: condensed;

📝 Shorthand Property

7 . font

A shorthand to set multiple font properties in one line (required order: style → variant → weight → size/line-height → family).

font: italic small-caps bold 16px/1.5 "Helvetica", sans-serif;

✨ Other Text-Related Properties

These aren't strictly font properties, but they affect how text is displayed:

line-height – Sets the spacing between lines.
letter-spacing – Adjusts space between characters.
word-spacing – Controls space between words.
text-transform – Alters capitalization (e.g., uppercase).
text-decoration – Underline, overline, strikethrough.

css interview questions

🔹 1. What is CSS and why is it used?

Answer: CSS (Cascading Style Sheets) is used to style HTML elements. It controls layout, colors, fonts, spacing, and more, separating content (HTML) from presentation (CSS).

🔹 2. What are the different types of CSS?

Answer:

Inline CSS – Written directly inside the HTML element using the style attribute.
Internal CSS – Defined within a <style> tag in the <head> section of an HTML document.
External CSS – Written in a separate .css file and linked using the <link> tag.

🔹 3. What is the difference between class and id in CSS?

Answer:

class is reusable and can be applied to multiple elements (.classname {}).
id is unique and should only be used once per page (#idname {}).

🔹 4. What is the CSS Box Model?

Answer: The Box Model describes how elements are structured:

Content – The actual text or image.
Padding – Space around content.
Border – Around the padding.
Margin – Space outside the border (spacing from other elements).

🔹 5. What is specificity in CSS?

Answer: Specificity determines which CSS rule is applied when there are multiple rules for the same element.
Order of specificity (lowest to highest):
Element < Class < ID < Inline style

🔹 6. How do you apply styles to multiple elements?

Answer: You can use:

Group selectors: h1, h2, p { color: blue; }
Class: .common-style { color: red; }
Attribute, descendant, or other combinators.

🔹 7. What are pseudo-classes?

Answer: Pseudo-classes define a special state of an element. Examples:

:hover – when the mouse is over an element
:focus – when an element is focused
:nth-child(n) – targets the nth child in a list

🔹 8. How can you center a div element?

Answer: Horizontally (block element):

div {
margin: 0 auto;
width: 50%;
}
Both horizontally & vertically (Flexbox):

.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

🔹 9. What is the difference between em, rem, %, and px?

Answer:

px – Fixed size (absolute unit).
em – Relative to the font-size of the parent.
rem – Relative to the root (html) font-size.
% – Relative to the parent element's size.

🔹 10. What is the difference between visibility: hidden and display: none?

Answer:

visibility: hidden hides the element but retains its space.
display: none hides the element and removes it from the layout.