Scribd
Upload
2 views3 pages

CSS Complete Reference With Examples

This document serves as a comprehensive reference for CSS, covering its definition, syntax, and various components such as selectors, box model, typography, and layout techniques. It includes examples for each section, demonstrating how to apply CSS properties effectively. Additionally, it discusses modern layout systems like Flexbox and Grid, responsive design with media queries, and best practices for writing CSS.

Uploaded by

losikeeregae0
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
2 views3 pages

CSS Complete Reference With Examples

This document serves as a comprehensive reference for CSS, covering its definition, syntax, and various components such as selectors, box model, typography, and layout techniques. It includes examples for each section, demonstrating how to apply CSS properties effectively. Additionally, it discusses modern layout systems like Flexbox and Grid, responsive design with media queries, and best practices for writing CSS.

Uploaded by

losikeeregae0
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
You are on page 1/ 3

Comprehensive CSS Reference with Examples

CSS Introduction
CSS = Cascading Style Sheets. It defines the visual presentation of HTML - colors, fonts, layout.
/* Example */
body {
background-color: lightblue;
}

Syntax & Cascade


CSS syntax uses selectors and declaration blocks. Style priority: inline > internal > external.
/* Example */
p {
color: red;
font-size: 16px;
}

Selectors
CSS Selectors let you target elements. Includes: type, class, ID, combinators, pseudo-classes/elements.
/* Example */
#header {
background: black;
}
.article p {
font-style: italic;
}
a:hover {
color: green;
}

Box Model
Every element is a box: content + padding + border + margin.
/* Example */
div {
width: 200px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}

Typography & Color


Control text using font-family, size, color, line-height, text-align, etc.
/* Example */
h1 {
font-family: 'Arial';
color: navy;
Comprehensive CSS Reference with Examples

text-align: center;
}

Backgrounds & Borders


You can style backgrounds and borders with various properties.
/* Example */
.box {
background-image: url('bg.jpg');
border: 2px dashed green;
border-radius: 10px;
}

Layout
Control layout using display, float, position, z-index, overflow.
/* Example */
.container {
display: inline-block;
position: relative;
overflow: hidden;
}

Flexbox & Grid


Modern layout systems. Flexbox for 1D layouts, Grid for 2D.
/* Flexbox */
.flex-container {
display: flex;
justify-content: space-between;
}
/* Grid */
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
}

Responsive Design
Media queries help your site adapt to screen sizes.
/* Example */
@media (max-width: 600px) {
body {
background-color: lightgrey;
}
}

Best Practices
Comprehensive CSS Reference with Examples

Use external CSS, write modular styles, comment sections, avoid repetition.
/* Example */
/* Primary button style */
.btn-primary {
background-color: blue;
color: white;
}

You might also like