Learn CSS Web Design Development Beginner CSS introduction

Learn CSS to style and lay out web pages using selectors, inline, external, and style tags; explore colors, borders, box model, typography, hyperlinks, Chrome inspector, media queries, and responsive design.

Explore tools and resources for CSSA development, including atom, chrome dev tools, and CodePen.io, to write CSSA, inspect style sources, and see live results in the browser.

Explore how cascading style sheets cssa work with html to style modern web pages, and how browser dev tools reveal and modify styling.

Learn to add CSS to HTML pages with inline styles, style blocks, and external stylesheets. Use tag, id, and class selectors to color and style elements, and understand rule order.

Learn how to select elements with a selector, apply a property and value, and experiment live in the Chrome browser using the CSS inspector to see colors and fonts change.

Explore how to use divs and spans to target content and apply CSS styling, noting divs create a full block and spans isolate text for styling.

Explore CSS selectors using id (hash), tag, and class (period) to target elements, apply background colors, and reuse classes for flexible styling.

Master css color values by exploring hex, rgb, rgba, hsl, and cmyk, using color pickers, shorthand hex, and alpha transparency across browsers.

Discover CSS named color values and how English color names map to hex values. Explore about 150 color options and apply them to elements using CSS.

Learn to apply and customize background properties in CSS, including setting the body background color, adding a background image with a URL, and controlling repeat, size, position, and parallax effects.

Learn how to use the CSS background shorthand to condense background image, color, repeat, and positioning into one declaration, with a color fallback when the image fails.

Explore how CSS borders differentiate elements by color, width, and style. Learn to use the border shorthand to apply to all sides or target top, right, bottom, and left.

Explore how the outline property styles the area outside the border with the same options as borders and shorthand, including color, style, and width, and note overlap with element sizing.

Master margins to create space around elements by using top, bottom, left, and right values and the shorthand to apply top, right, bottom, and left in clockwise order.

Explore CSS padding as the inside spacing of an element, apply top, right, bottom, and left values, use shorthand, and see how padding affects content and height.

Explore the css box model and learn to use Chrome dev tools to inspect and adjust margins, padding, borders, colors, and layout in real time for responsive design.

Explore how to set height and width in CSS, create a container with a max width and 90 percent width for responsive design, and use fluid percentages or fixed pixels.

Explore the box model by inspecting and recreating CSS properties in dev tools, including margin auto, a 500px width, 20px padding, a 1px red border, green background, and centered text.

Center your web page content by applying auto margins on left and right within a fixed-width container. Explore how auto margins proportionally space content to keep layouts balanced across sizes.

Master CSS text and font properties, adjusting font-family, font-size, font-style, font-weight, and line-height, and learn to use Google fonts and shorthand font syntax for improved typography.

Explore the CSS text property to align text with text-align, remove hyperlink underlines with text-decoration: none, and apply text-shadow, previewing changes in dev tools.

Learn to use Chrome dev tools to edit css attributes and apply styles via classes or IDs. Explore color pickers, palettes, and Google fonts for web projects.

Browse Google fonts, select font families, and embed them via a stylesheet or @import, then apply font-family to elements and override containers for consistent typography.

Explore line height in CSS to adjust vertical line spacing, using percentage values, and note that zero spacing is possible while negative values are not allowed.

Experiment with CSS letter spacing and line height to control readability and typography. Explore positive and negative letter spacing values and use dev tools to adjust color and background.

Style all hyperlinks in one place or per element within your CSS. Explore link, visited, hover, and active states, adjust colors and backgrounds, and remove underlines for navigation menus.

Learn to style HTML tables with CSS by moving inline styles to an external stylesheet, applying borders, alignment, padding, and typography for table elements like th and td.

Learn how display properties transform navigation and content by using inline, inline-block, and block, and compare display none with visibility hidden to hide or reserve space.

Learn to align four inline boxes with CSS by using class-based blue and red colors, setting dimensions, and centering the container with margin auto and inline-block behavior.

Explore CSS position properties from static flow to relative, fixed, and absolute placements, including left, top, right, and bottom, and learn how each affects page positioning.

Explore dev tools for styling web pages, copy and paste updated style rules, manage temporary CSS files, and ensure changes propagate to your source code.

Turn an unordered list into a navigation bar by styling list items as links. Practice applying a nav bar class and CSS to structure and style the menu.

Learn to turn an unordered list into a navigation bar using dev tools as an editor, then apply CSS updates for inline-block items, centered text, and hover effects.