How CSS works with HTML

CSS for Web Development

0% completed

How CSS Works with HTML

CSS adds style to HTML elements. When you load an HTML page, the browser reads both the HTML and the CSS code. The browser then applies the style rules from the CSS code to the HTML elements.

There are three common ways to add CSS:

Inline CSS: You add style directly to an HTML element using the style attribute.
Internal CSS: You place style rules within a <style> block in the HTML document.
External CSS: You store style rules in a separate file. The HTML file links to this CSS file with a <link> tag.

Inline CSS Example

This example shows how to add CSS rules directly to HTML elements.

HTML

. . . .

Explanation:

The style attribute is used on the <h1> and <p> tags.
The <h1> text is blue.
The <p> text has a font size of 18 pixels.

Internal CSS Example

This example shows how to add CSS rules within the HTML file.

HTML

. . . .

Explanation:

The <style> block in the <head> section contains the CSS rules.
All <h1> elements get a red color.
All <p> elements have a font size of 18 pixels.

External CSS Example

This example shows how to add CSS rules by linking to a separate CSS file.

HTML file (index.html):

HTML

. . . .

CSS file (style.css):

HTML

. . . .

Explanation:

In the HTML file, the <link> tag connects to the CSS file named style.css.
The CSS file sets the <h1> text to green and the <p> text to have a font size of 18 pixels.

Each method has its use cases. For small changes, inline CSS might be enough. Use internal CSS when you want all styles in one file. External CSS works best for larger projects where you need to reuse the same styles across multiple pages.

.....

Like the course? Get enrolled and start learning!