Learning Center - css
https://codingchoice.com/learn/
2026-05-03T10:42:19+00:00Learning Center
https://codingchoice.com/learn/
https://codingchoice.com/learn/_media/logo.pngtext/html2025-02-01T23:21:34+00:00Anonymous (anonymous@undisclosed.example.com)animations
https://codingchoice.com/learn/css/animations?rev=1738452094&do=diff
CSS Animations
Creating Simple Animations
CSS allows you to animate HTML elements using @keyframes.
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes move {
0% { left: 0px; }
100% { left: 100px; }
}
.animated-box {
position: relative;
width: 50px;
height: 50px;
background-color: red;
animation: move 2s infinite alternate;
}
</style>
</head>
<body>
<div class="animated…text/html2025-02-02T00:00:07+00:00Anonymous (anonymous@undisclosed.example.com)box_model
https://codingchoice.com/learn/css/box_model?rev=1738454407&do=diff
CSS Box Model
The CSS box model describes how elements are structured in terms of content, padding, border, and margin.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">This is a box!</div>
</body>
</html>text/html2025-02-20T03:03:22+00:00Anonymous (anonymous@undisclosed.example.com)cheatsheet
https://codingchoice.com/learn/css/cheatsheet?rev=1740020602&do=diff
CSS Cheat Sheet
Selectors
* – Universal selector
element – Type selector (e.g., p, div)
.class – Class selector
#id – ID selector
element, element – Group selector
element element – Descendant selector
element > element – Direct child selectortext/html2025-02-01T23:14:08+00:00Anonymous (anonymous@undisclosed.example.com)flexbox
https://codingchoice.com/learn/css/flexbox?rev=1738451648&do=diff
CSS Flexbox
Flexbox is a layout model that makes it easy to align and distribute elements within a container.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: lightgray;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
…text/html2025-02-01T23:16:02+00:00Anonymous (anonymous@undisclosed.example.com)grid
https://codingchoice.com/learn/css/grid?rev=1738451762&do=diff
CSS Grid
CSS Grid is a powerful layout system for designing web pages with rows and columns.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: lightgray;
padding: 10px;
}
.grid-item {
background-color: blue;
color: white;
padding: 20px;
text-align: center;
…text/html2025-02-01T23:16:31+00:00Anonymous (anonymous@undisclosed.example.com)introduction
https://codingchoice.com/learn/css/introduction?rev=1738451791&do=diff
Introduction to CSS
What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. It allows you to control the layout, colors, fonts, and overall appearance of a webpage.
How CSStext/html2025-02-02T00:02:18+00:00Anonymous (anonymous@undisclosed.example.com)responsive_web_design
https://codingchoice.com/learn/css/responsive_web_design?rev=1738454538&do=diff
Responsive Web Design
Media Queries
Media queries allow CSS to adapt styles based on screen size.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
@media (max-width: 600px) {
body {
background-color: lightcoral;
}
}
</style>
</head>
<body>
<p>Resize the browser to see the background change.</p>
</body>
</html>text/html2025-02-01T23:19:38+00:00Anonymous (anonymous@undisclosed.example.com)selectors
https://codingchoice.com/learn/css/selectors?rev=1738451978&do=diff
CSS Selectors
Basic Selectors
Element Selector: Targets all instances of an element (e.g., p { color: red; })
Class Selector: Targets elements with a specific class (e.g., .myClass { color: green; })
ID Selector: Targets an element with a specific ID (e.g., #myID { font-size: 20px; })text/html2025-02-20T03:04:52+00:00Anonymous (anonymous@undisclosed.example.com)sidebar
https://codingchoice.com/learn/css/sidebar?rev=1740020692&do=diff
* Introduction to CSS
* CSS Selectors
* CSS Box Model
* CSS Flexbox
* CSS Grid
* CSS Animations
* Responsive Web Design
* CSS Cheat Sheet