CSS Detailed Notes

Made by: Harshit Mishra

Teaching Assistant
United Institute of Technology (UIT), Prayagraj
Index

1. Introduction to CSS

2. Advantages of CSS

3. CSS Syntax and Selectors

4. Ways to Include CSS

5. CSS Background Properties

6. Fonts in CSS

7. Colors in CSS

8. Borders, Padding, and Margins in CSS

9. Floating and Positioning Elements in CSS

10. CSS Gradients and Opacity

11. CSS Box Model

12. Display Properties

13. Responsive Design

14. CSS Transitions and Animations

15. Common CSS Layouts

1. Introduction to CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a
document written in HTML. CSS enables web developers to create visually engaging web pages by
separating content from design. This allows for the control of layout, colors, fonts, and overall visual
elements of a webpage.

Importance of CSS: CSS is essential for maintaining a consistent design across multiple web pages. By
separating the design elements from the HTML structure, web developers can easily update and manage
the appearance of their websites without altering the underlying content.

Real-life analogy: Think of CSS as clothing that changes your appearance. Your body (HTML) stays the
same, but how people see you (the webpage) is influenced by what you wear (CSS). Just like different
outfits can convey different messages or styles, CSS allows you to create a unique look and feel for your
website.

Example: Consider a website for a restaurant. The HTML might contain the text for the menu and the
images of dishes, while CSS can be used to set the background color, font styles, and spacing between
items, making the website visually appealing.
2. Advantages of CSS

CSS offers numerous benefits that make web development efficient and effective. Here are some of the
key advantages:

1. Saves Time: With CSS, you can write style rules once and apply them to multiple HTML pages.
This reduces the need for repetitive coding and makes changes easier.

2. Improves Page Load Speed: By using CSS, the amount of code in HTML files is reduced. Instead
of having inline styles in every element, you can define styles in one place and apply them
throughout, speeding up loading times.

3. Easy Maintenance: Updating styles becomes straightforward. You only need to modify the CSS
file to change styles across all pages that reference it, making site-wide updates easy.
4. Better Design Flexibility: CSS provides more design capabilities than HTML alone. You can easily
control layout, positioning, and responsiveness with CSS.

5. Multiple Device Compatibility: With CSS, you can create styles that adapt to various devices
(desktops, tablets, mobile phones) using media queries, ensuring a good user experience across
platforms.

6. Separation of Content and Presentation: This separation allows web designers and developers
to work independently. Designers can focus on the style while developers handle the HTML
structure.
Real-life example: Imagine a clothing store with a uniform for all employees. If the uniform design is
updated, everyone benefits from the new look without needing individual changes. CSS functions
similarly by applying consistent styles across multiple web pages.
3. CSS Syntax and Selectors

CSS rules are composed of selectors and declarations. The selector specifies which HTML elements the
styles apply to, while the declarations define the styles themselves.

CSS Syntax:

selector {

property: value;

For example:

h1 {

color: blue;

font-size: 20px;

}
Types of Selectors:

1. Type Selector: Targets an HTML tag. Example: h1, p.

o Real-life application: Use this selector to style all headings uniformly across a site.

h1 {

color: red;

2. Class Selector: Targets elements with a specific class attribute. Defined with a dot (.) before the
class name.

o Example: .classname

o Real-life application: You can style specific sections of a webpage using classes.

.highlight {

background-color: yellow;

3. ID Selector: Targets a unique element by its ID attribute. Defined with a hash (#) before the ID
name.

o Example: #idname

o Real-life application: Use an ID selector to apply styles to a single, unique element on

the page.

#main-header {

font-size: 24px;

4. Descendant Selector: Targets elements that are inside another element. Example: div p targets
all paragraphs within a div.

o Real-life application: This is useful for styling nested elements differently.

div p {

color: blue;

}
 5. Child Selector: Targets elements that are direct children of another element. Example: ul > li
applies styles only to list items that are direct children of a ul.

o Real-life application: Ensures that only immediate children are styled, allowing for more
control over your design.

ul > li {

list-style-type: square;

Real-life example: If you were to style a book, you might want all titles (h1 tags) to be the same font and
color (Type Selector), while specific chapters (Class Selector) could have a different background, and
footnotes (ID Selector) could have a unique styling.
4. Ways to Include CSS

There are several methods to include CSS in your HTML documents. Each method has its advantages and
use cases:

1. Inline CSS: This method involves using the style attribute within individual HTML elements. It's
suitable for quick, one-off changes to a single element.

<h1 style="color: red;">This is inline CSS</h1>

o Pros: Quick and easy for small changes.

o Cons: Can lead to repetitive code and does not promote reusability.

2. Embedded CSS: This method places CSS rules within the <style> tag in the <head> section of
your HTML document. This is useful for styling a single document.

<head>

<style>

body { background-color: lightgray; }

h1 { color: blue; }

</style>

</head>

o Pros: Good for single-page styles without affecting other pages.

o Cons: Styles won't apply to other HTML documents, limiting reusability.

 3. External CSS: This method links to an external CSS file, which is the best practice for applying
styles across multiple pages. The <link> element is used to reference the external file.

<head>

<link rel="stylesheet" type="text/css" href="styles.css">

</head>

o Pros: Promotes consistency and maintainability across multiple pages. Changes in one
CSS file reflect on all linked HTML documents.

o Cons: Requires an additional HTTP request to fetch the CSS file, which can slightly affect
load times.

4. Imported CSS: This method allows you to import an external CSS file into another CSS file using
the @import rule. This can also be used within <style> tags.

@import url("additional-styles.css");

o Pros: Can help organize stylesheets and reduce redundancy.

o Cons: Can slow down loading times if used excessively, as it adds multiple HTTP
requests.

Real-life analogy: If you consider how a restaurant operates, inline CSS is like a chef creating a special
dish for one customer, while embedded CSS is like a chef preparing a unique meal for a single event.
External CSS is akin to a standard menu that everyone can choose from, ensuring consistency in dining
experience, while imported CSS can be seen as the chef adding new recipes from guest chefs to their
existing menu.
5. CSS Background Properties

CSS provides various properties to customize the backgrounds of elements. These properties enhance
the visual appearance of web pages:

1. background-color: Sets the background color of an element. This is the simplest way to add
color.

body { background-color: lightblue; }

2. background-image: Allows you to set an image as the background for an element.

body { background-image: url('background.jpg'); }

3. background-repeat: Determines how the background image is repeated.

body { background-repeat: no-repeat; }

4. background-position: Defines the initial position of the background image.

body { background-position: center; }

5. background-attachment: Controls whether the background image scrolls with the page or
remains fixed.

body { background-attachment: fixed; }

Real-life example: Background properties are like choosing wallpaper for a room. You can decide the
color (background-color), a specific design (background-image), how that design repeats (background-
repeat), where it is positioned (background-position), and whether it stays in place as you scroll
(background-attachment).
6. Fonts in CSS

CSS allows customization of fonts to create visually appealing and readable text:

1. font-family: Sets a prioritized list of fonts for displaying text.

p { font-family: 'Arial', sans-serif; }

2. font-size: Specifies the size of the text.

p { font-size: 16px; }

3. font-style: Changes the style of the text (e.g., italic).

p { font-style: italic; }

4. font-weight: Specifies the boldness of the font.

p { font-weight: bold; }

5. font-variant: Adjusts whether text is displayed in small caps.

p { font-variant: small-caps; }

6. font: A shorthand property to set all font-related properties at once.

p { font: italic bold 20px Arial; }

Real-life example: Just like in a magazine, the headings, subheadings, and body text might have different
fonts, sizes, and styles. CSS allows you to control these aspects on your website, ensuring readability and
enhancing aesthetics.
7. Colors in CSS

CSS allows you to control the color of text and backgrounds, making your website visually appealing:

1. color: Defines the text color.

h1 { color: red; }

2. background-color: Sets the background color of an element.

p { background-color: yellow; }

3. Color Formats: CSS supports multiple color formats:

o Hexadecimal: #FF5733

o RGB: rgb(255, 87, 51)

o HSL: hsl(12, 100%, 60%)

o Named Colors: red, blue, green

Real-life example: In graphic design, colors are used to draw attention to certain elements. In CSS, you
can highlight or emphasize important parts of your webpage using appropriate colors.

8. Borders, Padding, and Margins in CSS

CSS allows fine control over the space around and inside elements:

1. Border: Defines the line around an element. You can set its width, style, and color.

p { border: 2px solid black; }

2. Padding: The space between the content and the border of an element.

p { padding: 20px; }

3. Margin: The space outside the border that separates elements.

p { margin: 30px; }

Real-life example: Padding is like a cushion between content and the frame, while the margin is like the
space around the frame and other objects on a wall. Properly using these properties can significantly
improve the layout and appearance of your webpage.
9. Floating and Positioning Elements in CSS

Floating and positioning allow precise layout control:

1. float: Moves an element to the left or right, allowing text to wrap around it.

img { float: right; }

2. position: Positions an element exactly where you want it on the page.

o relative: Positions relative to its normal position.

o absolute: Positions relative to the nearest positioned ancestor.

o fixed: Positions relative to the browser window.

div { position: absolute; top: 100px; left: 50px; }

Real-life example: Floating is like placing a photo on the right side of an article, allowing text to flow
around it. Positioning is like sticking a note on a specific spot on a whiteboard, regardless of other notes
around it.

10. CSS Gradients and Opacity

Gradients and opacity control the transparency and background effects:

1. Opacity: Controls the transparency of an element.

div { opacity: 0.5; }

2. CSS Gradients: Smooth transitions between two or more colors.

o Linear Gradients: A straight-line transition.

background: linear-gradient(to right, red, yellow);

o Radial Gradients: Circular transitions from a center point.

background: radial-gradient(circle, red, yellow);

Real-life example: Opacity is like the transparency of glass, where you can see through at different
levels. Gradients are like the sky changing colors at sunset, moving from one hue to another seamlessly.
11. CSS Box Model

The CSS box model describes how elements are structured in a rectangular box. Every HTML element can
be considered a box, and the box model consists of the following parts:

1. Content: The actual content of the box, where text and images appear.

2. Padding: The space between the content and the border. Padding can be set on all four sides.

.box {

padding: 20px;

3. Border: The line surrounding the padding (if any) and content. The border can have different
styles (solid, dashed, dotted).

.box {

border: 2px solid black;

4. Margin: The space outside the border that separates the box from other elements. You can set
different margins for each side.

.box {

margin: 30px;

Real-life example: Consider a gift box. The content is the gift itself, the padding is the wrapping around
the gift, the border is the box itself, and the margin is the space between this box and other boxes
around it.
12. Display Properties

CSS offers several display properties that define how elements are rendered on the page. Common
display properties include:

1. Block: Elements that occupy the full width available and start on a new line. Examples include
<div> and <h1>.

div {

display: block;

2. Inline: Elements that do not start on a new line and only take up as much width as necessary.
Examples include <span> and <a>.

span {

display: inline;

3. Inline-block: Elements that are inline but can have a width and height set. They maintain their
inline nature while allowing block-like styling.

img {

display: inline-block;

}
4. Flex: A modern layout model that allows responsive design. It can align items in a row or
column.

.container {

display: flex;

5. Grid: A layout model that provides a two-dimensional grid-based layout system. It’s ideal for
complex layouts.

.grid-container {

display: grid;

grid-template-columns: repeat(3, 1fr);

Real-life example: Display properties are like furniture arrangement in a room. Block elements are like
large furniture that takes up space and needs a separate area, while inline elements are like decorations
that can be placed alongside each other without taking up too much space.
13. Responsive Design

Responsive design is an approach that ensures web pages look good on all devices by using fluid grids,
flexible images, and media queries.

1. Media Queries: A CSS technique that applies styles based on the device's characteristics, such as
width, height, orientation, etc.

@media (max-width: 600px) {

body {

background-color: lightgray;

2. Fluid Grids: Using relative units (like percentages) instead of fixed units (like pixels) to create
layouts that adjust to the screen size.

3. Flexible Images: Ensuring images resize within their containing element to prevent overflow.

img {

max-width: 100%;

height: auto;

Real-life example: Consider a business that operates in multiple countries. They use a single brand
design that adapts to local markets. Similarly, responsive design ensures a website adapts to different
screen sizes and resolutions.
14. CSS Transitions and Animations

CSS transitions and animations allow you to create dynamic changes in CSS properties over time.

1. Transitions: A way to change property values smoothly over a given duration.

.box {

transition: background-color 0.5s ease;

.box:hover {

background-color: blue;

}
2. Animations: More complex than transitions, they allow you to define keyframes for multiple
style changes.

@keyframes myAnimation {

from { background-color: red; }

to { background-color: yellow; }

.box {

animation: myAnimation 2s infinite;

Real-life example: Think of a butterfly flapping its wings. The gradual changes in color can be compared
to transitions, while the entire flight pattern can be likened to animations.
15. Common CSS Layouts

CSS can be used to create various common layouts for web pages. Here are a few popular layout types:

1. Single Column Layout: The simplest layout with all content stacked vertically. Ideal for mobile
views.

.container {

width: 100%;

2. Two Column Layout: Often used for blogs, with a sidebar and main content area.

.sidebar {

float: left;

width: 25%;

.content {

float: right;

width: 75%;

3. Grid Layout: A versatile layout using CSS Grid to arrange items in rows and columns.

.grid-container {

display: grid;

grid-template-columns: repeat(3, 1fr);

}
 4. Flexbox Layout: Ideal for aligning items within a container. Flexbox can manage rows or columns
and space elements evenly.

.flex-container {

display: flex;

justify-content: space-between;

Real-life example: Different layouts can be likened to arranging furniture in a room. A single column is
like a hallway with items stacked neatly, while a two-column layout is akin to a living room with a sofa on
one side and a bookshelf on the other.