HTML and CSS Basics
CSS (Cascading Style Sheets) controls the visual presentation of HTML elements — colors, fonts, layout, and spacing. HTML and CSS work together but serve different purposes: structure versus style.
There are three ways to add CSS: inline (style attribute), internal (<style> tag in head), and external (a separate .css file linked via <link>). External CSS is the recommended approach for real projects.
<link rel="stylesheet" href="styles.css">Linking external CSS
Use <link rel="stylesheet" href="styles.css"> inside <head> to apply styles from a separate file, keeping HTML clean and styles reusable across pages.
Internal CSS
A <style> block inside <head> lets you write CSS rules that apply to the whole current page without an external file.
<head>
<link rel="stylesheet" href="styles.css">
</head>(applies styles.css to the page)The link tag connects an external stylesheet to the HTML document.
<head>
<style>
p { color: green; }
</style>
</head>
<body>
<p>Green text</p>
</body>Green textInternal CSS in a <style> block affects all matching elements on the page.
Key points
- CSS controls layout, color, fonts, and spacing.
- Three ways to add CSS: inline, internal, external.
- External stylesheets are linked with <link> in <head>.
- External CSS is best practice for maintainability.