Style with HTML CSS

In this article, we’ll take a closer look at HTML CSS, what they do, and how they work together to bring your web pages to life.

HTML and CSS are two of the core technologies for building web pages.

Together, they form the backbone of the modern web, providing developers with the tools to create visually appealing, interactive, and dynamic websites.

CSS or Cascading Style Sheets are used in HTML.

The CSS language saves a great deal of time and effort. Multiple web pages can be laid out simultaneously with it.

CSS = Styles and Colors



CSS: What is it?

Cascading Style Sheets (CSS) is a language that is used to format the layout of a webpage.

Using CSS, you have the ability to alter many aspects of your website design, including color, font, font size, the spacing between elements, how elements are positioned and laid out, what background images or background colors should be used, how elements will display on different devices and screen sizes, and that’s just the beginning.

An element’s style will cascade down to all its children when it is applied to its parent element. For example, if you set the body text’s color to “blue”, all headings, paragraphs, and other text elements within the body will also be the same color (unless you specify otherwise).

Here’s a simple stylesheet

To illustrate HTML CSS, we apply a very simple stylesheet to a document as follows:


<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test page</title> <style> p { color: blue; } </style> </head> <body> <p>This is a paragraph with blue color</p> </body> </html>

Multiple styles

Notice how, in this example of HTML CSS, the conflicting declarations in the following <style> element override those in the preceding one, if they have equal precision.


<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test page</title> <style> p { color: blue; background-color: red; padding: 8px; border: 2px solid; } </style> <style> p { color: purple; background-color: white; } </style> </head> <body> <p>This is a paragraph with multiply styles applied on it.</p> </body> </html>

Making Use of CSS

There are three ways to add CSS to HTML documents:

  • Internal – Inserting a <style> element in the <head> section

  • External – Insert a <link> element to link to an external CSS file

  • Inline – using a style attribute within an HTML element

It is most common to keep CSS styles in external files. It is however our intention to use inline and internal styles in this tutorial. This will allow us to demonstrate how to use them more easily and get you to be able to try them out more easily.

Inline CSS

When an inline CSS style sheet is used, it is used to apply a unique style sheet to just one element of an HTML document.

Inline CSS is used on HTML elements using the style attribute.

This example sets the green text color of the <h1> element to orange, and the red text color of the <p> element:


<!DOCTYPE html> <html> <body><h1 style="color:green;">This is green color H1 Heading</h1> <p style="color:orange;">This is orange color paragraph.</p></body> </html>

Internal CSS

An internal CSS file is used for a single HTML page.

Internal CSS is defined within an HTML page’s “head” section, within a “style” element.

As you can see in the following example, the text color of ALL the h1 elements (on that page) is green, and the text color of ALL the <p> elements is red.

A powdergreen background will also be displayed on the page.


<!DOCTYPE html> <html> <head> <style> body {background-color: powdergreen;} h1 {color: green;} p {color: red;} </style> </head> <body><h1>This is a just H1 tag heading</h1> <p>This is just a paragraph.</p></body> </html>

External CSS

The style of many HTML pages is defined by an external style sheet.

The header section of each HTML page should contain a link to the external style sheet:


<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body><h1>This is a H1 heading</h1> <p>This is just a paragraph.</p></body> </html>

Any text editor can be used to write the external style sheet. You must save the file as a .css file without any HTML code.

An example of “styles.css” can be found here:

body {
background-color: lightgreen;
h1 {
color: black;
p {
color: pink;
Tip: Change one file to change the entire look of an entire website!

CSS color scheme, fonts, and sizes

Our goal here is to demonstrate some CSS properties that are commonly used. We’ll discuss them in more detail later.

The CSS color property specifies the color of the text.

The CSS font-family property specifies which font to use.

The CSS font-size property determines what font size to use.

Example: How to use the color, font-family, and font-size properties in CSS.


<!DOCTYPE html> <html> <head> <style> h1 { color: green; font-family: verdana; font-size: 420%; } p { color: blue; font-family: courier; font-size: 180%; } </style> </head> <body> <h1>This is a H1 heading</h1> <p>This is a paragraph.</p> </body> </html>

CSS Border

HTML elements are surrounded by borders defined by CSS border.

For nearly all HTML elements, you can define a border.

The CSS border property can be used in the following ways:


<!DOCTYPE html> <html> <body> p { border: 3px solid green; } </body> </html>

CSS Padding

Text and border padding are defined by the CSS padding property.

Here is an example of how CSS border and padding properties can be used:


<!DOCTYPE html> <html> <body> p { border: 4px solid powderorange; padding: 35px; } </body> </html>

CSS Margin

CSS margins define how much space should be left outside of borders.

The following example illustrates the use of CSS border and margin properties:


<!DOCTYPE html> <html> <body> p { border: 3px solid powdergreen; margin: 40px; } </body> </html>

CSS Text Decoration

CSS text decoration defines the text decor that how it should be displayed.

The following example illustrates the use of CSS text decoration properties:


<!DOCTYPE html> <html> <head> <style> h1 { text-decoration: underline; } p{ text-decoration: line-through; } </style> </head> <body> <h1>This is a just H1 tag heading</h1> <p>This is just a paragraph.</p> </body> </html>

You can reference an external style sheet with either its full URL or a path relative to the current web page.

An example of linking to a style sheet with a full URL is as follows:


<!DOCTYPE html> <html><body><br> <br><br> <link rel="stylesheet" href="/html/styles.css"><br> <br></body></html>

The following example shows how to connect a Css external file to a HTML document:


<!DOCTYPE html> <html><body><br> <br> <br> <link rel="stylesheet" href="styles.css"><br> <br></body></html>

Chapter Summary

  • Utilize the HTML style attribute for inline styling.
  • Utilize the HTML <style> element to specify internal CSS.
  • Utilize the HTML <link> element to guide to an external CSS file.
  • Utilize the HTML <head> element to store <style> and <link> elements.
  • Utilize the CSS color property for text colors.
  • Utilize the CSS font-family property for text fonts.
  • Utilize the CSS font-size property for text sizes.
  • Utilize the CSS border property for borders.
  • Utilize the CSS padding property for space inside the border.
  • Utilize the CSS margin property for space outside the border.
  • Utilize the CSS text-decoration property for decoration the text.

Tip: The CSS Tutorial contains much more information about CSS.

HTML Style Tags

<style>Specifies style statement for an HTML document
<link>Describes a link between a document and an external resource

Visit our HTML Tag Reference to see a list of all available HTML tags.

Advantages of using Style with HTML CSS

CSS offers several benefits when it comes to styling HTML web pages:

  • Separation of Concerns: CSS lets you separate your web page’s content and structure (defined in HTML) from its visual presentation (defined in CSS). In this way, you can maintain and update your code more easily, since changes to one aspect don’t necessarily affect the others.
  • Consistency and Reusability: CSS defines styles that are applied consistently across multiple web pages, making it easier for your website to maintain a consistent look and feel. Additionally, you can reuse styles for similar elements on different pages, resulting in less code.
  • Flexibility and Control: CSS gives you fine-grained control over the visual presentation of your website. Creating unique and customized designs is made easy by adjusting the size, position, color, and other visual properties of individual elements.
  • Accessibility: CSS simplifies the process of creating accessible web pages by separating content from presentation. Using CSS, you can adjust font size and spacing for improved readability or define high-contrast color schemes.
  • Faster Load Times: CSS allows you to define the visual presentation of your web page globally, reducing the amount of code required. As a result, loading times can be shortened and performance can be improved, especially on mobile devices with slower internet connections.


As a web developer, you and others can benefit from CSS’s benefits when styling HTML pages. Using CSS allows you to separate content from presentation, allowing you to design your web pages with greater flexibility, control, and consistency.

Furthermore, CSS can speed up loading times, improve accessibility, and simplify maintenance and updating. It is possible to create visually stunning, responsive, and accessible web pages that are optimized for performance across various devices and platforms when you master HTML and CSS.

If this article met your educational needs, do share this content with your friends by clicking on the links below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *