CSS Syntax
CSS consists of rulesets that define how HTML elements should be styled. A ruleset consists of a selector and one or more property-value pairs.
Example:
selector {
property: value;
property: value;
/* more properties... */
}
In this example, the selector identifies the HTML element(s) to which the styles should be applied. The property defines the specific aspect of the element's appearance, and the value specifies the desired value for that property.
Applying Styles
To apply styles to HTML elements, you can use different types of selectors. Let's explore a few common selector types:
Tag Selector
A tag selector selects elements based on their HTML tag name.
Example:
p {
color: blue;
}
In this example, the p selector selects all <p> elements and sets their text color to blue.
Class Selector
A class selector selects elements based on the presence of a specific class attribute value
Example:
.my-class {
font-weight: bold;
}
In this example, the .my-class selector selects all elements with the class="my-class" attribute and makes the text bold.
ID Selector
An ID selector selects a specific element based on its unique ID attribute value.
Example:
#my-id {
background-color: yellow;
}
In this example, the #my-id selector selects the element with id="my-id" and sets its background color to yellow.
Inline CSS
Inline CSS is used to apply a unique style to a single HTML element. It uses the style attribute of an HTML element. This method of insertion applies the CSS rules directly into the HTML file.
An example of inline CSS is as follows:
However, inline CSS is rarely used because it mixes HTML with CSS making the document harder to read and maintain. It also doesn't leverage the advantage of CSS being able to control multiple elements at once.
Internal CSS
Internal CSS, also known as embedded CSS, is used to apply CSS to a whole HTML page. The CSS rules are put in a <style> block in the <head> section of the HTML file.
An example of internal CSS is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: crimson;
}
</style>
</head>
<body>
<p>This is a paragraph with internal CSS.</p>
</body>
</html>
External CSS
External CSS involves creating a separate .css file and linking it to your HTML document. This method of insertion aids in minimizing code redundancy and promotes reusability. A single external stylesheet can control the appearance of multiple HTML pages, making it easier to maintain and modify the styling of numerous pages at once.
Here's an example of how to link to an external CSS file:
1. First create an external CSS file inside your project folder (style.css).
p {
color: green;
}
2. Then, link this CSS file to your HTML document.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>This is a paragraph with external CSS.</p>
</body>
</html>
Cascading and Specificity
CSS follows a cascading and specificity model, which means that multiple styles can be applied to an element, and the most specific style takes precedence.
Inline Styles
Inline styles are applied directly to individual HTML elements using the style attribute.
Example:
<p style="color: red;">This is a red paragraph.</p>
In this example, the inline style overrides any other styles applied to the <p> element.
Specificity
The specificity of a selector determines its priority when conflicting styles are applied. Inline styles have the highest specificity, followed by ID selectors, class selectors, and tag selectors.
Common CSS Properties
CSS provides a wide range of properties to control the appearance of HTML elements. Here are a few commonly used properties:
- color: Specifies the text color.
- background-color: Sets the background color.
- font-family: Defines the font family to use for text.
- font-size: Specifies the font size.
- margin: Controls the outer spacing of an element.
- padding: Sets the inner spacing of an element.
- border: Defines the border style, width, and color.
Example HTML:
<h1>This is a heading</h1>
Example CSS:
h1 {
color: blue;
font-family: Arial, sans-serif;
margin-bottom: 20px;
padding: 10px;
border: 1px solid black;
}
In this example, the <h1> element will have blue text color, use the Arial font (or sans-serif as a fallback), have a bottom margin of 20 pixels, 10 pixels of padding, and a solid black border with a width of 1 pixel.
By applying CSS styles to your HTML elements, you can customize the appearance of your webpages, making them visually appealing and aligned with your design goals.
Congratulations on learning about HTML Styles! In the next lecture, we'll dive deeper into CSS and explore advanced selectors, responsive design, and more.
Keep practicing and experimenting with CSS to enhance the visual aesthetics of your webpages.
