CSS Complete Course For Beginners

Explore the basics of cascading stylesheets (css) and how a style sheet defines the look of web pages by applying styles to headings, paragraphs, and elements.

Explore how to include CSS in HTML using inline styles, embedded styles, and external stylesheets, and learn how inheritance and overriding create page-wide or element-specific styling.

Learn basic css syntax by adding a style tag in html, styling h1 with blue color and a font family, and h2 with green, using properties and values.

Learn how to style hyperlinks with CSS using the anchor tag, remove the default underline, and control link, visited, hover, and active colors with text-decoration.

Learn css text styling, including color (keywords, rgb, hex), alignment, letter and word spacing, text indent, text decoration, text transform, and text shadow, via practical paragraph examples.

Explore how to manage color opacity in CSS using rgba, opacity, and hsla with hue, saturation, and lightness, including hex and named colors.

Learn to style web pages with css backgrounds by applying background colors or images to paragraphs and the body, and control background repeat, position, and fixed attachment.

Learn to style images with CSS borders using the image tag and style attribute, experimenting with 3px red dotted borders and 1px solid green borders to enhance page visuals.

Learn how CSS layers use z-index to stack absolute-positioned divs, adjusting top and left offsets to create layered visuals with green, red, and yellow boxes.

Learn how to style text with CSS fonts, including font-family fallbacks, font-weight, font-style, and font-variant small caps, plus font-size units and shorthand notation.

Learn to customize css lists: unordered and ordered, bullets and list-style-type options like disc, circle, square; create inline lists with float left and hide bullets via list-style: none.

Explore CSS borders by styling paragraphs, divs, and images with per-side properties, colors, and widths; master border styles such as solid, dashed, groove, and dotted.

Explore how CSS padding creates space between text and borders by adjusting top, right, bottom, and left sides. Learn single, multiple value syntax, including pixel and percent, to control padding.

Master css positioning by applying absolute, relative, and fixed options with x and y coordinates to place elements, and explore how each behaves when scrolling.

Learn how to control box dimensions in CSS, including height and width with min and max options, and see how padding and margins affect placement.

Learn how to create rounded corners in CSS using border-radius, applying same or different radii to each corner, with practical examples of background color, borders, and images.

Learn how CSS cursors control the mouse pointer, from default and auto to plus, crosshair, resize variants, text (I-beam), wait, help, and the hyperlink finger pointer.

Discover how css visibility controls content by toggling text between visible and hidden states, using the visibility property and a style tag in the head to show or hide paragraphs.

Learn how to use CSS selectors—type, class, id, and universal selectors—through embedded styles, applying targeted styles to headings, paragraphs, and nested elements with practical examples.

Learn to manage overflowing content by adding vertical or horizontal scrollbars with the css overflow property, and implement a scrollable box to observe left, right, and bottom scrollbars.

Master CSS gradients by building linear gradients in multiple directions (top-to-bottom, left-to-right, diagonals) and radial gradients with color stops, including repeating radial gradients, to create dynamic, colorful backgrounds.

Explore CSS 2D transformations by rotating elements by 20 degrees and skewing on the X and Y axes, with clockwise and anticlockwise demonstrations.

Explore CSS 3D transformation by rotating a box along the X, Y, and Z axes using rotate X, rotate Y, and rotate Z, with practical on-screen demonstrations.

Learn how to build interactive CSS animations with keyframes, animating color transitions and element position, controlling duration, delay, iteration count, and direction to create engaging user interface effects.