NextGenEd - CSS Course

CSS Modules

About CSS

HTML is a language used to style and layout web pages. It controls the color, font, spacing, positioning, and many other aspects of HTML elements.

CSS Syntax

HTML syntax consists of a selector and a declaration block:

                selector {

                  property: value;

                }

Example:

p { color: red; font-size: 18px; }

CSS Selectors

Selectors are used to target HTML elements. Common selectors:

Element selector: p
Class selector: .classname
ID selector: #idname
Universal selector: *
Attribute selector: input[type="text"]

CSS Comments

Comments in CSS are written like this:

/* This is a HTML comment */

CSS Colors

Colors can be defined using names, HEX, RGB, RGBA, HSL, and HSLA values.

                color: red;

                color: #ff0000;

                color: rgb(255,0,0);

                color: rgba(255,0,0,0.5);

                color: hsl(0, 100%, 50%);

CSS Box Model

The box model describes the design and layout of elements:

Content
Padding
Border
Margin

CSS Links

Links can be styled using the :link, :visited, :hover, and :active pseudo-classes.

                a:link { color: blue; }

                a:visited { color: purple; }

                a:hover { color: red; }

                a:active { color: green; }

CSS Lists

Lists can be styled using list-style-type, list-style-image, etc.

                ul { list-style-type: square; }

                ol { list-style-type: upper-roman; }

CSS Tables

Tables can be styled for borders, spacing, and more:

                table, th, td { border: 1px solid black; border-collapse: collapse; }

                th, td { padding: 8px; }

CSS Comments

HTML comments are ignored by browsers and help document your code:

/* This is a comment */

CSS Display & Positioning

Control how elements are displayed and positioned:

display: block, inline, inline-block, flex, grid, none
position: static, relative, absolute, fixed, sticky
z-index: controls stacking order

NextGenEd - CSS Course

CSS Modules

🎉 Certificate of Completion 🎉