Scribd
Upload
20 views5 pages

CSS Codes Reference Guide

This document serves as a comprehensive guide to CSS, covering essential topics such as selectors, colors, text styling, box model, display properties, flexbox, grid, transitions, animations, pseudo-classes, responsive design, variables, shadows, overflow, z-index, clip paths, gradients, and transforms. Each section provides code examples illustrating the usage of various CSS properties and techniques. The guide is structured to help users understand and apply CSS effectively in web development.

Uploaded by

mianmhassaan949
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views5 pages

CSS Codes Reference Guide

This document serves as a comprehensive guide to CSS, covering essential topics such as selectors, colors, text styling, box model, display properties, flexbox, grid, transitions, animations, pseudo-classes, responsive design, variables, shadows, overflow, z-index, clip paths, gradients, and transforms. Each section provides code examples illustrating the usage of various CSS properties and techniques. The guide is structured to help users understand and apply CSS effectively in web development.

Uploaded by

mianmhassaan949
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Complete CSS Codes Guide

1. Basic CSS Syntax


selector {
property: value;
}

2. CSS Selectors
/* Universal Selector */
* { margin: 0; padding: 0; }

/* Element Selector */
p { color: red; }

/* Class Selector */
.myClass { font-size: 16px; }

/* ID Selector */
#myId { background-color: yellow; }

/* Grouping Selector */
h1, h2, h3 { font-family: Arial; }

3. Colors and Backgrounds


body {
background-color: lightblue;
color: #333;
background-image: url('[Link]');
background-size: cover;
background-repeat: no-repeat;
}

4. Text and Fonts


h1 {
font-family: 'Poppins', sans-serif;
font-size: 36px;
font-weight: bold;
color: darkblue;
text-align: center;
text-transform: uppercase;
text-shadow: 2px 2px 5px gray;
}

5. Box Model
div {
width: 300px;
padding: 20px;
border: 2px solid black;
margin: 10px;
box-sizing: border-box;
}

6. Borders and Outlines


p {
border: 2px dashed red;
border-radius: 10px;
outline: 2px solid blue;
}

7. CSS Display and Position


div {
display: block;
position: relative;
top: 10px;
left: 20px;
}

.fixed {
position: fixed;
bottom: 0;
right: 0;
}

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

8. Flexbox
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.item {
flex: 1;
padding: 10px;
}
9. CSS Grid
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}

.grid-item {
background-color: lightcoral;
padding: 20px;
text-align: center;
}

10. CSS Transitions


.btn {
background-color: blue;
color: white;
transition: background-color 0.5s, transform 0.3s;
}

.btn:hover {
background-color: darkblue;
transform: scale(1.1);
}

11. CSS Animations


@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}

.box {
width: 100px;
height: 100px;
background: red;
animation: slide 2s infinite alternate;
}

12. CSS Pseudo-Classes and Pseudo-Elements


a:hover { color: red; }
p::first-letter { font-size: 30px; color: blue; }

13. Responsive Design (Media Queries)


@media (max-width: 600px) {
body {
background-color: lightgray;
}
h1 {
font-size: 20px;
}
}

14. CSS Variables


:root {
--main-color: teal;
--text-color: white;
}

body {
background-color: var(--main-color);
color: var(--text-color);
}

15. CSS Shadows and Effects


div {
box-shadow: 4px 4px 10px gray;
text-shadow: 2px 2px 5px black;
}

16. CSS Overflow


div {
width: 200px;
height: 100px;
overflow: auto;
}

17. CSS Z-Index


.box1 { position: relative; z-index: 1; }
.box2 { position: absolute; z-index: 2; }

18. CSS Clip Path


.circle {
clip-path: circle(50%);
background: pink;
width: 200px;
height: 200px;
}

19. CSS Gradients


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

20. CSS Transform


div {
transform: rotate(20deg) scale(1.2) translateX(30px);
}

You might also like