HTML Stylesheets - Learn How to Style Web Pages with CSS

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:

Inline Styles
Internal Styles (Embedded CSS)
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>

</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 ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.