Scribd
Upload
3 views

Css Notes

The document provides notes on CSS including understanding CSS, making CSS files, linking stylesheets, writing CSS code, units like pixels and percentages, margins and padding, backgrounds, positioning, and flexbox. Key aspects covered include the different types of CSS linking, CSS boilerplate, and properties for flexbox layouts.

Uploaded by

tisir87933
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Css Notes

The document provides notes on CSS including understanding CSS, making CSS files, linking stylesheets, writing CSS code, units like pixels and percentages, margins and padding, backgrounds, positioning, and flexbox. Key aspects covered include the different types of CSS linking, CSS boilerplate, and properties for flexbox layouts.

Uploaded by

tisir87933
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

NOTES

CSS NOTES
FOR
BOOTCAMP

CREATED BY : LAKSHYA ROY


NOTES

CSS NOTES FOR BOOTCAMP

UNDERSTANDING CSS

CSS stands for Cascading Style Sheets. It's a


fundamental language used alongside HTML for web
development. While HTML defines the structure and
content of a web page, CSS controls how that content is
presented visually on a screen.

Basically it is used for styling the webpage.

MAKING CSS FILE

Open your chosen text editor and create a new


file.
Save the File with a .css Extension

UNDERSTANDING LINKING

INTERNAL STYLESHEET
NOTES

CSS NOTES FOR BOOTCAMP

EXTERNAL STYLESHEET

INLINE STYLES

CSS BOLIERPLATE CODE


NOTES

CSS NOTES FOR BOOTCAMP

UNDERSTANDING THE WAY OF WRITING CSS

OUTPUT

UNDERSTANDING WIDTH AND HEIGHT

OUTPUT
NOTES

CSS NOTES FOR BOOTCAMP

UNDERSTANDING UNITS PIXEL(PX), AND PERCENTAGE (%)

1. Pixels (px):

Pixels are the most basic unit for representing


dimensions on a screen.
One pixel represents a single dot or point that your
display can render.

2. Percentages (%):

Percentages are relative units, meaning their value is


based on another element's size.
In CSS, percentages are most commonly relative to
the width or height of the parent element that
contains them.

OUTPUT
NOTES

CSS NOTES FOR BOOTCAMP

UNDERSTANDING MARGIN AND PADDING

MARGIN

the space between two elements is known as margin.


You can set values for each direction independently.
There's also a shorthand property margin that can take
up to four values to set margins for all directions
simultaneously.
MARGIN: TOP, RIGHT, BOTTOM, LEFT;

OUTPUT
NOTES

CSS NOTES FOR BOOTCAMP

UNDERSTANDING MARGIN AND PADDING

PADDING

Padding creates space between the border of an element


and its content.
You can set values for each direction independently.

There's also a shorthand property padding that can take


up to four values to set padding for all directions
simultaneously.

OUTPUT
NOTES

CSS NOTES FOR BOOTCAMP

UNDERSTANDING BACKGROUND IMG AND THINGS


RELATED TO IT.

1. BACKGROUND-IMAGE:
This property specifies the image that will be used as the
background of an element.
2. BACKGROUND-SIZE:
This property defines how the background image is sized
and positioned within the element.
3. BACKGROUND-POSITION:
This property specifies the starting position of the
background image within the element's content box.

OUTPUT
NOTES

CSS NOTES FOR BOOTCAMP

UNDERSTANDING POSITION ABSOLUTE AND RELATIVE

Absolute and relative positioning are two fundamental


concepts in CSS for controlling the layout of web
elements on a page.
RELATIVE POSITIONING
An element with position: relative; stays in its normal
position in the document flow, but you can move it
relative to that position.

To move the element, you use properties like top, right,


bottom, and left along with values like pixels (px) or
percentages. Positive values move the element
down/right, negative values move it up/left.

OUTPUT
NOTES

CSS NOTES FOR BOOTCAMP

UNDERSTANDING POSITION ABSOLUTE AND RELATIVE

ABSOLUTE POSITIONING
When you use position: absolute; it's like taking that
element out of the regular lineup of elements on the
webpage.
You can use top, right, bottom, and left to tell this
element where to go. But unlike position: relative;, these
directions are measured from the edges of the nearest
parent that's not just flowing normally
NOTES

CSS NOTES FOR BOOTCAMP

UNDERSTANDING POSITION ABSOLUTE AND RELATIVE

OUTPUT
NOTES

CSS NOTES FOR BOOTCAMP

UNDERSTANDING FLEXBOX
Flexbox is a powerful and versatile layout model in CSS
that makes arranging elements on a web page much
easier
You have control over how the flex items distribute
themselves within the container and how they align
relative to each other and the container itself.

KEY FLEXBOX PROPERTIES:

display: flex: This property applied to the container


element enables flexbox mode for its children.
Direction Control: With flex-direction, you decide if the
children should line up horizontally like a row (row) or
stack up vertically like a column (column).
justify-content: This property controls how flex items are
distributed along the X-axis, which is typically the
horizontal direction (width).
align-items: This property determines how flex items are
aligned along the Y-axis, which is usually the vertical
direction (height).

EXAMPLE
CREATING THE STRUCTURE BEFORE IMPLEMENTING
FLEXBOX
NOTES

CSS NOTES FOR BOOTCAMP


NOTES

CSS NOTES FOR BOOTCAMP

CREATING THE STRUCTURE FOR THE FLEXBOX

just by adding the


display flex it already
got aligned in the x-
axis.

USING FLEX-DIRECTION
NOTES

CSS NOTES FOR BOOTCAMP

USING JUSTIFY CONTENT

just by adding the justify-content: center,


we can see that the child elements are
aligned at the center from the x-axis.
NOTES

CSS NOTES FOR BOOTCAMP

USING ALIGN ITEMS

just by adding the align-items: center,


we can see that the child elements are
aligned at the center from the y-axis.

LETS USE THE COMBINATION OF ALIGN ITEMS AND


JUSTIFY CONTENT.
NOTES

CSS NOTES FOR BOOTCAMP

we can see that, while using the


combination of align-items and justify-
content: center, make the child elements
center from the x-axis and y-axis.
And it's very much useful for making the
layouts.

You might also like