Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The <style> element contains CSS styling information for the document. It's placed in <head> and applies to the current page only.
Inline vs Internal vs External
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Methods</title>
</head>
<body>
<div class="style-types">
<div class="type-box inline">
<h3>Inline</h3>
<code>style="color:red"</code>
<p>Highest priority</p>
</div>
<div class="type-box internal">
<h3>Internal</h3>
<code><style>...</style></code>
<p>In <head></p>
</div>
<div class="type-box external">
<h3>External</h3>
<code><link rel="stylesheet"></code>
<p>Separate file</p>
</div>
</div>
</body>
</html>Loading preview...
Complete styling within HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal Styles</title>
</head>
<body>
<h1>Styled with <style></h1>
<p>All styling defined externally!</p>
<button class="button">Click Me</button>
</body>
</html>Loading preview...
You can have multiple style elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Style Tags</title>
</head>
<body>
<div class="card">
<h2>Styled Elements</h2>
<p>CSS applied from external stylesheet!</p>
</div>
</body>
</html>Loading preview...
Multiple <style> tags are valid and useful for organizing styles by component or purpose. Later styles override earlier ones (CSS cascade).
Styles adapt to screen size and theme
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Styles</title>
</head>
<body>
<div class="box">
<h2>Responsive Design</h2>
<p>Resize window to see color change!</p>
<p class="hint">Also supports dark mode!</p>
</div>
</body>
</html>Loading preview...
mediamedia="print"Apply styles only for specific media (print, screen)
typetype="text/css"MIME type (default: text/css, optional in HTML5)
titletitle="Dark Theme"Define alternative stylesheets