CSS (Cascading Style Sheets) By Prasad

History and Introduction:

History of CSS:
CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of web
documents.
CSS was introduced to separate the content and structure of web documents from their visual presentation.
The development of CSS began in the early 1990s to address the need for better control over web design and
layout.
The first CSS specification, CSS1, was released in 1996 as a way to define basic styles for HTML documents.
CSS2 followed in 1998, introducing more advanced features like positioning and print styles.
CSS3, a modular and continually evolving specification, started in the early 2000s, bringing a wide range of
new properties and capabilities.
Introduction to CSS:
CSS allows web developers to apply styles (such as fonts, colors, spacing, and layout) to HTML and XML
documents.
It is essential for creating visually appealing and consistent web designs.
CSS operates based on a set of rules, selectors, and declarations.
A CSS rule consists of a selector and a declaration block enclosed in curly braces.
The selector targets HTML elements, and the declaration block defines the styles.
Example of a Simple CSS Rule:
h1 {
color: blue;
font-size: 24px;
}
In this example, the selector is h1, which targets all <h1> elements in the HTML document.
The declaration block contains two declarations: one for text color and another for font size.
CSS Selectors:
CSS selectors are used to target HTML elements to apply styles. There are various types of selectors:
1. Type Selector:
The type selector selects elements by their HTML tag name.
It targets all elements of the specified type.
Example:
p{
color: red;
}
2. Class Selector:
The class selector selects elements with a specific class attribute.
It starts with a dot (.) followed by the class name.
Example:
.button {
background-color: #008CBA;
color: white;
}
3. ID Selector:
The ID selector selects a single element with a specific ID attribute.
It starts with a hash (#) followed by the ID name.
Example:
#header {
font-size: 36px;
text-align: center;
}
4. Descendant Selector:
The descendant selector selects an element that is a descendant of another element.
It is used to target elements within a specific context.
Example:
ul li {
list-style-type: square;
}
5. Child Selector:
The child selector selects an element that is a direct child of another element.
It uses the greater-than sign (>).
Example:
ul > li {
font-weight: bold;
}
6. Attribute Selector:
The attribute selector selects elements with a specific attribute and value.
It is enclosed in square brackets.
Example:
input[type="text"] {
border: 1px solid #ccc;
}
7. Pseudo-class Selector:
Pseudo-class selectors target elements based on their state or position.
They start with a colon (:).
Example:
a:hover {
color: purple;
}

CSS Pseudo-classes:
Pseudo-classes are used to select and style elements based on their special states or positions in relation to other
elements.
1. :hover:
Targets an element when the mouse pointer is over it.
Commonly used for links and interactive elements to provide hover effects.
2. :active:
Targets an element when it is being activated (e.g., clicked).
Useful for styling buttons and interactive elements during the click action.
3. :focus:
Targets an element when it gains focus, such as through keyboard navigation or clicking.
Typically used for form elements to indicate user interaction.
4. :visited:
Targets links that have been visited by the user.
Allows for styling visited links differently from unvisited ones.
Note: Some styling restrictions apply for security reasons.
5. :nth-child(n):
Selects elements based on their position within a parent element.
n can be a number or a formula (e.g., 2n for even elements).
Useful for styling alternating rows in tables or specific items in a list.
6. :nth-of-type(n):
Similar to :nth-child(), but selects elements of a specific type (e.g., p:nth-of-type(odd)).
Useful for targeting specific types of elements within a container.
7. :not(selector):
Selects elements that do not match the given selector.
Useful for excluding specific elements from styling rules.
Example: p:not(.special) selects all paragraphs except those with the class "special."
8. :first-child and :last-child:
Select the first and last child elements of a parent element, respectively.
Helpful for styling elements at the beginning or end of a container.
9. :only-child:
Targets elements that are the only child of their parent.
Useful for styling elements that are unique within a container.

CSS Pseudo-selectors:
Pseudo-selectors allow you to select specific parts of an element's content or attributes.
1. ::before and ::after:
Used to insert content before and after the content of an element.
Content is specified using the content property.
Useful for adding decorative elements or labels.
2. ::first-line:
Targets the first line of text within an element.
Allows you to style the initial text line differently.
Commonly used for adjusting text styles for headings or paragraphs.
3. ::first-letter:
Targets the first letter of text within an element.
Used to apply distinct styles to the initial letter.
Often used for decorative drop caps or special styling.
4. ::selection:
Targets the portion of text that the user selects with the cursor.
Allows you to style the selected text.
Limited browser support for certain properties like background-color and color.
5. ::placeholder:
Selects the placeholder text within input and textarea elements.
Used to style the text that provides hints or instructions within form fields.

CSS Box Model:

The CSS Box Model is a fundamental concept in web design and layout. It defines how elements on a web page
are structured and how their dimensions are calculated. It consists of four main components:
Content: This is the actual content of the element, such as text, images, or other media.
Padding: Padding is the space between the content and the element's border. It helps control the element's
spacing from its border.
Border: The border is a visible or invisible boundary around the padding and content. It can have a specified
width, style, and color.
Margin: Margin is the space between the element's border and other elements on the page. It creates spacing
between elements.
Box Model Properties:
width and height: These properties set the width and height of the content area.
padding: The padding property sets the padding around the content. You can specify padding values for
individual sides (e.g., padding-top, padding-right) or shorthand (e.g., padding: 10px 20px).
border: The border property sets the border around the padding and content. It includes properties like border-
width, border-style, and border-color.
margin: The margin property sets the margin around the border. Like padding, you can specify margin values
for individual sides or shorthand.

Text Styling CSS Properties:

CSS provides several properties for styling text within HTML elements:
font-family: Specifies the font family to be used for text.
font-size: Sets the size of the font.
font-weight: Defines the thickness or boldness of the font.
font-style: Specifies whether the font is italic, oblique, or normal.
text-align: Sets the horizontal alignment of text (e.g., left, right, center, justify).
line-height: Controls the spacing between lines of text.
color: Sets the text color.
text-decoration: Adds decorative styles to text (e.g., underline, overline, line-through).
text-transform: Transforms the text to uppercase, lowercase, or capitalize the first letter.

Background Styling CSS Properties:

CSS properties related to background styling allow you to control the appearance of an element's background:
background-color: Sets the background color of an element.
background-image: Specifies an image to be used as the background.
background-repeat: Defines how the background image should repeat (e.g., repeat, no-repeat, repeat-x,
repeat-y).
background-size: Sets the size of the background image (e.g., cover, contain, specific dimensions).
background-position: Positions the background image within the element (e.g., center, top right, specific
coordinates).
background-attachment: Determines whether the background image scrolls with the content or remains fixed.
CSS display Property:
The display property in CSS determines how an HTML element is visually rendered in the layout of a web
page. It defines the type of box an element generates, affecting its behavior and positioning. The display
property can take various values, each with its own characteristics.
Common display Values:
block:
Elements with display: block; generate a block-level box.
Block-level elements start on a new line and take up the full width of their parent container.
Examples include <div>, <p>, <h1>, and <form>.
inline:
Elements with display: inline; generate an inline-level box.
Inline-level elements do not start on a new line and only take up as much width as necessary.
Examples include <span>, <a>, <strong>, and <em>.
inline-block:
Combines aspects of both block and inline elements.
Inline-block elements do not start on a new line and can have a specific width and height.
Useful for creating inline elements with block-level styling.
none:
Elements with display: none; are not rendered on the page.
They are effectively invisible and do not occupy space in the layout.
Useful for hiding elements dynamically using JavaScript.
flex:
Introduced with CSS Flexbox.
Allows elements to be flexible in their size and layout within a container.
Excellent for creating responsive and flexible layouts.
grid:
Introduced with CSS Grid Layout.
Defines a grid container and its items, enabling complex two-dimensional layouts.
Powerful for creating grid-based designs.
table, table-row, table-cell, etc.:
These values generate elements that mimic the behavior of table elements in HTML.
Useful for creating table-like layouts when actual HTML tables are not suitable.
Additional display Values:
list-item:
Renders an element as a list item.
Typically used with <li> elements within ordered or unordered lists.
inline-table:
Combines aspects of both inline and table elements.
Useful for displaying tables inline with other content.
inherit:
Inherits the display property value from the parent element.
Allows elements to inherit display behavior.

CSS display for CSS Grid and Flexbox:

CSS Grid (display: grid;) and Flexbox (display: flex;) are two modern layout systems introduced in CSS. They
offer more advanced and flexible ways to create responsive layouts. When used, they affect the display
behavior of their children:
In a CSS Grid container, the children become grid items.
In a Flexbox container, the children become flex items.

CSS Flexbox (Flexible Box Layout):

CSS Flexbox, or simply Flexbox, is a powerful layout model introduced in CSS3 to efficiently distribute space
and align content in a container, even when their sizes are unknown or dynamic. It provides a more predictable
and efficient way to design layouts and align items within a container. Flexbox is particularly useful for creating
responsive and complex layouts with ease.
Key Concepts:
Flex Container:
To create a Flexbox layout, you need a flex container. It's an element that contains one or more flex items.
Apply display: flex; or display: inline-flex; to make an element a flex container.
Flex Items:
Flex items are the children of a flex container.
They are the elements you want to arrange within the container.
Flex items can be any HTML elements.
Main Axis and Cross Axis:
Flexbox operates along two axes: the main axis and the cross axis.
The main axis is the primary axis along which flex items are laid out.
The cross axis is perpendicular to the main axis.
Flex Container Properties:
display: flex;
Converts an element into a flex container.
By default, the main axis runs horizontally (left to right).
display: inline-flex;:
Converts an element into an inline flex container.
Useful for creating inline flex layouts.
flex-direction: Defines the direction of the main axis (row, row-reverse, column, column-reverse).
flex-wrap: Determines whether flex items should wrap onto multiple lines if they overflow the container.
justify-content: Aligns flex items along the main axis.
Options include flex-start, flex-end, center, space-between, and space-around, among others.
align-items: Aligns flex items along the cross axis.
Options include flex-start, flex-end, center, baseline, and stretch.
align-content: Controls alignment of multiple lines of flex items along the cross axis when they wrap.
Similar options to align-items.
Flex Item Properties:
flex-grow: Determines how much a flex item should grow relative to other items when extra space is available.
flex-shrink: Controls how much a flex item should shrink when there's not enough space.
flex-basis: Specifies the initial size of a flex item.
Can be set to a fixed value or a percentage.
flex (Shorthand): Combines flex-grow, flex-shrink, and flex-basis in one declaration.
order: Specifies the order in which flex items are displayed within the container.
Items with lower order values appear first.
Additional Concepts: Nested Flex Containers: You can have flex containers within flex containers, creating
nested layouts.
Alignment: You can align items both along the main axis and the cross axis, offering precise control over
alignment.
Responsive Design: Flexbox is ideal for creating responsive layouts that adapt to different screen sizes.
Browser Compatibility: Flexbox is well-supported in modern browsers, making it a reliable choice for layout
design.

CSS Grid Layout:

CSS Grid Layout, often referred to simply as Grid, is a powerful two-dimensional layout system introduced in
CSS3. It allows you to create complex grid-based layouts with precision, making it an ideal choice for
designing web page structures. Grid provides control over both rows and columns, enabling you to create
responsive and flexible designs.
Key Concepts:
Grid Container:
To create a Grid layout, you need a grid container, an element that contains grid items.
Apply display: grid; to make an element a grid container.
Grid Items: Grid items are the children of a grid container.
They are the elements you want to place within the grid.
Grid items can be any HTML elements.
Rows and Columns: Grid layouts consist of rows and columns, creating a grid of intersecting lines.
Rows run horizontally, and columns run vertically.
Grid Lines: Grid lines are the lines that define the rows and columns.
They can be referred to by their line numbers or names.
Grid Template: The grid template defines the structure of the grid, specifying the number of rows and columns
and their sizes.
You can define the grid template using properties like grid-template-rows and grid-template-columns.
Grid Tracks: Grid tracks are the spaces between grid lines, forming rows and columns.
They can have fixed sizes (e.g., 100px) or be flexible (e.g., 1fr).
Grid Gap: Grid gap is the space between grid tracks, both horizontally (column gap) and vertically (row gap).
It can be defined using properties like grid-column-gap and grid-row-gap.
Placement Properties: CSS Grid provides various properties for placing grid items within the layout:
grid-row and grid-column: Specify the position of an item within the grid using grid lines.
grid-area: Assigns an item to a named grid area, defined in the grid template.
grid-row-start, grid-row-end, grid-column-start, grid-column-end: Define the start and end positions for items.
Grid Template Areas: Grid areas are named sections of the grid defined in the grid template.
You can assign items to specific grid areas using grid-area.
Alignment: Grid allows precise alignment of items within the grid container using properties like justify-items,
align-items, justify-content, and align-content.
These properties control both horizontal and vertical alignment.
Responsive Design: CSS Grid is ideal for creating responsive layouts that adapt to different screen sizes.
You can use media queries to adjust the grid structure based on viewport size.
Browser Compatibility: CSS Grid is well-supported in modern browsers, making it a reliable choice for layout
design.
CSS Transitions: CSS transitions allow you to smoothly change the property values of an element over time.
They provide a smooth and gradual change between different states, such as when hovering over a button or
fading in an image.
Key Concepts:
Transition Property: To create a transition, you specify the CSS properties that should change smoothly using
the transition property.
Example: transition: property duration timing-function delay;
Transition Duration: The duration property defines how long the transition should take to complete.
It's specified in seconds (s) or milliseconds (ms).
Example: transition: opacity 0.5s;
Timing Function: The timing-function property defines the speed curve of the transition.
Common values include ease, linear, ease-in, ease-out, and ease-in-out.
Transition Delay: The delay property specifies a delay before the transition starts.
Useful for creating delayed animations.
Example: transition: opacity 0.5s ease 0.2s;
Shorthand: You can use the shorthand transition property to specify all transition settings at once.
Example: transition: property duration timing-function delay;
Transition Example:
/* Apply a transition to the opacity property */
button {
opacity: 0.7;
transition: opacity 0.3s ease;
}
/* Change opacity on hover */
button:hover {
opacity: 1;
}
CSS Animations:
CSS animations allow you to create more complex and dynamic animations. You can define keyframes with
specific properties and values to control the animation's behavior.
Key Concepts:
Keyframes: Keyframes are defined animation stages with specific property values.
Use the @keyframes rule to create keyframes with different percentages.
Example:
@keyframes slide-in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
Animation Property:
The animation property is used to apply an animation to an element.
You specify the animation name, duration, timing function, delay, iteration count, direction, and fill mode.
animation: name duration timing-function delay iteration-count direction fill-mode;
Animation Duration:
The duration property sets the length of the animation in seconds (s) or milliseconds (ms).
Example: animation: slide-in 1s ease;
Iteration Count:
Specifies how many times the animation should repeat.
Common values include infinite, 1, 2, etc.
Direction:
Defines whether the animation should play forwards (normal), backwards (reverse), or alternate (alternate)
between forwards and backwards.
Fill Mode:
Determines what styles should be applied before and after the animation.
Common values include forwards, backwards, both, and none.
Animation Example:
/* Define a keyframe animation */
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Apply the animation to an element */
#animated-element {
animation: fade-in 1s ease-in-out 0.2s infinite alternate;
}
Media Queries:
Media Queries are a fundamental part of responsive web design. They allow you to apply different styles and
layouts to your web pages based on various device characteristics such as screen size, resolution, and
orientation.
Key Concepts:
@media Rule:
Media Queries are defined using the @media rule in CSS.
They start with @media followed by specific conditions.
Example: @media screen and (max-width: 768px) { /* Styles for screens <= 768px */ }
Media Types:
Media Queries can target different media types such as screen, print, all, speech, etc.
The screen type is commonly used for web pages.
Media Features:
Media Queries use media features like width, height, orientation, resolution, and more to target specific device
characteristics.
Example: (max-width: 768px) targets screens with a maximum width of 768 pixels.
Logical Operators:
You can use logical operators like and, not, and only to combine media features.
Example: @media screen and (min-width: 768px) and (max-width: 1024px) { /* Styles for tablets */ }
Breakpoints:
Breakpoints are specific screen widths at which your layout and styles change.
Common breakpoints include mobile (320px - 767px), tablet (768px - 1023px), and desktop (1024px and
above).
Responsive Design:
Media Queries are crucial for creating responsive designs that adapt to various screen sizes and devices.
They help ensure a consistent user experience across different platforms.
Media Query Example:
/* Styles for screens with a maximum width of 768px */
@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
.header {
padding: 10px;
}
}
Mobile-First Design:
Mobile-First Design is a design approach that prioritizes the mobile user experience when creating a website. It
involves designing and building a website for mobile devices first and then progressively enhancing it for larger
screens.
Key Concepts:
Starting Small:
Begin the design process by creating a mobile-friendly layout and user interface.
Focus on simplicity, readability, and usability for small screens.
Progressive Enhancement:
As screen size increases, add additional design elements and features to enhance the desktop experience.
Use Media Queries to apply different styles and layouts at various breakpoints.
Performance Optimization:
Mobile-First Design encourages optimizing images and assets for smaller screens, which can improve page
load times for all users.
Content Prioritization:
Prioritize the most essential content and functionality for mobile users.
Ensure that critical information is accessible without excessive scrolling or clicking.
User Experience:
Focus on providing a seamless and enjoyable experience for mobile users.
Test and refine the design on different devices and browsers.
Flexibility and Adaptability:
Mobile-First Design sets the foundation for creating responsive and adaptable websites that work well on a
variety of devices.
Benefits of Mobile-First Design:
Improved mobile user experience.
Faster page load times.
Enhanced SEO rankings (Google favors mobile-friendly sites).
Better accessibility for users with disabilities.
A foundation for creating responsive and future-proof websites.