Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
A CSS rule consists of a selector and a declaration block:
selector {
property: value;
}
Example:
p {
color: red;
}
Selectors are used to target the HTML elements you want to style.
*)element)#id).class)[attribute]):pseudo-class)::pseudo-element)selector1, selector2)Colors can be defined using names, HEX values, RGB, RGBA, HSL, and HSLA.
color: red; /* Name */
color: #ff0000; /* HEX */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGBA */
color: hsl(0, 100%, 50%); /* HSL */
color: hsla(0, 100%, 50%, 0.5); /* HSLA */
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground-sizebackgroundbody {
background-color: lightblue;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
borderborder-widthborder-styleborder-colorborder-radiusdiv {
border: 2px solid black;
border-radius: 10px;
}
Margins are used to create space around elements, outside of any defined borders.
margin-topmargin-rightmargin-bottommargin-leftmargindiv {
margin: 20px;
}
Padding is used to create space around an element’s content, inside of any defined borders.
padding-toppadding-rightpadding-bottompadding-leftpaddingdiv {
padding: 20px;
}
heightwidthmax-heightmax-widthmin-heightmin-widthdiv {
height: 100px;
width: 100px;
}
The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.
contentpaddingbordermargindiv {
width: 300px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
colortext-aligntext-decorationtext-transformtext-indentletter-spacingline-heighttext-shadowword-spacingp {
color: blue;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.5;
}
font-familyfont-stylefont-sizefont-weightfont-variantfontp {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
}
Icons can be added using various icon libraries like Font Awesome.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<i class="fas fa-camera"></i>
a:linka:visiteda:hovera:activea:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: orange;
}
list-style-typelist-style-positionlist-style-imagelist-styleul {
list-style-type: square;
list-style-position: inside;
}
border-collapseborder-spacingcaption-sideempty-cellstable-layouttable {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 8px;
}
noneblockinlineinline-blockflexgriddiv {
display: block;
}
staticrelativeabsolutefixedstickydiv {
position: absolute;
top: 50px;
left: 100px;
}
The z-index property specifies the stack order of an element.
div {
position: absolute;
z-index: 1;
}
visiblehiddenscrollautodiv {
overflow: scroll;
}
leftrightnoneleftrightbothnonediv {
float: left;
}
div.clear {
clear: both;
}
Flexbox is a layout model that provides a more efficient way to lay out, align, and distribute space among items in a container.
display: flex;flex-directionjustify-contentalign-itemsalign-contentflex-wrapflex-growflex-shrinkflex-basisflexorder.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
CSS Grid Layout is a two-dimensional layout system for the web.
display: grid;grid-template-columnsgrid-template-rowsgrid-gapgrid-columngrid-rowgrid-area.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
Media queries are used to apply different styles for different devices or screen sizes.
@media screen and (max-width: 600px) {
body
{
background-color: lightblue;
}
}
CSS transitions allow you to change property values smoothly (over a given duration).
transition-propertytransition-durationtransition-timing-functiontransition-delaytransitiondiv {
transition: width 2s;
}
div:hover {
width: 200px;
}
CSS animations allow you to animate transitions from one CSS style configuration to another.
@keyframesanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
animation-name: example;
animation-duration: 4s;
}
CSS transforms allow you to rotate, scale, skew, or translate an element.
transformtransform-origindiv {
transform: rotate(45deg);
}
Pseudo-classes are used to define the special state of an element.
a:hover {
color: red;
}
Pseudo-elements are used to style specified parts of an element.
p::first-line {
color: blue;
}
CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document.
:root {
--main-color: blue;
}
p {
color: var(--main-color);
}
CSS has several built-in functions, such as calc(), var(), rgb(), hsl(), and others.
div {
width: calc(100% - 50px);
}
Responsive design makes web pages render well on a variety of devices and window or screen sizes.
img {
max-width: 100%;
height: auto;
}
@media screen and (max-width: 600px) {
.container {
flex-direction: column;
}
}
This tutorial provides a comprehensive overview of CSS, from basic concepts to advanced techniques. By mastering these topics, you’ll be able to create visually appealing and responsive web pages.
https://youtu.be/ESnrn1kAD4E?si=Z2gX5J0jf7CiBQbI