HTML and CSS: Connect Structure and Presentation

Learn how HTML and CSS work together, including inline styles, embedded stylesheets and external CSS files.

HTML and CSS have different jobs

HTML describes page structure and content. CSS controls presentation, including color, typography, spacing and layout. Keeping those responsibilities clear makes pages easier to update.

Three ways to add CSS

• Inline styles: a style attribute applies declarations to one element. Use it mainly for small examples or special cases.
• Embedded stylesheet: a <style> element in the document head adds rules to that page.
• External stylesheet: a separate CSS file can be shared across pages and is usually the easiest approach to maintain for a site.

<!-- In the document head -->
<link rel="stylesheet" href="styles.css">

Continue with the CSS tutorial to learn selectors, layout and responsive styling.

Examples

• View the inline CSS example (opens in a new tab)
• View the embedded stylesheet example (opens in a new tab)
• View the external CSS example (opens in a new tab)