Inline CSS
Part of the Styling with CSS section of Coddy's HTML journey — lesson 6 of 76.
Inline CSS is a method of adding CSS styles directly to an HTML element using the style attribute. This approach allows you to apply unique styles to individual elements without the need for external or internal stylesheets. Inline styles are useful for making quick, specific style changes to a single element.
Here's the basic syntax for using inline CSS:
<element style="property: value;"></element><element>: The HTML element you want to style.style: An attribute that contains the CSS declarations.
property: The CSS property you want to set (e.g., color, font-size).value: The value you want to set for the property (e.g., blue, 16px).
For example:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>In this example, the paragraph element has inline styles that set the text color to blue and the font size to 16 pixels. These styles will only apply to this specific paragraph element.
Challenge
EasyYou are given an HTML document with a paragraph element. Use inline CSS to style the paragraph with the following properties:
- Set the text color to red.
- Set the font size to 18 pixels.
Check the example in the lesson for direction!
Cheat sheet
Use the style attribute to apply CSS directly to HTML elements:
<element style="property: value;"></element>Example with multiple properties:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>Try it yourself
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.
All lessons in Styling with CSS
5 Colors and Backgrounds
Background ColorHEX ColorsRGB ColorsTransparency with RGBARecap Challenge #1