Just Learn Code

Styling Webpages & Resizing Images: The Complete Guide to CSS

Styling Webpages Using CSS

In today’s world, creating a functional website or blog has become a crucial aspect of promoting your business or personal brand. It’s a great way to provide relevant information to your audience, share your ideas, or sell your products.

However, the final output of your website’s design, layout, and functionality depends on how well you can make use of the necessary tools available. CSS or Cascading Style Sheets is one such tool that helps you style and format your website’s content to achieve the desired look and feel.

In this article, we will discuss the three main ways you can use CSS to style your webpage:

Inline CSS,

Internal Style Sheet, and

External Style Sheet.

Inline CSS

Inline CSS is when the style attributes are defined within the HTML elements themselves. This method is useful when you need to apply specific styling to a particular HTML element.

For instance, if you want to change the color of a single heading or text, you can use

Inline CSS. It gives you the freedom to apply styling to individual elements rather than applying a general style that affects the entire webpage.

To use

Inline CSS, all you need to do is add the style attribute to the HTML element and define the property and value you want to apply. For example, the following code will change the color of the heading to red:

This is a heading

Internal Style Sheet

Internal Style Sheet allows you to define the style for multiple HTML elements within a single document. It’s useful when you need to apply a specific style to more than one HTML element or when you want to apply page-specific styling.

Unlike

Inline CSS,

Internal Style Sheets are contained within the head section of an HTML document and can define styles for a variety of HTML elements. To use an

Internal Style Sheet, first, you need to add the

In this example, the