К содержанию

HTML and CSS Tutorial for Beginners

A simple tutorial on HTML and CSS layout for beginners with detailed theory and a workbook.

Selectors

Tag Relationships in HTML

Inheritance of CSS properties

Grouping Selectors in CSS

Common properties when grouping selectors in CSS

Descendant Selector in CSS

Child selector in CSS

Element classes in CSS

The span tag for pieces of text in HTML

Div tag for grouping tags in HTML

Grouping Classes in CSS

Tag with a given class in CSS

Descendant Selector and Classes in CSS

Complex combinations of descendant selectors and classes in CSS

Rookie Mistake in Descendant Selector

Element with multiple CSS classes

Selecting an element by unique id in CSS

Selector by id and CSS classes

Using id in CSS

Selecting an element by multiple classes in CSS

Multiple selectors merged in CSS

Error when using multiple CSS selectors

Grouping Complex Selectors in CSS

Mistake when grouping complex CSS selectors

Practice on combinations of CSS selectors

CSS Selector Priority

CSS Property Conflict Notice

Specificity Rules in CSS

Descendant Selector Priority in CSS

Adjacent selector in CSS

Sibling Selector in CSS

Universal Selector in CSS

Attribute Selectors in CSS

Link States in CSS

The Nuances of Link State Sequence in CSS

Link and visited states in CSS

Common Uses of Link States in CSS

Complex Selectors with Link States in CSS

Link with class in CSS

Selecting Trailing Elements in CSS

Selecting by element position in CSS

Selecting a Single Child in CSS

Selecting Empty Elements in CSS

Selection by position and type of elements in CSS

Negation Selector in CSS

Design

Setting background color in CSS

Basics of Working with Borders in CSS

Solid Border in CSS

Dotted Border in CSS

CSS Dash Border

Convex Border in CSS

Double Border in CSS

CSS Border Shortcut Property

Border for individual sides in CSS

Rounding the borders of a block in CSS

Rounding Background Borders in CSS

Creating a Circle in CSS

Different Rounding for Different CSS Corners

Four Rounding Values for Different CSS Corners

Two Rounding Values for Different CSS Corners

Three Rounding Values for Different Corners in CSS

Rounded Corners Percentage in CSS

Creating a Circle with Rounding Percentage in CSS

Background Image in CSS

Repeating a Background Image in CSS

Other CSS Background Properties

Working with ul list markers in CSS

Square ul list markers in CSS

CSS ul list markers as circles

Working with ul list markers in CSS

Missing ul list markers in CSS

Working with ol list markers in CSS

Lowercase Roman Numerals for ol Lists in CSS

Uppercase Roman Numerals for ol Lists in CSS

Lowercase Latin Letters for ol Lists in CSS

Capital Latin Letters for ol Lists in CSS

Lowercase Greek Letters for ol Lists in CSS

Numbers with leading zero for ol lists in CSS

Block model

Working with CSS Margins

Margins for different sides in CSS

Multiple values in the margin property in CSS

Four Values for the CSS Margin Property

Two values in the margin property in CSS

Three values in the margin property in CSS

Working with padding in CSS

Padding for different sides in CSS

Multiple values in padding property in CSS

Working with padding in CSS

The Effect of Border on Element Expansion in CSS

How padding and border affect the expansion of elements in CSS

Undoing Element Expanding in CSS

Features of block elements in CSS

Width and height of block element in CSS

CSS Block Element Width

Height of a block element in CSS

Height of a block element without content in CSS

Multiple block elements side by side in CSS

Features of inline elements in CSS

CSS Inline Element Width and Height

Multiple inline elements side by side in CSS

Spacing Between Inline Elements in CSS

Definition of the HTML tag box model

Working with the display property in CSS

Features of inline-block elements in CSS

Width and height of inline-block element in CSS

CSS Inline-Block Element Width

Height of inline-block element in CSS

Multiple inline-block elements side by side in CSS

Aligning Block Elements in CSS

Aligning a Block Element with Left Indent in CSS

Aligning a Block Element with Right Indent in CSS

Aligning Inline Elements in CSS

Centering Inline Elements in CSS

Centering Multiple Inline Elements

Right Aligning Inline Elements in CSS

Aligning Inline-Block Elements in CSS

Centering Inline-Block Elements in CSS

Right Aligning Inline-Block Elements in CSS

Flex elements in CSS

Height of parent of flex elements in CSS

Flex Element Parent Width in CSS

Inline-block parent of flex elements in CSS

Flex Element Parent Padding in CSS

Margins on descendants in CSS

Aligning Flex Items in CSS

Centering Flex Elements in CSS

Aligning Flex Elements to Parent in CSS

Aligning Flex Elements to Parent with Padding in CSS

Aligning Flex Elements to Parent with Equal Margins in CSS

Positioning

Absolute Positioning of Elements in CSS

Relative Positioning of Elements in CSS

Positioning relative to parent in CSS

Positioning relative to absolute parent in CSS

Absolute Positioning Without Coordinates in CSS

Centering with Absolute in CSS

Negative Values in CSS Positioning

Fixed Positioning in CSS

Full Width Block in CSS

Stacking Elements Along the Z-Axis in CSS

Adjusting the Z-Axis Stacking of Elements in CSS

The nuances of using a negative z-index value in CSS

Floats

Introduction to the CSS float property

Floating Elements Penetrating Through Tags in CSS

Combining float and margin in CSS

Combining float and padding in CSS

Floating Elements Under Tags in CSS

Effect of floats on parent in CSS

Height of float parent in CSS

Text in float parent in CSS

Floating in CSS

Canceling Floating with the Clear Property in CSS

Separate div with clearfix in CSS

Clearfix and parent height in CSS

CSS float property for blocks

The float property and multiple blocks in CSS

Float Property and Parent Without Text in CSS

Flexes

Placing Flex Items in a Row or Column in CSS

Placing Flex Items in an Inverted Row in CSS

Placing Flex Items in a Column in CSS

Flipping a Column with Flex Items in CSS

Main and Cross Axes in CSS Flexbox

Aligning Flex Items Along the Main Axis in CSS

Aligning Flexboxes Along the Cross Axis in CSS

The value of the center property of align-items in CSS

Centering without block height in CSS

Centering with different block heights in CSS

The value of the stretch property of align-items in CSS

CSS Axis Alignment Practice

Aligning a Single Item in the Flex Model in CSS

Order of flex boxes in CSS

Grids

Introduction to CSS Grids

Tracks and lines in CSS grids

Displaying Grids in the Browser Debugger

Number and width of columns in CSS grids

Fractional units fr in CSS grid

Fractional units fr in CSS grids

Pixels and fr units in CSS grids

Percentages and fr units in CSS grids

The repeat function in CSS grids

The value of auto in CSS grids

The meaning of auto-fill in CSS grids

The minmax function in CSS grids

The meaning of auto-fit in CSS grids

Number and width of rows in CSS grids

Shorthand for Rows and Columns in CSS Grids

Spanning Rows in CSS Grids

Spanning Columns in CSS Grids

Combinations of Row and Column Spanning in CSS Grids

Overlapping Columns in CSS Grids

Spacing between columns in CSS grids

Spacing between rows in CSS grids

Spacing between columns and rows in CSS grids

Tiles in Grid in CSS

Layouts

Creating a Menu in CSS

Simple Single Column Website Layouts in CSS

CSS Multiple Wrapper Layout Scheme

Structural blocks of the site in HTML

Two-column website layout in CSS

Three Column Website Layout in CSS

Special tags for website layout elements in HTML

Basic Layout Tags in HTML

Section tag in HTML

Practice on HTML and CSS layouts