### 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. ![Basic CSS Syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8i93rts62yjjvlvjd3oh.png) 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]](https://www.dofactory.com/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 (`*`). ```css * { 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: ```html

I am a header

I am a paragraph

I am a second header

I am a second paragraph

``` ```css /*Selects all

elements in the html document/ h1 { color: blue; } / Selects all
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: ```html
How are you doing?

I am doing great, thank you!

What do you plan to do today?

I plan on learning the basics of CSS!
``` ```css /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: ```html
Hello world, I am unique!!!
``` ```css /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: ```css #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: ```css #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: ```html
How are you doing?

What do you plan to do today?
``` In this case, we have two `
` 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: ```css .question.unread { color: red; } ``` In this example, the `.question.unread` selector targets the `
` 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](https://www.freecodecamp.org/news/css-combinators-to-select-elements/)) 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 `` tag within the `` tag of your HTML file. Here's an example of how the `` tag is used to connect a CSS file (styles.css) to an HTML file (index.html): ```html ``` The `` 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 `` 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 `

This is a heading

This is a paragraph.

``` In this example, the CSS rules for the `

` and `
` elements are defined within the `

adeolapraise

The Basics of CSS: Everything You Need to Know to Get Started

Join Our Newsletter. No Spam, Only the good stuff.