Make websites look amazing — colors, layouts, animations, and responsive design.
Try in Applaa Builder — FreeCSS stands for Cascading Style Sheets. It's the language that styles your web pages — colors, fonts, spacing, and layout. HTML is the skeleton, CSS is the skin and clothes! You write CSS rules that say: 'target this element, apply these styles'. One CSS file can control the look of an entire websit…
A CSS rule has two parts: a selector (what to target) and declarations (what to change). You can select by tag name (h1), class (.my-class), or ID (#my-id). Classes are the most common — add a class in HTML and style it in CSS. Properties like color, font-size, and background control appearance.
CSS gives you many ways to set colors: named colors (red, blue), hex codes (#ff5733), rgb(), or hsl(). Backgrounds can be solid colors, images, or gradients. The linear-gradient() function creates smooth transitions between colors — great for hero sections and buttons.
Every HTML element is a box! The CSS box model has four layers: content (the actual text/image), padding (space inside the border), border (the line around it), and margin (space outside the border). Understanding this is key to spacing elements correctly. Use box-sizing: border-box so padding does…
Typography is huge in design! CSS lets you control font-family (typeface), font-size, font-weight (bold), line-height (spacing between lines), text-align, and text-decoration (underline, strikethrough). Use Google Fonts by adding a link in HTML, then reference the font name in CSS.
Flexbox makes it easy to arrange items in a row or column. Set display: flex on a container, then control direction, alignment, and spacing. justify-content aligns items along the main axis; align-items aligns along the cross axis. gap adds space between items without needing margins.
CSS Grid is perfect for two-dimensional layouts (rows AND columns at once). Define grid columns with grid-template-columns. Use fr units to share available space. gap controls gutters between cells. Grid is ideal for card galleries, page layouts, and dashboards.
CSS can animate elements without JavaScript! transition smoothly changes properties when they change (like on hover). @keyframes defines an animation sequence with from/to or percentage steps. animation: then applies it. Animations make UIs feel alive and fun.
A responsive website looks great on phones, tablets, and desktops. Use media queries to apply different styles at different screen widths. The mobile-first approach starts with small screen styles, then adds @media (min-width) for larger screens. Relative units like %, vw, and rem help elements sca…
CSS variables (custom properties) let you store values and reuse them everywhere. Define them on :root and use them with var(). Changing one variable instantly updates everything that uses it — great for themes! Let's put everything together and style a mini landing page.