Skip to content

Instantly share code, notes, and snippets.

@znarfm

znarfm/external.html

Created March 16, 2025 11:20
Show Gist options
  • Save znarfm/ffc89bc13ffbc8bce11298c67f7357fc to your computer and use it in GitHub Desktop.
Save znarfm/ffc89bc13ffbc8bce11298c67f7357fc to your computer and use it in GitHub Desktop.
Download ZIP
Three ways of using CSS
Raw
external.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>External CSS Example</title>
</head>
<body>
<main class="container">
<h1>External CSS Example</h1>
<p>
External CSS links to a separate CSS file that contains all the styling
rules. This is the most common and recommended way to apply CSS.
</p>
<section class="info-box">
<h2>How External CSS Works:</h2>
<p>
External CSS is stored in a separate .css file and linked from HTML
documents. This allows the same styles to be applied across multiple
pages.
</p>
</section>
<pre class="code-box">
&lt;!-- How you would link to an external stylesheet --&gt;<br />
&lt;head&gt;<br />
&nbsp;&nbsp;&lt;link rel="stylesheet" href="styles.css"&gt;<br />
&lt;/head&gt;
</pre>
<h3>Example Elements with External CSS:</h3>
<button>Styled Button</button>
<section class="flex-container">
<article class="flex-box pink">Box 1</article>
<article class="flex-box green">Box 2</article>
<article class="flex-box blue">Box 3</article>
</section>
<h3>Advantages of External CSS:</h3>
<ul>
<li>One file can style multiple HTML pages</li>
<li>Completely separates content from presentation</li>
<li>Makes maintenance easier and more efficient</li>
<li>Reduced file size and code duplication</li>
<li>Browser caching improves load times on subsequent page visits</li>
</ul>
<h3>Disadvantages of External CSS:</h3>
<ul>
<li>Additional HTTP request required to load the stylesheet</li>
<li>Until the CSS is loaded, the page might appear unstyled</li>
<li>Requires file management between HTML and CSS files</li>
</ul>
<footer class="footer">
This page demonstrates how an external CSS file would work!
</footer>
</main>
</body>
</html>
Raw
inline.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inline CSS Example</title>
</head>
<body
style="
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: silver;
"
>
<main
style="
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
"
>
<h1
style="
color: blue;
text-align: center;
border-bottom: 2px solid blue;
padding-bottom: 10px;
"
>
Inline CSS Example
</h1>
<p style="font-size: 18px; line-height: 1.6; color: dimgray">
Inline CSS is applied directly to HTML elements using the
<code>style</code> attribute. This paragraph has inline styling for font
size, line height, and text color.
</p>
<div
style="
background-color: lightgray;
border-left: 4px solid blue;
padding: 15px;
margin: 20px 0;
"
>
<h2 style="color: blue; margin-top: 0">How Inline CSS Works:</h2>
<p style="margin-bottom: 0">
Inline CSS uses the <code>style</code> attribute directly on HTML
elements. Each CSS property and value is separated by a semicolon.
</p>
</div>
<h3 style="color: blue">Example Elements with Inline CSS:</h3>
<button
style="
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
"
>
Styled Button
</button>
<section style="margin-top: 20px; display: flex; gap: 10px">
<article
style="
flex: 1;
background-color: pink;
padding: 15px;
border-radius: 4px;
text-align: center;
"
>
Box 1
</article>
<article
style="
flex: 1;
background-color: lightgreen;
padding: 15px;
border-radius: 4px;
text-align: center;
"
>
Box 2
</article>
<article
style="
flex: 1;
background-color: skyblue;
padding: 15px;
border-radius: 4px;
text-align: center;
"
>
Box 3
</article>
</section>
<h3 style="color: blue; margin-top: 20px">Advantages of Inline CSS:</h3>
<ul style="line-height: 1.6">
<li style="margin-bottom: 10px">
Quickly apply styles to a single element
</li>
<li style="margin-bottom: 10px">No need for ID/class selectors</li>
<li style="margin-bottom: 10px">
Highest specificity (overrides other CSS methods)
</li>
</ul>
<h3 style="color: blue">Disadvantages of Inline CSS:</h3>
<ul style="line-height: 1.6">
<li style="margin-bottom: 10px">Mixes content with presentation</li>
<li style="margin-bottom: 10px">
Difficult to maintain for larger projects
</li>
<li style="margin-bottom: 10px">
Cannot reuse styles across multiple elements
</li>
<li style="margin-bottom: 10px">
Code becomes lengthy and harder to read
</li>
</ul>
<footer
style="
margin-top: 30px;
text-align: center;
font-style: italic;
color: dimgray;
"
>
This entire page is styled using inline CSS only!
</footer>
</main>
</body>
</html>
Raw
internal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Internal CSS Example</title>
<style>
/* Page Layout */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: silver;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Typography */
h1 {
color: blue;
text-align: center;
border-bottom: 2px solid blue;
padding-bottom: 10px;
}
h2,
h3 {
color: blue;
}
p {
font-size: 18px;
line-height: 1.6;
color: dimgray;
}
/* Components */
.info-box {
background-color: lightgray;
border-left: 4px solid blue;
padding: 15px;
margin: 20px 0;
}
.info-box h2 {
margin-top: 0;
}
.info-box p {
margin-bottom: 0;
}
button {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.flex-container {
margin-top: 20px;
display: flex;
gap: 10px;
}
.flex-box {
flex: 1;
padding: 15px;
border-radius: 4px;
text-align: center;
}
.pink {
background-color: pink;
}
.green {
background-color: lightgreen;
}
.blue {
background-color: skyblue;
}
/* Lists */
ul {
line-height: 1.6;
}
li {
margin-bottom: 10px;
}
/* Footer */
.footer {
margin-top: 30px;
text-align: center;
font-style: italic;
color: dimgray;
}
</style>
</head>
<body>
<main class="container">
<h1>Internal CSS Example</h1>
<p>
Internal CSS is defined within the <code>&lt;style&gt;</code> tags in
the <code>&lt;head&gt;</code> section of an HTML document. This
paragraph has styling defined in the head of this document.
</p>
<section class="info-box">
<h2>How Internal CSS Works:</h2>
<p>
Internal CSS (also called embedded CSS) is placed inside
<code>&lt;style&gt;</code> tags in the head section. It applies to the
entire page but doesn't affect other HTML documents.
</p>
</section>
<h3>Example Elements with Internal CSS:</h3>
<button>Styled Button</button>
<section class="flex-container">
<article class="flex-box pink">Box 1</article>
<article class="flex-box green">Box 2</article>
<article class="flex-box blue">Box 3</article>
</section>
<h3>Advantages of Internal CSS:</h3>
<ul>
<li>Classes and IDs can be used to reuse styles</li>
<li>Separates CSS from HTML structure</li>
<li>No need for extra files</li>
<li>Changes apply to multiple elements at once</li>
</ul>
<h3>Disadvantages of Internal CSS:</h3>
<ul>
<li>Increases page load time for larger style sheets</li>
<li>Not efficient for multiple pages that share the same styles</li>
<li>
Mixing document structure with presentation (though better than
inline)
</li>
</ul>
<footer class="footer">
This entire page is styled using internal CSS only!
</footer>
</main>
</body>
</html>
Raw
style.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: silver;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
color: blue;
text-align: center;
border-bottom: 2px solid blue;
padding-bottom: 10px;
}
h2,
h3 {
color: blue;
}
p {
font-size: 18px;
line-height: 1.6;
color: dimgray;
}
.info-box {
background-color: lightgray;
border-left: 4px solid blue;
padding: 15px;
margin: 20px 0;
}
.info-box h2 {
margin-top: 0;
}
.info-box p {
margin-bottom: 0;
}
button {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.flex-container {
margin-top: 20px;
display: flex;
gap: 10px;
}
.flex-box {
flex: 1;
padding: 15px;
border-radius: 4px;
text-align: center;
}
.pink {
background-color: pink;
}
.green {
background-color: lightgreen;
}
.blue {
background-color: skyblue;
}
/* Lists */
ul {
line-height: 1.6;
}
li {
margin-bottom: 10px;
}
/* Footer */
.footer {
margin-top: 30px;
text-align: center;
font-style: italic;
color: dimgray;
}
.code-box {
background-color: #f8f8f8;
padding: 15px;
border-radius: 4px;
border: 1px solid #ddd;
font-family: monospace;
margin: 15px 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment