WS WhereIsStuff
Tutorial Guides
Log In
Sign Up

Advertisement

Google Ad Slot: content-top

Style sheet

~1 min read · HTML
On this page
❮ Previous Next ❯

In HTML, styles control the visual presentation of elements on a webpage. Styles are primarily defined using CSS (Cascading Style Sheets). CSS allows you to apply consistent formatting, layout, colors, fonts, and other visual aspects to your HTML elements.

Applying Styles in HTML


There are three main ways to apply styles to HTML elements:

  1. Inline Styles
  2. Internal Styles (Embedded CSS)
  3. External Styles (External CSS)

Inline Styles

     Inline styles are applied directly within the HTML element using the style attribute.

Example
<p style="color: blue; font-size: 18px;">This is a blue paragraph with inline styles.</p>

Output

Output

Internal Styles (Embedded CSS)

    Internal styles are defined within a <style> tag inside the <head> section of the HTML document.

Example
<!DOCTYPE html>
<head>
<style>
body {
background-color: lightgray;
}
h1 {
color: green;
text-align: center;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph styled using internal CSS.</p>
</body>

Output

Output

External Styles (External CSS)

    External styles are defined in a separate CSS file, which is linked to the HTML document using the <link> tag.

Example (HTML)
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to Whereisstuff</h1>
<p>This is a paragraph styled using external CSS.</p>
</body>
Example (style.css)
body {
background-color: lightgray;
}

h1 {
color: green;
text-align: center;
}

p {
font-family: Arial, sans-serif;
font-size: 16px;
}

Output

Output

Properties

  • color: Changes the text color.
  • background-color: Changes the background color.
  • font-size: Changes the size of the text

❮ Previous Next ❯