WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

How To Add CSS

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


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


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

Properties

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

Previous Next