Scribd
Carica
3 visualizzazioni

CSS 1

Css cheat sheet

Caricato da

kaaviya1031
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
3 visualizzazioni

CSS 1

Css cheat sheet

Caricato da

kaaviya1031
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 32

INTERNPE INTERNSHIP/TRAINING PROGRAM

CSS 1(NOTES CONTENT)

Chapter 1: Introduction to CSS

PE
Imagine you're decorating a room. You have furniture, walls, and windows. Now, what if you want

to make it look stylish and unique? You'd probably use colors, patterns, and arrangements to

achieve that, right? Well, that's exactly what CSS (Cascading Style Sheets) does for web pages!

RN
​

​
What is CSS?
●

●
CSS is like the stylist for web pages. It's a language that makes your website look
attractive and organized.
It stands for "Cascading Style Sheets." The "cascading" part means that styles
can be applied in layers, and they can be overridden when needed.
Why Do We Need CSS?
● Imagine reading a book without paragraphs, headings, or colors. It'd be quite
confusing, right? CSS helps structure and beautify web pages for a better user
experience.
TE
● It separates the content (like text and images) from how it looks. This separation
makes it easier to change the appearance without altering the content.
​ How Does CSS Work?
● CSS works by selecting HTML elements and adding styles to them.
● For example, you can say, "Hey, all the headings in my web page should be blue
and bigger."
● You write these styles in a separate CSS file or directly within the HTML using
<style> tags.
​ CSS Syntax: Rules and Properties
IN

● CSS has a simple structure: rules. Each rule has a selector, a property, and a
value.
● Selector: It's like choosing which part of your web page you want to style. It could
be an element (like <h1>), a class (like .highlight), or an ID (like #header).
● Property: This tells CSS what aspect of the selected element you want to change.
It could be the color, font, size, and more.
● Value: It's the specific setting you want to apply to the property. For example,
color: blue;.
​ Linking CSS to HTML
● Just like giving your stylist a set of instructions, you link the CSS file to your
HTML document using the <link> tag.
● The <link> tag lives inside the <head> section of your HTML.
● It's like telling the web browser, "Hey, here's the style guide for my webpage!"
​ Inline CSS and Internal Styles
● If you want to apply styles directly to a specific HTML element, you can use inline
CSS.
● For internal styles, you can use the <style> tag within the HTML document itself.
● But usually, external CSS files are preferred for better organization and reusability.

In essence, CSS is the tool you use to make your web page visually appealing, just like how you

choose colors, patterns, and designs to make a room look fabulous. It's the art of presentation

PE
that transforms plain content into an eye-catching and enjoyable online experience.

RN
Page 2: CSS Syntax and Selectors

Imagine you're organizing a closet. You need labels to identify different types of clothes.

Similarly, CSS uses "selectors" to pick elements in your web page that you want to style. Let's dive
TE
into how it all works:

​ CSS Syntax: Rules and Declarations


● CSS is like a set of rules that the browser follows to style your web page.
● Each rule is made up of a "selector," a "declaration block," and inside it, you have
"declarations."
● The selector is like the label on your closet shelf. It tells the browser which
IN

element to style.
● The declaration block is like the area where you organize your clothes. It's
enclosed in curly braces {}.
● Inside the declaration block, you have "declarations" which consist of a "property"
and a "value."
● The property is like the type of clothes (e.g., color, font-size) you're styling.
● The value is like the specific style (e.g., red, 16px) you want for that property.
​ css

selector {selector {
property: value;
another-property: another-value;
}

​
​ Selectors: Choosing What to Style
● Elements Selector: Imagine you're labeling all the t-shirts in your closet. In CSS,

PE
you select elements by their names, like p for paragraphs, h1 for headings, and so
on.
● Class Selector: Sometimes, you have a specific group of clothes that you want to
label differently, like "summer collection." In CSS, you use classes to select
elements with a specific class name, like .summer.
● ID Selector: IDs are like unique tags for specific clothes, just like a favorite dress.
In CSS, you select elements by their IDs using #, like #favorite-dress.

RN​

​
● Combining Selectors: You can also combine selectors to target specific elements
more precisely.
Grouping and Nesting

css
● Grouping: Imagine you're labeling all the blue clothes. In CSS, you can group
selectors to apply the same style to multiple elements at once.

h1, h2, h3 {
color: blue;
TE
}

​
● Nesting: Just like organizing clothes within drawers, you can nest selectors within
each other. This is especially useful when styling elements within a specific
context.
​ css

.container p {
IN

font-size: 14px;
}

​
​ Pseudo-classes and Pseudo-elements
● Pseudo-classes: These are like extra labels for specific conditions, such as when
you're wearing clothes. For example, :hover applies styles when you hover over
an element with your mouse.
● Pseudo-elements: These are like adding a temporary label to the last item in a
row. They allow you to style parts of an element, like the first line or the first letter.
​ css
a:hover {
color: purple;
}

p::first-line {
font-weight: bold;
}

PE
In summary, CSS syntax is like a set of rules to tell browsers how to style your web page.

Selectors are like labels that help you choose which parts of your page to style. By understanding

these basics, you're ready to dive into the world of styling and make your web pages look

amazing!

RN
Page 3: Color and Background
TE
Imagine you're painting a picture. You'd choose colors for different parts, right? Well, in CSS, you

choose colors to make your web page vibrant and appealing. Let's explore how you can add

colors and backgrounds to your elements:

​ Color (color Property):


● Just like choosing a color for your clothes, you can set the color of your text using
the color property.
IN

● You can use named colors like "red," "blue," or "green." For example: color: red;.
● Or you can use hexadecimal codes like #FF5733 for more precise colors.
● RGB values (e.g., rgb(255, 87, 51)) and HSL values (e.g., hsl(15, 100%, 50%))
are other ways to express colors.
​ Background Color (background-color Property):
● Think of this as the paint you use to color the walls of your room (element).
● You apply background color to an element using the background-color property.
● Just like text color, you can use named colors, hexadecimal codes, RGB, or HSL
values.
​ Background Image (background-image Property):
● Imagine sticking a poster on your wall. In CSS, you can use background images to
decorate your element's background.
● You use the background-image property and provide the URL of the image. For
example: background-image: url("image.jpg");.
​ Background Size (background-size Property):
● This is like adjusting the size of your poster to fit your wall perfectly.
● You can use values like cover to make the image cover the entire element or
contain to fit it inside while maintaining its aspect ratio.
​ Background Position (background-position Property):

PE
● Imagine sliding your poster up, down, or to the side on your wall. With the
background-position property, you can position your background image
accordingly.
● You can use keywords like top, bottom, left, and right, or you can use
percentage values.
​ Multiple Backgrounds (background Shorthand):
● It's like putting multiple posters on your wall. You can stack background images
using the background shorthand property.
RN​

​
css
●

Copy code

.element {
You provide values for image URLs, sizes, positions, and more, all in one line.

background: url("image1.jpg") center top / cover,


url("image2.jpg") bottom left / contain,
linear-gradient(to right, red, blue);
}
TE

Adding color and background to your web page is like choosing the right colors for your canvas

and adding artistic patterns. It makes your content visually appealing and brings life to your

online creation!
IN

Page 4: Typography
Typography is like choosing the style of writing for your story. Just as different fonts, sizes, and

spacing affect how a book looks, CSS lets you control how the text on your web page appears.

Let's explore the world of typography:

​ Font Family (font-family Property):


● Think of font family as the "handwriting" of your text. It defines the style of letters
and characters.
● You can set the font family using the font-family property. For example:

PE
font-family: Arial, sans-serif;.
● The browser uses the first font in the list that the user's computer has. If not, it
uses the backup fonts.
​ Font Size (font-size Property):
● Font size is like choosing how big or small the letters in your story should be.
● You use the font-size property to set the size. For example: font-size: 16px;.
​ Font Weight (font-weight Property):

RN
​
●
●
This is like deciding whether your letters should be bold or light.
You use the font-weight property to make text bold or normal. For example:
font-weight: bold;.
Line Height (line-height Property):
●
●
Imagine setting the spacing between lines in your story. Line height is like that.
You use the line-height property to set the space between lines of text. For
example: line-height: 1.5;.
​ Text Decoration (text-decoration Property):
● Text decoration is like underlining or crossing out words in your story.
TE
● You can use text-decoration: underline; or text-decoration:
line-through; to add lines below or through text.
​ Text Transform (text-transform Property):
● This is like changing the case of your text. You can make letters uppercase,
lowercase, or capitalize the first letter.
● You use the text-transform property for this. For example: text-transform:
uppercase;.
​ Font Style (font-style Property):
● Font style is like slanting your handwriting. You can make text italic or normal.
IN

● You use the font-style property for this. For example: font-style: italic;.
​ Google Fonts and Custom Fonts:
● Just like choosing a unique pen for your writing, you can use custom fonts on
your website.
● Google Fonts provides a wide range of fonts you can easily include in your CSS.
● You link to the font in your HTML's <head> section and then use it in your CSS.
​

​
​ html

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
rel="stylesheet">

Typography in CSS is like adding your personal touch to the words on your webpage. It's the art

PE
of choosing the right "handwriting" that matches your content's tone and style, making it visually

appealing and engaging for your readers.

RN
Page 5: Box Model
Imagine you're wrapping presents. You have the gift itself, some padding to protect it,
a beautiful wrapping paper (border), and a space around it. In CSS, every element is
like a box, and the box model helps you control how much space it takes and how it's
presented on your web page. Let's unwrap the concept:
TE

​ Content Area:
● Think of this as the actual gift you're wrapping. It's the text, image, or
other content inside your element.
● The content area is where your text or images reside.
​ Padding:
● Padding is like the cushioning inside your gift box. It creates space
IN

between the content and the border.


● You can add padding using the padding property. For example:
padding: 10px;.
​ Border:
● Imagine the border as the decorative paper around your gift. It outlines
the content area and gives it a distinct look.
● You use the border property to add borders. For example: border: 1px
solid black;.
​ Margin:
● Margin is like the space you leave around the gift box when placing it
on a shelf. It creates distance between elements.
● You can add margin using the margin property. For example: margin:
20px;.
​ Total Space Calculation:
● The total space a box occupies includes content, padding, border, and
margin.
● For example, if you set a box's width to 200px, and you add 10px

PE
padding, a 2px border, and 20px margin, the actual width it'll take on the
page will be 242px (200 + 10 + 2 + 20).
​ Box Sizing: content-box vs border-box:
● By default, the width you set applies only to the content area. The
padding, border, and margin add up.
● With the border-box value for box-sizing, the padding and border are
included in the specified width.
RN
.element {
● It's like telling the browser to consider the total size of the gift box
you're defining.

box-sizing: border-box;
}

The box model in CSS is like shaping how your elements appear on the webpage. It's
the art of creating well-proportioned spaces, padding, borders, and margins around
TE
your content, making it look neat and visually appealing. Just like you carefully
arrange the elements inside a gift box, the CSS box model helps you arrange and
present your content beautifully on your web page.
IN
Page 6: Positioning and Layout

Imagine arranging furniture in a room. You place chairs, tables, and shelves to create a

comfortable and organized space. In CSS, positioning and layout are like arranging elements on

your web page to create a visually pleasing and structured design. Let's explore how this works:

PE
​ Position Property:
● The position property determines how an element is placed on the page. It's like
deciding where to put your furniture.
● The values for position are:
● static: Default value; elements follow the normal flow of the page.
● relative: Allows you to move an element relative to its normal position.
● absolute: Positions an element relative to its nearest positioned ancestor
(or the body if none exists).

RN
​
● fixed: Positions an element relative to the viewport (doesn't move when
you scroll).
● sticky: Acts like relative until a certain scroll point, then becomes
fixed.
Display Property:
● The display property defines how an element is displayed. It's like choosing the
type of furniture you're using.
● Common values include:
● block: Elements take up the entire width of their container (like a
bookshelf).
TE
● inline: Elements take up only as much width as needed (like a picture
hanging on a wall).
● inline-block: Combines aspects of both block and inline.
​ Floating Elements:
● Floating is like making elements float, similar to how you might position a floating
shelf on a wall.
● You use the float property to move an element to the left or right, allowing text
and other elements to wrap around it.
IN

● Floating is commonly used for creating layouts with multiple columns.


​ Clearing Floats:
● Just as you'd ensure there's enough space around a floating shelf, in CSS, you use
the clear property to prevent elements from wrapping around a floated element.
● For example, if you have a floating sidebar, you might clear the float to ensure
that content below it doesn't wrap around.
​
​

.sidebar {
float: left;
}

.content {
clear: left; /* Prevents content from wrapping around the floated sidebar */
}

​
​ Flexbox and Grid Layouts:
● Flexbox and Grid are modern layout techniques that make positioning elements
easier.

PE
● Flexbox is like arranging items on a shelf, allowing you to create flexible row or
column layouts.
● Grid is like creating a grid of shelves, giving you precise control over rows and
columns.
​ css

​ Copy code

}
RN
.container {
display: flex; /* Creates a flex container */
justify-content: space-between; /* Distributes items along the main axis */
align-items: center; /* Aligns items along the cross axis */

In a nutshell, positioning and layout in CSS are like arranging furniture in a room to create a
TE
comfortable and visually appealing space. By using positioning properties, display options,

floating, and advanced layout techniques like Flexbox and Grid, you can design web pages that

are organized, functional, and aesthetically pleasing.


IN

Page 7: Responsive Design

Imagine a shirt that magically adjusts its size based on who's wearing it. Responsive
design in CSS is like creating a webpage that adapts to different devices, like big
computer screens and small smartphones, ensuring an optimal viewing experience
for everyone. Let's explore how you can make your web page responsive:

​ Viewport Tag (<meta>):


● Just as you adjust your glasses to see clearly, you set up the viewport
tag to adjust how your web page fits on different devices.
● The <meta> tag with name="viewport" attribute tells the browser how
to scale and adjust the content to the screen size.

PE
​

<meta name="viewport" content="width=device-width, initial-scale=1.0">

​
​ Media Queries:
● Media queries are like having different sets of clothes for different
RN
​
occasions. In CSS, you use media queries to apply different styles
based on the screen size.
● You specify conditions using media types (e.g., screen, print) and
features (e.g., max-width, min-width).

@media (max-width: 768px) {


/* Styles for screens smaller than 768px */
TE
}

​
​ Flexible Layouts:
● Flexible layouts are like stretchy clothes that fit everyone perfectly.
They adapt to different screen sizes.
● Techniques like Flexbox and CSS Grid help you create flexible,
multi-column layouts that adjust gracefully.
IN

.container {
display: flex; /* Creates a flexible container */
flex-wrap: wrap; /* Allows items to wrap to the next line */
}

​
​ Images that Resize:
● Just as clothes should fit regardless of size, images on your webpage
should also adjust.
● Use the max-width: 100%; property to ensure images don't overflow
their containers and maintain their aspect ratios.
​

img {
max-width: 100%; /* Makes images responsive */

PE
height: auto; /* Maintains aspect ratio */
}

​
​ Fluid Typography:
● Typography is like choosing the right font size for different occasions.
With fluid typography, your text adjusts to different screen sizes.
RN
​

body {
● You can use relative units like em or rem to make font sizes responsive.

font-size: 1rem; /* A baseline font size */


}

@media (max-width: 768px) {


TE
body {
font-size: 0.9rem; /* Smaller font size for smaller screens */
}
}

Responsive design in CSS is like creating a versatile outfit that looks great on
IN

everyone, no matter their size or shape. By using viewport settings, media queries,
flexible layouts, and adjusting images and typography, you ensure that your website
provides a seamless and enjoyable experience for users on various devices.
Page 8: Transitions and Animations

Imagine your webpage is a magical book that transforms its pages smoothly when
you turn them. CSS transitions and animations let you add enchanting effects to

PE
elements, making them change color, size, or position gracefully. Let's explore how
you can bring this magic to your web page:

​ Transitions (transition Property):


● Transitions are like making a smooth transformation between two
pages of your magical book. It's a gradual change from one state to
another.
RN
​

​
● You use the transition property to specify which property you want to
transition, the duration, timing function, and delay.

.element {

transition: property duration timing-function delay;


}
TE
​
● Property: The property you want to transition, like color, width, etc.
● Duration: How long the transition should take, like 0.5s for half a
second.
● Timing Function: The speed curve of the transition, like ease-in-out
for a smooth start and end.
● Delay: How long to wait before the transition starts, like 0.2s.
IN

​ Animations (@keyframes Rule):


● Animations are like creating a sequence of magical transformations.
It's a series of changes over time, like a dance routine for elements.
● You define animations using the @keyframes rule, where you set up
different stages of the animation with percentages.
​

@keyframes animation-name {
0% { /* Starting state */ }
50% { /* Midway state */ }
100% { /* Ending state */ }
}

​
​ Applying Animations (animation Property):
● Once you have your animation defined, you use the animation property
to apply it to an element.
​

PE
.element {
animation: animation-name duration timing-function delay
iteration-count direction fill-mode;
}

RN ● Animation Name: The name of the animation you defined with


@keyframes.
● Duration: How long the animation should take.
● Timing Function: The speed curve of the animation.
● Delay: How long to wait before the animation starts.
● Iteration Count: How many times the animation should repeat.
● Direction: Whether the animation goes forward, backward, or
alternates.
● Fill Mode: How the animation behaves before and after it plays.
TE
​ Combining Transitions and Animations:
● You can even combine transitions with animations to create complex
effects.
● For example, you can transition the color of an element and
simultaneously animate its movement.
​
IN

.element {
transition: color 0.3s ease-in-out;
animation: move-and-fade 2s infinite alternate;
}

@keyframes move-and-fade {
0% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(100px); opacity: 0; }
}

​
Transitions and animations in CSS are like adding enchanting effects to your web
page, turning it into an interactive and captivating experience. By smoothly
transitioning between states and creating delightful animations using keyframes, you
can engage your visitors and make your web content come to life.

PE
RN
TE
IN
Page 9: Pseudo-classes and Pseudo-elements

Imagine having magical glasses that allow you to change the color of objects you look at. In CSS,

PE
pseudo-classes and pseudo-elements are like these magical tools that let you apply styles to

specific parts of your elements. Let's explore how you can use them to add special effects and

styling:

​ Pseudo-classes (:pseudo-class):

RN​
●

●
Pseudo-classes are like filters you apply to elements under certain conditions.
They allow you to style elements when they are in a specific state or interacted
with.
You use a colon followed by the pseudo-class name to target these states.
Pseudo-elements (::pseudo-element):
Pseudo-elements are like adding extra magical objects before or after elements.
They let you style parts of elements without adding extra HTML.
● You use double colons followed by the pseudo-element name to target these
parts.
TE
d;
}
/* Applying styles to links when hovered over */
a:hover {
color: blue;
}

/* Styling input fields when they are focused */


input:focus {
IN

border-color: green;
}

​
​

/* Adding a decorative element before a heading */


h1::before {
content: " 🌟";
}

/* Styling the first line of a paragraph */


p::first-line {
font-weight: bol

​ Common Pseudo-classes:
● :hover: When the element is hovered over with the mouse.
● :active: When the element is clicked.
● :focus: When the element gains focus (like input fields).
● :nth-child(): Selects elements based on their position within a parent element.
​ Common Pseudo-elements:

PE
● ::before: Adds content before the selected element.
● ::after: Adds content after the selected element.
● ::first-line: Targets the first line of a block of text.
● ::first-letter: Targets the first letter of a block of text.
​ Adding Decorative Elements:
● Just as you'd add ornaments to a special gift, you can use pseudo-elements to
add decorative content to your elements.
​
RN
/* Adding quotation marks before a blockquote */
blockquote::before {

}
content: "❝";

/* Adding icons to links */


a::before {
content: " 🔗";
TE
}

Pseudo-classes and pseudo-elements in CSS are like adding magical filters and extra

decorations to your elements without altering your HTML. By using these, you can create

interactive effects and add stylish details that enhance the overall look and feel of your web page
IN
Page 10: Flexbox

Imagine arranging items on a shelf in a way that they automatically adjust their positions to fit

perfectly. Flexbox in CSS is like having a magical shelf that arranges your webpage elements in a

flexible and organized manner, regardless of their sizes. Let's dive into how Flexbox works:

PE
​ Flex Container (display: flex;):

● Think of a flex container as a special shelf. You turn an element into a flex

container using the display: flex; property in its parent element's CSS.

● All direct child elements of this container become "flex items" that you can

arrange using Flexbox.

​
RN​
css

Copy code

.flex-container {

display: flex; /* Creates a flex container */

}
TE
​

​ Main and Cross Axes:

● Imagine your shelf has two rulers: one along the length and one along the width.

These are the main and cross axes.

● Flex items can be arranged either horizontally (main axis) or vertically (cross
IN

axis).

​ Justify Content (justify-content):

● This is like arranging items on the shelf horizontally. You control the distribution

and spacing of items along the main axis.

.flex-container {

justify-content: center; /* Centers items horizontally */


}

​ Align Items (align-items):

● Align items is like adjusting the height of items on the shelf. You control how

items align along the cross axis.

PE
.flex-container {

align-items: flex-start; /* Aligns items at the top of the container */

}
RN​

​ Flex Direction (flex-direction):

● Flex direction is like deciding whether your shelf reads left to right, right to left,

top to bottom, or bottom to top.

​
TE
.flex-container {

flex-direction: row-reverse; /* Arranges items from right to left */

}
IN

​ Flex Wrap (flex-wrap):

● Imagine your shelf can't hold all the items. Flex wrap controls whether items

should wrap to the next row or column.

.flex-container {

flex-wrap: wrap; /* Wraps items to the next line when necessary */


}

​ Flex Items (flex Property):

● Think of each item on the shelf as a box with flexibility. You control how much

space they take on the shelf.

PE
.flex-item {

flex: 1; /* Each item takes equal space */

}
RN​

Flexbox in CSS is like having a versatile shelf that adapts to different items and spaces. By

turning a container into a flex container and using properties like justify-content, align-items,

flex-direction, and flex, you can arrange your web page elements beautifully and make them

fit perfectly regardless of screen size.


TE
IN

Page 11: Grid Layout


Imagine you have a superpower that allows you to create a perfect grid of squares and

rectangles, arranging your elements in a neat and organized pattern. That's exactly what CSS Grid

Layout lets you do on your webpage. It's like having a magical blueprint that helps you place

elements exactly where you want them. Let's explore how to use this superpower:

​ Grid Container (display: grid;):


● A grid container is like a canvas where you'll place your elements. You turn an

PE
element into a grid container using the display: grid; property in its parent
element's CSS.
● This parent element's direct children become grid items, and you can control their
placement within the grid.
​

.grid-container {
display: grid; /* Creates a grid container */
}
RN​
​ Defining Rows and Columns:
● Think of your canvas as having rows and columns like graph paper. You define
these rows and columns using properties like grid-template-rows and
grid-template-columns.
​
TE
.grid-container {
grid-template-rows: 100px 200px; /* Two rows with specified heights */
grid-template-columns: 1fr 2fr; /* Two columns with proportional widths */
}

​
​ Placing Grid Items:
● Placing items on your grid is like positioning objects on a game board. You use
properties like grid-row and grid-column.
IN

.grid-item {
grid-row: 1 / 3; /* Item spans from row 1 to 3 */
grid-column: 2; /* Item is in the second column */
}

​
​ Grid Gaps (gap Property):
● Grid gaps are like empty spaces between the squares on your game board. You
use the gap property to create spacing between rows and columns.
​
.grid-container {
gap: 10px; /* Adds a 10px gap between rows and columns */
}

​
​ Grid Areas:
● Imagine marking areas on your canvas for specific elements. You can assign
names to these areas and place items within them using the grid-area property.
​

PE
.grid-item {
grid-area: header; /* Places the item in the "header" area */
}

​
​ Responsive Grids:
● Just as you'd adapt your grid to fit different sizes of paper, you can adjust your

RN ​
grid layout for different screen sizes using media queries.

@media (max-width: 768px) {


.grid-container {
grid-template-columns: 1fr; /* Single column on smaller screens */
}
}

​
TE

CSS Grid Layout is like having a magical blueprint that lets you create intricate and structured

layouts for your webpage. By turning a container into a grid container and using properties like

grid-template-rows, grid-template-columns, and grid-gap, you can arrange your elements like

a pro and achieve a visually pleasing and organized design.


IN

Page 12: CSS Variables (Custom Properties)


Imagine having a magic wand that allows you to set specific colors, sizes, and values that you

can use throughout your entire web page. That's what CSS Variables, also known as Custom

Properties, offer you. They're like placeholders for values that you can reuse and update easily,

making your styles more flexible and maintainable. Let's uncover the magic of CSS Variables:

​ Defining CSS Variables:


● Think of CSS Variables as containers where you store values. They start with two

PE
dashes -- followed by a name and can hold various types of values.
​ css

​ Copy code

:root {
--primary-color: #3498db; /* Defining a CSS Variable */
--font-size: 16px;
}
RN​
​ Using CSS Variables:
● Using the values stored in your CSS Variables is like taking the magic potion to
apply consistent styles across your webpage.
​ css

​ Copy code
TE
.element {
color: var(--primary-color); /* Using a CSS Variable */
font-size: var(--font-size);
}

​
​ Updating CSS Variables:
● The real magic happens when you want to change a value across your whole
webpage. You simply update the value of the variable, and all instances using it
IN

get updated instantly.


​ css

​ Copy code

:root {
--primary-color: #e74c3c; /* Updating the value */
}

​
​ Scope of CSS Variables:
●CSS Variables can be used in any part of your stylesheet, but they're often
declared in the :root selector to ensure global availability.
​ Fallback Values:
● Just like having a backup plan, you can provide a fallback value in case a variable
isn't defined or supported by a browser.
​ css

​ Copy code

.element {

PE
color: var(--highlight-color, #f39c12); /* Fallback to orange if variable isn't
defined */
}

​
​ Responsive Design:
● CSS Variables are incredibly useful for responsive design. You can change
variables based on different screen sizes for consistent adjustments.
RN ​

​
css

Copy code

@media (max-width: 768px) {


:root {
--font-size: 14px; /* Smaller font size on smaller screens */
}
}
TE
​

CSS Variables (Custom Properties) are like having a magical inventory of values that you can use

across your entire webpage. By defining, using, and updating variables, you create a more

organized and adaptable system for your styles, making your code easier to maintain and your

designs more consistent.


IN
Page 13: Combining Selectors and Specificity

Imagine you're getting ready for a special event, and you have a wardrobe full of clothes. You pick

the outfit that matches your style and occasion the best. In CSS, combining selectors and

understanding specificity is like choosing the right style for your elements in a crowded

stylesheet. Let's explore how to select elements effectively:

PE
​ Combining Selectors:

● Combining selectors is like creating a unique label for your outfit. You can

combine different types of selectors to target specific elements or groups.

RN
/* Selects all paragraphs inside a div with the class "container" */

.container p {

}
color: blue;

​ Specificity:
TE
● Specificity is like giving a weight to your outfit choice. It determines which style

rule takes precedence when multiple rules target the same element.

● Inline styles have the highest specificity, followed by IDs, classes, and elements.

/* More specific: Targets elements with class "highlight" inside a div with ID
IN

"content" */

#content .highlight {

background-color: yellow;

/* Less specific: Targets any element with class "highlight" */

.highlight {

background-color: green;
}

​ !important:

● Sometimes, you want an outfit to stand out no matter what. In CSS, you can use

!important to override other styles, but it's best used sparingly.

PE
/* Overrides other styles regardless of specificity */

.important-style {

color: red !important;

RN​

​ Multiple Classes:

● Just as you might wear a combination of clothes, elements with multiple classes

are like wearing different styles at once.

<div class="bold-text big-font">Hello</div>


TE

/* Combining classes to target specific elements */

.bold-text.big-font {

font-weight: bold;
IN

font-size: 24px;

​ Descendant Selectors:

● Descendant selectors are like selecting outfits based on their components. They

target elements that are descendants of another element.

​
/* Targets any list item inside an unordered list */

ul li {

list-style: square;

​ Child Selectors:

PE
● Child selectors are like choosing outfits only for specific family members. They

target elements that are direct children of another element.

/* Targets only the immediate children list items of a div */

div > ul > li {

}
RN
margin-left: 10px;

Combining selectors and understanding specificity in CSS is like curating the perfect outfit from

your wardrobe. By using different types of selectors and being aware of specificity, you can
TE
confidently style your webpage elements and ensure that the right styles are applied without any

fashion faux pas.


IN
Page 14: Transformations

Imagine you have the power to stretch, rotate, and even flip objects in a magical
world. In CSS, transformations let you bring this magic to your web page, allowing
you to change the appearance and position of elements. Let's uncover how
transformations work:

​ Translate (translate()):

PE
● Translating is like moving an object from one spot to another. You can
shift elements horizontally and vertically using the translate()
function.
​

.element {
transform: translate(20px, 10px); /* Move 20px to the right and 10px
RN
down */
}

​
​ Scale (scale()):
● Scaling is like resizing an object. You can make elements bigger or
smaller using the scale() function.
​
TE

.element {
transform: scale(1.2); /* Increases size by 20% */
}

​
​ Rotate (rotate()):
● Rotating is like spinning an object around. You can rotate elements by a
IN

certain degree using the rotate() function.


​ css

​ Copy code

.element {
transform: rotate(45deg); /* Rotates by 45 degrees */
}

​
​ Skew (skew()):
● Skewing is like tilting an object. You can tilt elements horizontally and
vertically using the skew() function.
​

.element {
transform: skewX(20deg); /* Tilts horizontally by 20 degrees */
}

PE
​
​ Transform Origin:
● The transform origin is like choosing the pivot point for your magic. It
determines the point around which transformations occur.
​

.element {

*/
}
RN
transform-origin: top right; /* Rotates around the top-right corner

​
​ Combining Transformations:
● Just as you might apply multiple spells in a magical story, you can
combine transformations to create complex effects.
TE
​

.element {
transform: translate(20px, 10px) rotate(45deg);
}

​
​ Transitioning Transformations:
IN

● Applying transformations smoothly is like making a magical change


gradual. You can add transitions to transformations for smooth
animations.
​

.element {
transition: transform 0.3s ease-in-out; /* Smoothly transitions
transformations */
}
.element:hover {
transform: scale(1.2);
}

Transformations in CSS are like having magical powers to manipulate the


appearance and position of your elements. By using functions like translate(),
scale(), and rotate(), you can create captivating animations and interactive

PE
effects that add a touch of enchantment to your web page.

RN
TE

Page 15: Filters and Blending

Imagine you have a magical lens that lets you adjust the colors and blend different elements

seamlessly. In CSS, filters and blending are like having these enchanting tools at your disposal.
IN

They allow you to modify the appearance of images and create captivating visual effects. Let's

explore how to use these magical techniques:

​ Filters:
● Filters are like applying special effects to your images, similar to how you'd alter a
photograph. You use filter functions to adjust colors, brightness, blur, and more.
​ css

​ Copy code

.image {
filter: grayscale(50%); /* Makes the image black and white */
}

​
● Common filter functions include blur(), brightness(), contrast(), saturate(),
sepia(), and more.
​ Blending:
● Blending is like overlaying two images to create a harmonious composition. You
use blending modes to control how the colors of overlapping elements interact.

PE
.overlay {
background-color: red;
mix-blend-mode: multiply; /* Multiplies the colors of overlapping
elements */
}

RN​
● Common blending modes include multiply, screen, overlay, soft-light, and
more.
Combining Filters and Blending:
● Just as you might combine different colors on a canvas, you can mix filters and
blending to achieve captivating effects.

.element {
filter: brightness(150%) contrast(120%);
mix-blend-mode: overlay;
}
TE

​
​ Backdrop Filter:
● The backdrop filter is like applying a filter to the background of an element. It
creates a frosted glass effect.

.element {
backdrop-filter: blur(10px) brightness(80%);
IN

​
​ Hover Effects:
● Applying filters and blending on hover is like revealing hidden magic when
someone interacts with an element.

.element {
transition: filter 0.3s;
}

.element:hover {
filter: grayscale(100%);
mix-blend-mode: screen;
}

Filters and blending in CSS are like adding a layer of enchantment to your web page visuals. By

using filter functions like blur(), brightness(), and contrast(), as well as blending modes like

PE
multiply and overlay, you can create stunning images and captivating compositions that draw

your visitors into a magical visual journey.

RN
TE
IN

Potrebbero piacerti anche