CSS
Cascading Style Sheets (CSS) is a language used to control the presentation and layout of HTML documents. While HTML provides the structure and content of a webpage, CSS is responsible for the visual appearance.
Inline Styles
Inline styles are defined directly on an HTML element using the style attribute. They override any external or internal CSS.
Let modify our web page:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p style="color: white; background: blue;">This is a paragraph of text.</p>
</body>
</html>
Inline CSS lives in the style attribute in the form of properties: values;.
Properties determine the style attributes of the element, like color, font-size, background, etc.
Values specify the desired value for each property, such as red,
16px, or url("image.jpg").
Mixing styles with content looks messy? And, what if you have multiple paragraphs and want to style them consistently?
External Stylesheets
CSS can be separated from HTML. Create a separate file styles.css to
house your styles. Link it to your HTML using the <link> tag:
<link rel="stylesheet" href="styles.css">
Now you need a way to specify which elements you want to style. That's where selectors come into play.