Introduction
An HTML document in its standard form can be visually unappealing but is typically still readable due to browsers' built-in styles. For example, headings are usually larger than other texts, paragraphs have spaces between them, and links are underlined and colored blue. These default styles are provided by the browser, such as Chrome's default style guide.
Every browser has its style guide and visually represents HTML elements differently. For instance, the appearance of a button may vary when viewed in Chrome compared to Firefox.
While browsers provide default styles that make HTML documents readable and visually consistent, there are times when you may want to enhance the document's personality. This is where Cascading Style Sheets (CSS) come in.
In this article, we will delve into the fundamental aspects of CSS, including its syntax, the techniques for selecting HTML elements using CSS, and the different methods for adding CSS to an HTML document. By the end of this article, you will have a comprehensive understanding of CSS and be equipped with the basic knowledge to style and enhance your HTML documents effectively.
Prerequisites
- Basic knowledge of HTML. You have a good understanding of HTML and how to create a simple web page using HTML tags.
What is CSS?
Cascading Style Sheet (CSS) is a style sheet language used to specify and manipulate the visual appearance of an HTML document. An HTML document consists of marked-up elements such as paragraphs, texts, images, tables, and more. CSS allows you to define how these elements should be styled and displayed, giving you control over the layout, colors, fonts, spacing, and positioning.
CSS Syntax
CSS consists of a set of rules that define how the browser should display the elements in a document. Each rule consists of one or more selectors and a declaration block.
The picture above describes the basic CSS syntax. Here, a header element is styled, transforming it from a standard header to a blue header. The selector specifies the element we want to style, in this case, the h1 element representing the header. The declaration block is enclosed within curly braces and contains the property we want to manipulate and the corresponding value. In this case, the property is the color of the header, and we assigned it a value of blue.
It's important to note that we can have multiple selectors and various ways to select elements (more on this in the next section). Additionally, a declaration block can contain numerous declarations separated by semicolons.
Note: CSS offers a wide range of properties. Refer to this link [CSS Properties] to explore more CSS properties.
Basic CSS Selectors
CSS selectors are used to refer to the HTML elements a style applies to. It tells the browser the specific element that is being selected for styling. There are different types of CSS selectors; below are basic CSS selectors you should know:
Universal Selector
As the name implies, the universal selector is used to select elements of all types. The syntax for it is an asterisk (*).
* {
color: red;
}
In the example above, every element is selected and would have the color: red applied to it.
Type Selector
Type selector, also known as element selector, selects all elements of a specific type within a document. The syntax is simply the tag name of the element you want to select.
For example:
<h1>I am a header</h1>
<p>I am a paragraph</p>
<h1>I am a second header</h1>
<p>I am a second paragraph</p>
/*Selects all <h1> elements in the html document*/
h1 {
color: blue;
}
/* Selects all <p> elements in the html document */
p {
background-color: black;
color: white;
}
Class Selector
Class selectors in CSS are used to select all elements that belong to the same class.
In HTML, a class is an attribute used to group together multiple elements under a specific name. The class name should not contain spaces; if you need to include multiple words, it is common practice to use hyphens to separate them. Each element can have multiple classes assigned to it, allowing for flexible styling and organization.
To select elements based on their class, you use class selectors in CSS. A class selector is denoted by a dot (.) followed by the class name.
Here's an example:
<p class="question">How are you doing?<p>
<p class="response">I am doing great, thank you!</p>
<p class="question">What do you plan to do today?</p>
<p class="response">I plan on learning the basics of CSS!</p>
/*Selects all elements with the "question" class*/
.question {
color: red;
}
/*Selects all elements with the "response" class*/
.response {
color:green
}
ID Selector
The ID selector is used to select an element with a specific ID. It is important to note that "an" is used instead of "all." This distinction arises from the fact that, unlike the class attribute, where multiple elements can have the same class name, only one element can be assigned a specific ID in HTML. It is not possible for more than one element to have the same ID.
To select and style an element that has been assigned an ID, you use the ID selector. The ID selector is indicated by the hash symbol (#) followed by the ID name.
Here's an example:
<p id="unique">Hello world, I am unique!!!<p>
/*Selects an element with an ID "unique"*/
#unique {
color: white;
background-color: black;
}
Grouping Selectors
There are instances where you may want elements with different classes, IDs, or tag names to have the same styling. Writing separate CSS rules for each selector would result in redundant and lengthy code. To address this, you can group selectors using a comma (,) to apply the same styles to multiple selectors simultaneously.
Here's an example:
#title {
color: black;
font-size: 22px;
}
.section-header {
color: black;
font-size: 22px;
}
h1 {
color: black;
font-size: 22px;
}
In the code snippet above, three different selectors (#title, .section-header, and h1) share the same styling declarations. To avoid repetition, you can group them as shown below:
#title, .section-header, h1 {
color: black;
font-size: 22px;
}
Chaining Selectors
In other cases, you might want to be more specific when selecting elements for styling. Take, for instance:
<p class="question read">How are you doing?<p>
<p class="question unread">What do you plan to do today?</p>
In this case, we have two <p> elements with the class question. Each element also has a unique second class name assigned to it: read and unread.
Let's say we want to style only the paragraph with the unread class and make its text color red, without affecting the other paragraph. We can achieve this by chaining selectors together.
The syntax for chaining selectors involves writing them together without any space between them. In our case, we can use the following CSS selector:
.question.unread {
color: red;
}
In this example, the .question.unread selector targets the <p> element that has both the question and unread classes assigned to it. By specifying both classes, we create a more specific selector that only applies the defined CSS rules to that specific element.
It's important to note that you can chain any combination of selectors, except for chaining more than one type(element) selector. Chaining selectors allow you to narrow your selection and precisely target elements that meet specific criteria.
💡 Note: There are additional selectors that can help you target elements with greater precision. One such selector is the combination selector. Combination selectors allow you to combine different selectors to create more specific targeting. I recommend reading the following resource (Combination Selectors) to dive deeper into combination selectors.
Adding CSS to an HTML Document
Now that we understand the power of CSS for enhancing the visual appeal of our HTML documents and how to select HTML elements for styling let's explore the different methods to apply CSS rules to our HTML documents. There are three standard methods for doing so.
Method 1: External CSS
In the external CSS method, you keep your HTML and CSS code in separate files. The CSS code is stored in its own file, typically with an .css extension. To link the CSS file to your HTML document, you use the <link> tag within the <head> tag of your HTML file.
Here's an example of how the <link> tag is used to connect a CSS file (styles.css) to an HTML file (index.html):
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css" />
</head>
The <link> tag has two essential attributes: rel and href. The rel attribute defines the relationship between the current HTML document and the linked document. In the case of CSS, the rel attribute is set to "stylesheet" to indicate that the linked document is a style sheet.
The href attribute specifies the location of the CSS file. It can be either a relative or an absolute path. In the example above, the CSS file (styles.css) is located in the same directory as the HTML file, so the relative path "styles.css" is provided as the value of the href attribute.
By using the <link> tag, the HTML document retrieves the CSS file and applies the styles defined in the CSS file to the corresponding HTML elements. The external CSS method is commonly advised because separating your CSS and HTML files allows for easier code maintenance and organization.
Method 2: Internal CSS
In the internal CSS method, you include your CSS rules directly within the HTML document. By placing a <style> tag in the
Here's an example of how to use the internal CSS method:
<head>
<style>
h1 {
font-size: 24px;
}
p {
font-size: 18px;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</head>
In this example, the CSS rules for the <h1> and <p> elements are defined within the <style> tags in the
The internal CSS method is suitable for applying unique styles to a single HTML page without needing an external CSS file. However, in cases where you have multiple pages that require the same style, this method can become cumbersome as you would need to repeat the same CSS code in each HTML file.
Method 3: Inline CSS
The inline CSS allows you to apply styling directly to HTML elements using the style attribute within their opening tags. This method allows you to define specific styles for individual elements without needing selectors or external style sheets.
To use inline CSS, you include the style attribute within the HTML tag and set its value to a list of CSS declarations enclosed in double quotes. Each declaration consists of a property and a corresponding value, separated by a colon. If you have multiple declarations, you can separate them with a semicolon.
Here's an example:
<body>
<p style="color: white; background-color: black;">This is an inline styed paragraph</p>
</body>
The inline CSS can be a convenient way to apply styles to individual elements quickly. However, it is generally not recommended for extensive use. This is because inline styles can make your HTML code messy and harder to maintain, especially when you have multiple elements with similar styles.
Conclusion
Congratulations! You now have a solid understanding of the basics of CSS, equipping you with the necessary knowledge to transform your HTML documents from mundane to visually captivating. With CSS, you can style your web pages and infuse them with personality and visual appeal. So go ahead and unleash your creativity to make your HTML documents shine!
If you enjoyed this content, please do well to leave a reaction and share to encourage me to write more articles like this. Also, if you have any questions or feedback, please let me know in the comments section.
Thank you for reading!😃
Top comments (0)