Basic Inline Styling | CSS | Tutorial 2

Share

Summary

This tutorial covers the fundamentals of using inline styling in CSS, demonstrating how to apply style attributes directly within HTML tags. It explains common CSS properties like color, font-size, background-color, border, and width, including how styles are inherited and overridden. The tutorial also introduces w3schools.com as a valuable resource for CSS properties.

Highlights

Introduction to Inline Styling
00:00:00

The tutorial introduces inline styling as the easiest way to start using CSS. It demonstrates how to add a 'style' attribute to any HTML tag, followed by 'style=""', where CSS properties and values can be defined.

Applying Basic Color and Font Size Styles
00:01:01

The video shows how to change text color using the 'color' attribute (e.g., 'color: blue;'). It explains that styles applied to a parent tag, like 'body', are inherited by its child elements. It then demonstrates changing font size using 'font-size' and discusses 'pixels' as the most common unit of measurement in CSS, clarifying that pixels are relative to screen resolution.

Adding Multiple Styles and Overriding Inheritance
00:02:39

Viewers learn to add multiple CSS attributes by separating them with semicolons. The tutorial also illustrates how to override inherited styles by applying a different style directly to a child HTML tag, for example, changing the color of an h1 tag to red while the rest of the text remains blue from the body style.

Using Background Color and Borders
00:05:11

The video demonstrates how to use the 'background-color' attribute to change the background of an HTML element. It also introduces the 'border' property, explaining that it requires three values: width, style (e.g., 'solid'), and color.

Controlling Element Width and Max-Width
00:06:45

The tutorial covers controlling the width of an element using the 'width' property, demonstrating both pixel and percentage values. It explains that 'width: 100%' will make an element take up the full width of its container. Finally, it introduces 'max-width' to set a maximum size for an element, even if the percentage width would make it larger.

CSS Reference Resource: W3Schools
00:09:37

The video recommends w3schools.com/cssref as an invaluable resource for finding information on hundreds of different CSS attributes. It encourages viewers to explore this reference table to discover various styling options, noting that while the course will cover common elements, this resource is crucial for comprehensive learning.

Recently Summarized Articles

Loading...