Menu OmegaForms.Net

HTML: Styles

Hi there, young web designer! Now that you've learned about HTML elements and attributes, it's time to make your web pages look even better with styles. Styles allow you to control the appearance of your web page, like colors, fonts, and more. In this tutorial, we will introduce you to HTML styles using inline CSS (Cascading Style Sheets) and the style attribute. Let's get started!

  1. What is CSS? CSS stands for Cascading Style Sheets, and it is used to control the appearance of HTML elements on a web page. It helps you apply styles like colors, fonts, spacing, and more to your HTML elements. We can use inline CSS by adding the style attribute to our HTML tags.

  2. The style Attribute To apply CSS styles directly to an HTML element, we use the style attribute. The value of this attribute should be CSS properties and their corresponding values, separated by a colon and a space, like this: property: value. You can add multiple styles by separating them with a semicolon and a space. For example: <p style="color: blue; font-size: 16px;">This is a styled paragraph.</p>

  3. Common CSS Properties Here are some common CSS properties you can use to style your HTML elements:

  • color: Sets the text color. Example: color: red;
  • font-family: Sets the font type. Example: font-family: Arial, sans-serif;
  • font-size: Sets the font size. Example: font-size: 18px;
  • background-color: Sets the background color. Example: background-color: yellow;
  • text-align: Sets the text alignment. Example: text-align: center;
  • border: Sets a border around the element. Example: border: 2px solid black;
  1. Practice Time Now it's time to practice styling your web page using inline CSS and the style attribute! Follow these steps:

Step 1: Open the HTML file you created in the previous tutorial, or create a new one.

Step 2: Add the style attribute to some of your HTML elements and experiment with different CSS properties. For example:

  • Change the color and font size of your heading and paragraph.
  • Set the background color of your entire web page by adding a style attribute to the <body> tag.
  • Align your favorite hobby paragraph to the center using the text-align property.
  • Add a border to your image using the border property.

Step 3: Save your file and open it in a web browser to see your styled web page!

Remember, this tutorial covers inline CSS, which is great for learning and practicing. However, for larger projects, it's better to use external or internal CSS, which allows you to apply styles to multiple elements at once and keep your HTML code clean.

Keep experimenting with different styles, and soon your web pages will look fantastic!