Core CSS

Lesson 0: What is CSS?

Overview

CSS stands for Cascading Style Sheets, and it is used to style HTML content. While HTML defines the content that is displayed, CSS defines how that content is displayed. So, we can think of CSS as a way to modify the appearance of HTML content.

Styling Text

A paragraph of text, like this one, is, by default, displayed with black text on a white background in ordinary HTML. With CSS, we can change the text color to red, make the text bigger, make the text smaller, or change the font, as we see here. We can even put these styles together.

 

With Ordinary HTML Styling and with CSS Styling

 

Styling Backgrounds

In addition to styling the foreground text of an element, CSS can be used to style the background. Ordinary HTML text has a white background. As we show here, we can make the background a solid color like this purple, or we can combine colors in a gradient to create gradient mixtures as we do with the gray background.

 

With Ordinary HTML Styling and with CSS Styling

 

Placing Elements

Ordinarily, when HTML elements are added to a document, they are placed left to right and aligned at the bottom. When sufficiently many element are added to document that they can not all fit in a single line, additional elements are added on the next line down the page in much the same way that we read. With CSS, we can place elements anywhere on the page that we would like to place them. Here, we demonstrate a rearrangement of the images with CSS.

 

With Ordinary HTML Styling and with CSS Styling

 

Styling an Image

CSS can be used make an image look like a displayed painting. With CSS, we can add a frame around an image and even a colored region that looks like the mat of a painting. Here, we demonstration effect. CSS also allows us to resize an image, as we do here.

 

With Ordinary HTML Styling and with CSS Styling

 

Creating Animations

In addition to normal styling, CSS allows us to animate style properties. Here, we demonstrate the animation of the background color of an element and the simultaneous varying of the roundness of its corners. With CSS, we can make precisely timed animations of almost any property.

 

With Ordinary HTML Styling and with CSS Styling

 

Mathematical Transformations

For those with some mathematical knowledge, CSS offers the ability to apply various 2D and 3D animations. Here, we give a demonstration of each one. Finally, we remark that you should know HTML before learning CSS. If you do not already know HTML, please go through our HTML video course first.

 

2D and 3D Transformations

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.