CSS is the language we use to style an Html document . It describes how Html elements should be displayed.
CSS is the language we use to style a Web page.
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes
The image below shows the same page with and without CSS.
A CSS rule consists of a selector and a declaration block:
Eg:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.
There are three ways of inserting a style sheet:
With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
External styles are defined within the <link> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An external style sheet can be written in any text editor, and must be saved with a .css extension.
The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
Inline styles are defined within the "style" attribute of the relevant element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
CSS selectors are used to target and select HTML elements so that styles (CSS rules) can be applied to them.
They act like a bridge between your HTML structure and your CSS styling.
π Example:
p {
color: blue;
}
This selector targets all <p> elements and makes their text blue.
CSS selectors are mainly divided into 5 categories:
These selectors target elements based on basic identifiers like name, id, or class.
Selects elements by tag name.
h1 {
color: red;
}
Selects a unique element with a specific id.
#header {
background-color: black;
}
π Note: ID must be unique in a page.
Selects elements with a specific class.
.box {
border: 1px solid gray;
}
π Multiple elements can share the same class.
Selects all elements.
* {
margin: 0;
padding: 0;
}
Apply same style to multiple elements.
h1, p, div {
color: green;
}
These selectors define relationships between elements.
Selects all matching elements inside another element.
div p {
color: blue;
}
π Targets all <p> inside <div>
Selects direct children only.
div > p {
color: red;
}
Selects the next immediate sibling.
h1 + p {
color: orange;
}
Selects all siblings after an element.
h1 ~ p {
color: purple;
}
Used to define a special state of an element.
a:hover {
color: red;
}
π When user hovers over a link
input:focus {
border: 2px solid blue;
}
li:first-child {
color: green;
}
li:last-child {
color: blue;
}
li:nth-child(2) {
color: red;
}
Used to style specific parts of elements.
p::first-letter {
font-size: 30px;
}
p::first-line {
color: blue;
}
::selection {
background: yellow;
}
p::before {
content: "π ";
}
p::after {
content: " β";
}
Select elements based on attributes or attribute values.
input[type="text"] {
border: 1px solid gray;
}
a[target="_blank"] {
color: red;
}
img[alt] {
border: 2px solid black;
}
:is() Used to group multiple selectors cleanly.
:is()
section h1,
section h2,
section h3{
color:red;
}
:is()
section :is(h1,h2,h3){
color:red;
}
Much cleaner.
:where() Looks similar to :is()
BUTβ¦
Specificity becomes:
ZERO (0)
:where(h1,h2,h3){
margin:0;
}
:not() Select everything EXCEPT something.
button:not(.primary){
background:gray;
}
Meaning:
Select all buttons EXCEPT .primary
In CSS, colors are specified by using a predefined color name, or with a RGB, HEX, HSL, RGBA, HSLA value.
You can set the background color for HTML elements:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
You can set the color of text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
You can set the color of borders:
<h1 style="border:2px solid Tomato;">Hello World</h1>
An RGB color value represents RED, GREEN, and BLUE light sources.
In CSS, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
Experiment by mixing the RGB values below:
rgb(255, 99, 71)
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
Experiment by mixing the RGBA values below:
rgba(255, 99, 71, 0.5)
A hexadecimal color is specified with: #RRGGBB.
In CSS, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).
To display black, set all values to 00, like this: #000000.
To display white, set all values to ff, like this: #ffffff.
Experiment by mixing the HEX values below:
#ff6347
Sometimes you will see a 3-digit hex code in the CSS source.
The 3-digit hex code is a shorthand for some 6-digit hex codes.
The 3-digit hex code has the following form:
#rgb
Where r, g, and b represent the red, green, and blue components with values between 0 and f.
The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for each component. So, if we have #ff00cc, it can be written like this: #f0c.
Here is an example:
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
}
HSL stands for hue, saturation, and lightness.
In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel (from 0 to 360):
Saturation is a percentage value: 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage; 0% is black, 50% is neither light or dark, 100% is white.
Experiment by mixing the HSL values below:
hsl(0, 100%, 50%)
Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray.
50% is 50% gray, but you can still see the color.
0% is completely gray; you can no longer see the color.
The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) and 100% means full lightness (white).
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
Experiment by mixing the HSLA values below:
hsla(0, 100%, 50%, 0.5)
CSS units define size, spacing, and layout.
π Used in:
Example:
div {
width: 200px;
}
Here, px is the unit.
There are 2 main categories:
Fixed size (does NOT change)
Changes based on screen / parent / root
.box {
width: 200px;
}
1px = 1 screen pixel
Not responsive
Other Absolute Units (Rare)
.container {
width: 50%;
}
π Relative to parent element
.parent {
width: 400px;
}
.child {
width: 50%; /* = 200px */
}
.parent {
font-size: 20px;
}
.child {
font-size: 2em; /* = 40px */
}
π 1em = parent font-size
It can stack and grow unexpectedly
.parent {
font-size: 20px;
}
.child {
font-size: 2em; /* 40px */
}
.grandchild {
font-size: 2em; /* 80px π΅ */
}
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* = 32px */
}
π Always based on <html>
div {
width: 50vw;
}
π 50% of screen width
div {
height: 100vh;
}
π Full screen height
.hero {
height: 100vh;
}
π Full screen hero section
div {
width: 50vmin;
}
π Based on smaller/larger screen dimension
clamp() β RESPONSIVE WITH LIMITSclamp(MIN, PREFERRED, MAX)
π Think like this:
βValue should growβ¦ but NOT go below MIN and NOT exceed MAXβ
font-size: clamp(16px, 2vw, 32px);
calc() β DYNAMIC CALCULATIONcalc(expression)
You can do math inside CSS:
+-*/width: calc(100% - 50px);
Letβs say:
π 100% = 1000px
Now:
1000px - 50px = 950px
π Final width = 950px
.container {
width: calc(100% - 40px);
}
π Leaves space for padding/margin
.box {
left: calc(50% - 100px);
}
π Moves element to center
.col {
width: calc(100% / 3);
}
π 3 equal columns
The color property is used to set the color of the text. The color is specified by:
In this example, we define both the background-color property and the color property:
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
The text-align property is used to set the horizontal alignment of a text.
This property can have one of the following values:
left - Aligns the text to the leftright - Aligns the text to the rightcenter - Centers the textjustify - Stretches the lines so that each line has equal widthWhen the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):
div {
text-align: justify;
}
The text-align-last property specifies how to align the last line of a text.
This property can have one of the following values:
auto - Default value. The last line is justified and aligned leftleft - The last line is aligned to the leftright - The last line is aligned to the rightcenter - The last line is center-alignedjustify - The last line is justified as the rest of the linesstart - The last line is aligned at the start of the lineend - The last line is aligned at the end of the lineDifferent alignment of the last line in three <p> elements:
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
The vertical-align property sets the vertical alignment of an element.
This property can have one of the following values:
baseline - Default value. The element is aligned with the baseline of the parentlength/% - Raises or lower an element by the specified length or percentsub - The element is aligned with the subscript baseline of the parentsuper - The element is aligned with the superscript baseline of the parenttop - The element is aligned with the top of the tallest element on the linetext-top - The element is aligned with the top of the parent element's fontmiddle - The element is placed in the middle of the parent elementbottom - The element is aligned with the lowest element on the linetext-bottom - The element is aligned with the bottom of the parent element's fontThe CSS text-decoration property is used to control the appearance of decorative lines on text.
It is a shorthand property for the following individual properties:
The CSS text-decoration-line property sets the type of decoration line added to the text.
This property can have one or more of the following values:
none - Default value. Displays no decoration lineunderline - The decoration line is displayed under the textoverline - The decoration line is displayed over the textline-through - The decoration line is displayed through the textTip: You can combine multiple values, like overline and underline to display lines both over and under a text.
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}
The CSS text-decoration-color property is used to set the color of the decoration line.
Add different colors to the decoration line:
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}
The text-decoration-style property sets the style of the text decoration (like solid, wavy, dotted, dashed, double).
Tip: Also look at the text-decoration property, which is a short-hand property for text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness.
The text-decoration-thickness property specifies the thickness of the decoration line.
The CSS text-transform property is used to control the capitalization of text in an element.
It can be used to transform a text into uppercase or lowercase letters, or capitalize the first letter of each word, without changing the original content in HTML.
This property can have one of the following values:
none - No transformation. Text renders as it iscapitalize - Transforms the first character of each word to uppercaseuppercase - Transforms all characters to uppercaselowercase - Transforms all characters to lowercaseCSS has several properties to control text spacing.
In this chapter you will learn about the following properties:
The CSS text-indent property is used to specify the indentation of the first line in a text-block.
Tip: Negative values are allowed. The first line will be indented to the left if the value is negative.
Indent the first line of text in a text-block:
p {
text-indent: 50px;
}
The CSS letter-spacing property is used to specify the space between the characters in a text.
Tip: Negative values are allowed.
Increase and decrease the space between characters:
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}
The CSS line-height property is used to specify the space between lines.
Note: Negative values are not allowed.
Specify the space between lines:
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
The CSS word-spacing property is used to specify the space between the words in a text.
Tip: Negative values are allowed.
Increase and decrease the space between words:
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}
The CSS white-space property specifies how white-space inside an element is handled.
This property can have one of the following values:
normalnowrappreHow to disable text wrapping inside an element
p {
white-space: nowrap;
}
The text-shadow property adds shadow to text.
In its simplest use, you only specify the horizontal and the vertical shadow.
In addition, you can add a shadow color and blur effect.
Horizontal and vertical shadow:
h1 {
text-shadow: 2px 2px;
}
Horizontal and vertical shadow, with color:
h1 {
text-shadow: 2px 2px red;
}
ο»ΏHorizontal and vertical shadow, with color and blur effect:
h1 {
text-shadow: 2px 2px 5px red;
}
The text-shadow property also accepts multiple shadows for an element. Define each shadow in a comma-separated list.
The following example shows a red and blue neon glow shadow:
Text-shadow with red and blue neon glow:
h1 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
The CSS background properties are used to add background effects for elements.
In these chapters, you will learn about the following CSS background properties:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground (shorthand property)The background-color property specifies the background color of an element.
The background color of a page is set like this:
body {
background-color: lightblue;
}
With CSS, a color is most often specified by:
Look at CSS Color Values for a complete list of possible color values.
You can set the background color for any HTML elements:
Here, the <h1>, <p>, and <div> elements will have different background colors:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent:
div {
background-color: green;
opacity: 0.3;
}
Note: When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read.
If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
Set the background image for a page:
body {
background-image: url("paper.gif");
}
ο»ΏThe background image can also be set for specific elements, like the <p> element:
p {
background-image: url("paper.gif");
}
The background-repeat property sets if/how a background image will be repeated.
By default, a background-image is repeated both vertically and horizontally.
Some images should be repeated only horizontally or vertically, or they will look strange
If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
Tip: To repeat an image only vertically, use background-repeat: repeat-y;
Showing the background image only once is also specified by the background-repeat property:
Show the background image only once:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
The background-position property is used to set the starting position of the background image.
By default, a background-image is placed at the top-left corner of an element.
Position the background image in the top-right corner:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
ο»Ώ
The background-size property specifies the size of the background image in an element.
It controls how the image is scaled, stretched, or fitted inside the container.
The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):
Specify that the background image should be fixed:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Specify that the background image should scroll with the rest of the page:
body {
background-attachment: scroll;
}
Set the text color of the <div> element to red, but keep the initial color for <h1> elements:
div {
color: red;
}
h1 {
color: initial;
}
The initial keyword is used to set a CSS property to its default value.
The initial keyword can be used for any CSS property, and on any HTML element.
Set the text-color for <span> elements to blue, except those inside elements with class="extra":
span {
color: blue;
}
.extra span {
color: inherit;
}
The inherit keyword specifies that a property should inherit its value from its parent element.
The inherit keyword can be used for any CSS property, and on any HTML element.
To shorten the code, it is possible to specify all the background properties in one single property. This is called a shorthand property.
Instead of writing:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
You can use the shorthand property background:
Use the shorthand property to set all the background properties in one declaration:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
The background property is a shorthand property for the following properties:
background-colorbackground-imagebackground-positionbackground-sizebackground-repeatbackground-attachmentbackground-originbackground-clipIf some of the property values are missing, they will be set to their initial (default) values.
backdrop-filterBlurs the background behind the element.
backdrop-filter: blur(10px);
Element stays clear.
Background becomes blurry.
filterAffects the element itself.
filter: blur(10px);
Entire element becomes blurry.
The CSS border properties allow you to specify the style, width, and color of an element's border.
The border-style property specifies what kind of border to display.
The following values are allowed:
dotted - Defines a dotted borderdashed - Defines a dashed bordersolid - Defines a solid borderdouble - Defines a double bordergroove - Defines a 3D grooved border. The effect depends on the border-color valueridge - Defines a 3D ridged border. The effect depends on the border-color valueinset - Defines a 3D inset border. The effect depends on the border-color valueoutset - Defines a 3D outset border. The effect depends on the border-color valuenone - Defines no borderhidden - Defines a hidden borderThe border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:
Demonstration of the different border widths:
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
The border-color property is used to set the color of the four borders.
The color can be set by:
Note: If border-color is not set, it inherits the color of the element.
Demonstration of the different border colors:
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
The color of the border can also be specified using a hexadecimal value (HEX):
p.one {
border-style: solid;
border-color: #ff0000; /* red */
}
Or by using RGB values:
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}
You can also use HSL values:
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}
From the examples on the previous pages, you have seen that it is possible to specify a different border for each side.
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):
In the example below we use the four properties above to set the style of each border side:
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
ο»ΏWe can also use the shorthand border-style property to achieve the same result.
The example below gives the same result as the example above:
p {
border-style: dotted solid;
}
Like you saw in the previous page, there are many properties to consider when dealing with borders.
To shorten the code, it is also possible to specify all the individual border properties in one property.
The border property is a shorthand property for the following individual border properties:
border-widthborder-style (required)border-colorp {
border: 5px solid red;
}
You can also specify all the individual border properties for just one side:
p {
border-left: 6px solid red;
}
The border-radius property is used to add rounded borders to an element:
p {
border: 2px solid red;
border-radius: 5px;
}
The border-radius property defines the radius of the element's corners.
Tip: This property allows you to add rounded corners to elements!
This property can have from one to four values. Here are the rules:
Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third
value applies to bottom-right corner, and fourth value applies to bottom-left corner)
Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner)
Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners)
One value - border-radius: 15px; (the value applies to all four corners, which are rounded equally
The CSS margin properties are used to create space around elements, outside of any defined borders.
Margins define the distance between an element's border and the surrounding elements.
With CSS, you have full control over the margins. CSS has properties for setting the margin for each individual side of an element (top, right, bottom, and left), and a shorthand property for setting all the margin properties in one declaration.
CSS has properties for specifying the margin for each side of an element:
margin-top - sets the top margin of an elementmargin-right - sets the right margin of an elementmargin-bottom - sets the bottom margin of an elementmargin-left - sets the left margin of an elementAll the margin properties can have the following values:
Tip: Negative values are also allowed.
To shorten the code, it is possible to specify all the margin properties in one declaration.
The margin property is a shorthand property for the following individual margin properties:
Here is how it works:
If the margin property has four values:
Use the margin shorthand property with four values:
p {
margin: 25px 50px 75px 100px;
}
If the margin property has three values:
Use the margin shorthand property with three values:
p {
margin: 25px 50px 75px;
}
If the margin property has two values:
Use the margin shorthand property with two values:
p {
margin: 25px 50px;
}
If the margin property has one value:
Use the margin shorthand property with one value:
p {
margin: 25px;
}
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
Use margin: auto:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
Margin collapse is when two margins collapse into a single margin.
Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.
Note: Margin collapse only happens with top and bottom margins! Not left and right margins!
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left), and a shorthand property for setting all the padding properties in one declaration.
CSS has properties for specifying the padding for each side of an element:
padding-top - sets the top padding of an elementpadding-right - sets the right padding of an elementpadding-bottom - sets the bottom padding of an elementpadding-left - sets the left padding of an elementAll the padding properties can have the following values:
Note: Negative values are not allowed.
Set different padding for all four sides of a <div> element:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
To shorten the code, it is possible to specify all the padding properties in one declaration.
The padding property is a shorthand property for the following individual padding properties:
Here is how it works:
If the padding property has four values:
Use the padding shorthand property with four values:
div {
padding: 25px 50px 75px 100px;
}
If the padding property has three values:
Use the padding shorthand property with three values:
div {
padding: 25px 50px 75px;
}
If the padding property has two values:
Use the padding shorthand property with two values:
div {
padding: 25px 50px;
}
If the padding property has one value:
Use the padding shorthand property with one value:
div {
padding: 25px;
}
The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model).
So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.
Here, the <div> element is given a width of 300px. However, the actual width of the <div> element will be 350px (300px + 25px of left padding + 25px of right padding):
div {
width: 300px;
padding: 25px;
}
The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.
The box-sizing property can have the following values:
content-box - This is default. The width and height properties includes only the content (border and padding are not included)border-box - The width and height properties includes content, padding and borderSo, to keep the width at 300px, no matter the amount of padding, you can use the box-sizing: border-box;. This causes the element to maintain its actual width; if you increase the padding, the available content space will decrease.
Use the box-sizing property to keep the width at 300px, no matter the amount of padding:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
The height and width properties are used to set the height and width of an element.
The height and width do not include padding, borders, or margins. It sets the height and width of the area inside the padding, border, and margin of the element.
The height property sets the height of an element.
The height of an element does not include padding, borders, or margins!
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.
If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.
Note: The min-height and max-height properties override the height property.
The width property sets the width of an element.
The width of an element does not include padding, borders, or margins!
Note: The min-width and max-width properties override the width property.
auto - This is default. The browser calculates the height and widthlength - Defines the height or width in px, cm, em, etc.% - Defines the height or width in percent of the containing blockinitial - Sets the height or width to its default valueinherit - The height or width will be inherited from its parent valueThe max-width property sets the maximum allowed width of an element. This prevents the width of an element to be larger than the max-width property value.
The max-width property can have the following values:
length - Defines the maximum width in px, cm, etc.% - Defines the maximum width in percent of the containing blocknone - This is default. Means that there is no maximum widthOne problem with the width property can occur when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page. So, using max-width will improve the browser's handling on small windows.
One <div> element with a max-width of 500 pixels, and one <div> element with a width of 500 pixels:
.div1 {
max-width: 500px;
background-color: powderblue;
}
.div2 {
width: 500px;
background-color: powderblue;
}
Note: If you use both the width property and the max-width property on the same element, and the value of the width property is larger than the max-width property; the max-width property value will be used!
The min-width property defines the minimum width of an element.
If the content is smaller than the minimum width, the minimum width will be applied.
If the content is larger than the minimum width, the min-width property has no effect.
Note: This prevents the value of the width property from becoming smaller than min-width.
The max-height property defines the maximum height of an element.
If the content is larger than the maximum height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.
If the content is smaller than the maximum height, the max-height property has no effect.
Note: This prevents the value of the height property from becoming larger than max-height. The value of the max-height property overrides the height property.
The min-height property defines the minimum height of an element.
If the content is smaller than the minimum height, the minimum height will be applied.
If the content is larger than the minimum height, the min-height property has no effect.
Note: This prevents the value of the height property from becoming smaller than min-height.
Modern CSS property used to maintain proportional width & height automatically.
aspect-ratio: 16 / 9;
Meaning:
Width : Height 16 : 9
π Controls how an element is placed on the page
position: static (DEFAULT)top, left, etc DO NOT WORK.box {
position: static;
}
π You rarely use this manually
position: relative.box {
position: relative;
top: 20px;
left: 30px;
}
π Moves down 20px, right 30px
position: absolute.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
π Child sticks to top-right of parent
π If no parent has position β uses body
The element stays fixed on the screen even while scrolling.
Used for:
Element behaves:
Best for:
display?π It defines how an element behaves in layout
Every HTML element is a box, and display decides:
π How that box is placed on the page
display: block
<div>Box 1</div>
<div>Box 2</div>
div {
display: block;
background: lightblue;
}
π Output:
[Box 1 ] [Box 2 ]
<div><p><h1> to <h6>display: inline
<span>One</span>
<span>Two</span>
span {
display: inline;
background: yellow;
}
π Output:
One Two
<span><a><strong>display: inline-block
<button>Btn 1</button>
<button>Btn 2</button>
button {
display: inline-block;
width: 100px;
height: 50px;
}
π Output:
[Btn1] [Btn2]
display: none
div {
display: none;
}
π Element disappears fully
Z-Index
z-index controls the stack order of elements.
z-index = element appears on topz-index = element stays behindThink like layers in Photoshop.
z-index only works when element has:
position: relative; position: absolute; position: fixed; position: sticky;
Without position, z-index usually won't work.
.bg{
position:absolute;
z-index:-1;
}
Used to send elements behind everything.
Sometimes z-index not working because of stacking context.
overflow controls what happens when content becomes bigger than its container.
overflow: value;
Values:
visiblehiddenscrollautooverflow: hiddenHides extra content outside the box.
overflow: scrollAlways shows scrollbar.
overflow: autoScrollbar appears ONLY when needed.
overflow-x and overflow-yControl horizontal and vertical overflow separately.
Used when text is too long.
text-overflow: ellipsisShows:
Hello this is very lo...
instead of breaking layout.
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
ALL 3 are needed.
Flexbox is a one-dimensional layout system used to arrange items in:
Best for:
When you use:
.container {
display: flex;
}
Two things are created:
CSS Flexbox is used for a one-dimensional layout, with rows OR columns.
CSS Grid is used for a two-dimensional layout, with rows AND columns.
This is the most important concept in Flexbox.
Activates flexbox.
.container {
display: flex;
}
Controls direction of items.
flex-direction: row; /* default */ flex-direction: column; flex-direction: row-reverse; flex-direction: column-reverse;
π Changes the main axis
Controls how items are placed along main axis.
justify-content: flex-start; justify-content: center; justify-content: flex-end; justify-content: space-between; justify-content: space-around; justify-content: space-evenly;
align-items: stretch; /* default */ align-items: center; align-items: flex-start; align-items: flex-end; align-items: baseline;
.container {
display: flex;
flex-wrap: nowrap;
}
.container {
flex-wrap: wrap;
}
π Items go to next line
.container {
flex-wrap: wrap-reverse;
}
.container {
display: flex;
gap: 20px;
}
π Adds spacing without margin
align-content is used to control the spacing between rows (or columns) of flex items when they wrap onto multiple lines.
π Important:
It only works when flex-wrap:wrap; is enabled AND there are multiple lines.
align-items β aligns items inside a single rowalign-content β aligns multiple rows as a groupalign-contentflex-startLines are packed at the top
.container {
align-content: flex-start;
}
flex-endLines are packed at the bottom
.container {
align-content: flex-end;
}
centerLines are centered vertically
.container {
align-content: center;
}
space-betweenEqual space between rows
.container {
align-content: space-between;
}
space-aroundEqual space around rows
.container {
align-content: space-around;
}
space-evenlyEqual spacing everywhere
.container {
align-content: space-evenly;
}
stretch (default)Rows stretch to fill container
.container {
align-content: stretch;
}
flex-flow is a shorthand property in CSS Flexbox.
π It combines two properties into one:
flex-directionflex-wrap
.container {
flex-flow: row wrap;
}
flex-growControls how much an item grows compared to others when there is extra space.
0 β item does NOT grow.item {
flex-grow: 1;
}
π All items grow equally
Example:
.item:nth-child(1) {
flex-grow: 2;
}
π First item gets double space
Example:
flex-shrinkControls how items shrink when there is not enough space
1 β items can shrink0 β item will NOT shrink.item {
flex-shrink: 0;
}
π Items keep their size β may overflow
flex-basisSets the initial size of an item before growing/shrinking
width (in row)height (in column).item {
flex-basis: 200px;
}
π Each item starts at 200px
flex-basis overrides width
.item {
width: 100px;
flex-basis: 200px;
}
π Final size = 200px
flex (MOST IMPORTANT)Shortcut for:
flex: grow shrink basis;
.item {
flex: 1 1 200px;
}
π Means:
.item {
flex: 1 1 250px;
}
π Cards:
align-selfOverrides align-items for one specific item
.item:nth-child(2) {
align-self: center;
}
π Only second item is centered
flex-startflex-endcenterstretchorder π Controls visual order of items (without changing HTML)
.item:nth-child(1) {
order: 2;
}
.item:nth-child(2) {
order: 1;
}
π Output:
π₯ Use case:
Most people forget this π
.container {
display: flex;
}
π Default behavior:
flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch;
π Important for debugging layouts
CSS Grid is a two-dimensional layout system
β Works with rows AND columns
Unlike Flexbox (1D), Grid handles:
.container {
display: grid;
}
Two things are created:
π Invisible lines that divide the grid
π Space between lines (rows/columns)
π Single box
π Multiple cells combined
.container {
display: grid;
}
π Children automatically become grid items
π Defines columns
.container {
grid-template-columns: 200px 200px 200px;
}
π MOST IMPORTANT UNIT
.container {
grid-template-columns: 1fr 1fr 1fr;
}
π Equal distribution
.container {
grid-template-columns: 200px 1fr 2fr;
}
π Real-world layout:
.container {
grid-template-rows: 100px 200px auto;
}
π auto = content decides height
.container {
gap: 20px;
}
π Works for both rows + columns
π Cleaner than margin
column-gap & row-gapcolumn-gap: 20px; row-gap: 10px;
π Useful when you want different spacing
justify-content: center;
align-content: center;
place-content: center;
justify-items: center;
align-items: center;
place-items: center;
.item {
grid-column: 1 / 3;
}
π From line 1 β line 3
.item {
grid-column: span 2;
}
π Takes 2 columns
.item {
grid-row: 1 / 3;
}
.item {
grid-area: 1 / 1 / 3 / 3;
}
π row-start / col-start / row-end / col-end
.item {
justify-self: center;
}
π Align single item horizontally
.item {
align-self: end;
}
π Align single item vertically
.item {
place-self: center;
}
π Combines both
Responsive Grid means:
π Layout automatically adjusts based on screen size
π No need for too many media queries
π Items resize, wrap, and reorganize smoothly
Instead of saying:
grid-template-columns: 300px 300px 300px;
We use flexible + smart units
repeat() + auto-fit + minmax().container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
repeat(3, 1fr);
π Repeat columns
π Automatically fits as many columns as possible
minmax(250px, 1fr)
π Defines:
auto-fill vs auto-fitCSS Variables let you store values and reuse them anywhere.
:root{
--primary: #0f172a;
}
button{
background: var(--primary);
}
:root
:root{
--primary:red;
}
:root means global scope.
Variables become available everywhere in the website.
Think of it like global storage.
color: var(--text, black);
Meaning:
--textblackfilter applies visual effects directly to elements.
filter: value;
filter: blur(); filter: brightness(); filter: contrast(); filter: drop-shadow();
blur() Blurs the element.
img{
filter:blur(5px);
}
Image becomes blurry.
brightness() Controls light intensity.
img{
filter:brightness(150%);
}
contrast() Controls difference between dark and light.
img{
filter:contrast(200%);
}
drop-shadow() Adds shadow based on image shape.
img{
filter:drop-shadow(0 10px 20px black);
}
Modern websites almost always support dark mode now.
CSS provides built-in detection using:
@media (prefers-color-scheme: dark)
Detects user's system theme.
If system is dark mode β
CSS inside media query activates.
body{
background:white;
color:black;
}
@media(prefers-color-scheme:dark){
body{
background:black;
color:white;
}
}
A CSS transition lets a property change smoothly over time instead of instantly.
Without transition:
With transition:
transition: property duration timing-function delay;
π Example:
button {
background: blue;
transition: background 0.3s ease;
}
button:hover {
background: red;
}
Transition ONLY works when a change happens
That means:
β It will NOT run automatically like animation
Defines what to animate
transition-property: background;
π You can also use:
transition-property: all;
β οΈ Avoid all in large projects (performance issue)
Defines how long it takes
transition-duration: 0.5s;
π Units:
s β secondsms β millisecondsControls speed curve
transition-timing-function: ease;
π Advanced:
cubic-bezier(0.68, -0.55, 0.27, 1.55);
cubic-bezier() is a custom timing function that controls how animation speed changes over time.
π Instead of using:
easelinearYou define your own motion curve.
cubic-bezier(x1, y1, x2, y2)
Think of a graph:
(0,0) ----------- (1,1) β β start end
Now you control the curve between them using 2 points:
Point Meaning(x1, y1)controls start speed(x2, y2)controls end speed
cubic-bezier(0.68, -0.55, 0.27, 1.55)
Defines when it starts
transition-delay: 0.2s;
transition: all 0.3s ease 0s;
π Order:
property | duration | timing | delay
transition: background 0.3s ease, transform 0.4s ease-in;
button {
background: black;
color: white;
transition: background 0.3s ease;
}
button:hover {
background: orange;
}
.card {
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.05);
}
a {
position: relative;
}
a::after {
content: "";
position: absolute;
width: 0%;
height: 2px;
background: black;
bottom: 0;
left: 0;
transition: width 0.3s ease;
}
a:hover::after {
width: 100%;
}
Always combine transitions with:
transform: scale(); transform: translate(); transform: rotate();
π Example:
.box {
transition: transform 0.4s ease;
}
.box:hover {
transform: translateY(-10px);
}
transform: translateZ(0);
π Makes animation smoother (GPU usage)
will-change: transform;
π Browser prepares for animation
β οΈ Use only when needed
A CSS animation lets elements move/change automatically over time
(no hover, no click needed)
CSS animation has 2 main parts:
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.box {
animation: fadeIn 1s ease;
}
π This makes element fade in automatically
@keyframes moveBox {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
π You can also use:
from { } /* same as 0% */
to { } /* same as 100% */
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-50px); }
100% { transform: translateY(0); }
}
π This creates real animation feeling
animation-name: fadeIn;
animation-duration: 1s;
Same as transitions:
ease linear ease-in ease-out cubic-bezier()
animation-delay: 0.5s;
π How many times it runs
animation-iteration-count: 3; animation-iteration-count: infinite;
π Controls direction
normal reverse alternate alternate-reverse
π Controls final state
animation-fill-mode: forwards;
none β resetsforwards β stays at endbackwards β applies start before delayboth β bothanimation-play-state: paused;
π Used with hover:
.box:hover {
animation-play-state: paused;
}
animation: fadeIn 1s ease 0s 1 normal forwards;
π Order:
name | duration | timing | delay | iteration | direction | fill-mode
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
A media query lets you apply CSS based on device conditions
(like screen width, height, orientation, etc.)
Used for Responsive Design
@media (condition) {
/* CSS rules */
}
@media (max-width: 768px) {
body {
background: red;
}
}
π When screen width β€ 768px β background becomes red
@media (max-width: 768px) {
.box {
width: 100%;
}
}
π Applies below 768px
@media (min-width: 768px) {
.box {
width: 50%;
}
}
π Applies above 768px
Key Difference
π Common sizes:
/* Mobile */ @media (max-width: 480px) /* Tablet */ @media (max-width: 768px) /* Small Laptop */ @media (max-width: 1024px) /* Desktop */ @media (max-width: 1200px)
@media (min-width: 768px) and (max-width: 1024px) {
.box {
background: blue;
}
}
π Applies only between 768pxβ1024px
@media (max-height: 600px) {
.hero {
padding: 20px;
}
}
π Used for small screens (like laptops)