CSS3 Fundamentals

Explore css color formats and opacity in this section, mastering named colors, hex notation (six- and three-digit), rgb functions, percentage values, and hue-saturation-lightness techniques.

Learn how to apply css opacity and transparency using named colors like transparent, hex colors with alpha bits, rgba and hsla functions, and the currentColor and inherit keywords.

Explore CSS3 color concepts, including opacity and alpha transparency, color formats, and inheritance, then practice applying diverse color properties to text with palettes and color codes.

Master writing mode, direction, and text orientation in CSS, including Unicode by direction, to control inline and block text flow, with multilingual Hello World examples.

Explore text decoration in css by applying underline, line-through, and overline with style and color, and using the text-decoration shorthand to combine line, style, and color.

Explore how to use the text-shadow property in CSS, including offset-x, offset-y, blur radius, and color, and apply multiple shadows with different colors and negative values.

Learn to apply css text-emphasis to decorate characters with symbols or strings using text-emphasis-style and color, with optional -webkit- rendering, and position the emphasis over or under the character.

Explore how the text-transform property controls capitalization in a paragraph, applying capitalize, lowercase, uppercase, and none to transform each word's appearance. Observe how changes affect output across characters and words.

Explore how the CSS whitespace property controls text wrapping, spaces, and line breaks using keywords like normal, nowrap, pre, pre-wrap, and pre-line to format content precisely.

Explore CSS text wrapping with word-break properties, including break-all and keep-all, and control hyphenation with hyphens none or auto, illustrated through a live paragraph example.

Learn text alignment and spacing in css3 fundamentals, using text-align to left, right, center, or justify, and adjusting word spacing, letter spacing, and text indent for clean layout.

Explore CSS3 fundamentals through a recap of text properties like direction, writing mode, text decoration, text emphasis, text shadow, text transform, whitespace, hyphens, alignment, spacing, and indentation.

Learn how to import Google fonts into your project using the link method. Apply font-family, font-size, font-weight, and line height, with fallbacks and a custom font.

Apply font styles and line height, and learn to import custom fonts using @font-face, font-family, and src, then apply fonts and sizes to paragraphs with italic or oblique variations.

Demonstrate using the CSS line-height property to adjust spacing across three paragraphs, with values from 0.5 to 2 and percentages, while resetting margins and padding and applying 25px font size.

Learn to import Google fonts, apply font family, size, weight, and line height, and import custom fonts into your project.

Explore values and units in CSS, distinguishing absolute and relative units, and learn practical examples of pixels, points, pc, quarter millimeter, mm, cm, and inches for web design and print.

Explore relative units in CSS, focusing on em and rem behavior, inheritance from base font size, and how font size changes cascade to nested elements for consistent sizing.

Explore css ch and ex units, using the width of the zero character and the x-height to size elements, with practical pixel examples and font-dependent behavior.

Explore viewport units vw and vh that size elements to the visible screen, with examples of 10% and 50% viewport dimensions and min and max in responsive design.

Explore the percentage unit in css as the last relative unit, learn how 100% height relates to the viewport and its parent, and apply percentages to font sizes.

Explore angle units in CSS3, learn to apply transform rotate using degrees and radians, compare clockwise and anticlockwise rotations, and note that frequency units are not yet browser supported.

Explore duration units in CSS3, learning how to use seconds and milliseconds with transitions to reveal background color on hover, and apply borders and timing concepts for smooth animations.

Explore functional notation to size elements with viewport-based percentages, including a 200 px box with a gold background, and responsive font sizing with a 16 px minimum font size.

Recap distance units, quantities, and functional notations; compare percentage and viewport units; explore relative and absolute units with articles and real-time tools for font and layout calculations.

Learn to style lists in CSS using list-style-type, list-style-position, and list-style-image, experiment with circle, none, and inside or outside positions, and apply the shorthand list-style properties.

Explore list styling in css3 fundamentals by applying list style type, list style position, and list style image, and generating ordered, unordered, and description lists with padding and margins.

Learn CSS3 table styling: apply borders, border-collapse, and border-spacing; control padding and empty cells with the :empty pseudo-class; adjust table layout, width, and height.

learn how to position a table caption with caption-side, placing captions on top or bottom, and apply borders and table layout properties to tables and cells.

Explore border collapse, border spacing, caption side property, empty cells, and table layout in css tables, and review the provided articles for guidance on applying these properties.