CSS (Cascade Styling Sheets) Follow Along Video Course

This section explains simple inline CSS. You will be able to add styling directly to your HTML elements inside your HTML document. This is a simple way of  adding CSS styling for small projects or just for trying new things.

We use internal CSS to create blocks of CSS code to style the HTML elements in the document. The CSS block of code is placed inside the head section of the HTML document.

External CSS is used when creating large webpages or websites. This helps keep all styling separate from a HTML document. The CSS styling is placed in a separate file to the HTML code. We use a link in the head of a HTML document to join the separate CSS file to the HTML document. This is also helpful, when more than one webpage can share the same styling file. For example each webpage may have the same header or footer, so the styling can be used in every html page in the website.

The CSS property color is one of the most simple and most used properties in CSS. This simply adds text color to the HTML content or text.

The CSS background color is used to change the background color of a HTML element.

Comments are used to document CSS code. Comments are not used by the browser and are completely ignored. They are there for the coder to make notes or for other coders to use as notes or instructions, etc. 

We use the CSS property background-image to display an image inside a HTML element. More than one image can be displayed inside a HTML element. This video will explain how to do this.

We look at background images with HTML elements and look at the image repeat CSS styling Property. Images inside a background image will repeat by default, but you can stop the image repeating. Both ways are useful when it comes to styling HTML elements using the background image CSS property.

You can also put linear gradient patterns in side a HTML element as a background image. This lecture will show you how to do this. This can be a colourful way of doing things and making webpages stand out with the right effects.

This lecture looks at placing a radial gradient as a background image in a HTML element. With some colourful though and by placing another image on top, this can make webpages look very nice. 

This lecture will cover the default setting of all HTML elements background image style settings and how to return CSS styling back to a default setting and remove a background image from a HTML element.

The box model shows the usage of styling HTML elements with the padding, margin and border CSS properties. With out knowing, you will be styling with the box model all the time when creating web pages.

The CSS property height is used to set the height of a HTML element. Also, the CSS property width is used to set the width of a HTML element.

We use the CSS Property border style to indicate which border style we require for our HTML element. We will look at different border styles available in CSS.

Once we have decided on a border style for our HTML element, we need to decide how thick our border will be. We look at how to change the width of borders of our HTML elements.

We have decided in previous videos on a border style and how thick we want our HTML element border. Now we can look at changing the colours of these element borders in CSS.

Finally, we can look at adding some smooth curved corners to our HTML element borders by using the Border Radius CSS Property.

We can add space between our HTML element's content and the edge of the HTML element using the CSS property padding. This allows us to make content inside elements look better on our webpage.

The CSS property margin allows us to add space between a selected HTML element and other elements on the webpage. This is another attractive way to arrange HTML elements.