Introduction to CSS Basic Structure

CSS (Cascading Style Sheets) is a markup language used to describe the presentation of a document written in HTML. It allows web developers to control the appearance of their web pages, such as the layout, colors, fonts, and more. In order to understand how CSS works, it is important to learn the basic structure of CSS.

The CSS Syntax

The basic syntax of CSS consists of a selector followed by a set of property-value pairs, enclosed in curly braces. The selector is used to target HTML elements that you want to style, while the property-value pairs define how those elements should be styled.

selector {
    property: value;
    /* more properties and values */
}

For example, to change the font color of all paragraphs in an HTML document to red, you would use the following CSS:

p {
    color: red;
}

CSS Selectors

CSS selectors are used to target HTML elements. There are several types of selectors available in CSS:

Element Selector: Targets all instances of a specific HTML element. For example, p targets all paragraphs.
ID Selector: Targets a specific HTML element with a unique ID attribute. For example, #myElement targets an element with id="myElement".
Class Selector: Targets HTML elements with a specific class attribute. For example, .myClass targets elements with class="myClass".
Attribute Selector: Targets HTML elements based on their attributes. For example, [type="text"] targets elements with type="text".
Pseudo-class Selector: Targets elements based on a certain state or condition. For example, a:hover targets links when the mouse hovers over them.

Internal CSS

Internal CSS is defined within a <style> element, which is placed inside the <head> section of an HTML document. The CSS rules within the <style> element apply to the whole HTML document. Here's an example:

<head>
  <style>
    /* CSS rules go here */
  </style>
</head>

External CSS

External CSS is defined in a separate .css file and linked to the HTML document using the <link> element. This allows you to apply the same CSS rules to multiple HTML documents. Here's an example:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Inheritance and Specificity

CSS follows a set of rules to determine which styles should be applied to an element. Inheritance allows child elements to inherit styles from their parent elements. Specificity determines which styles take precedence when multiple rules target the same element. Understanding these concepts is essential for effectively applying CSS styles.

Conclusion

Understanding the basic structure of CSS is essential for anyone looking to style web pages. With CSS, you have the power to control the appearance and layout of your website. By using selectors, property-value pairs, and understanding the cascade, you can create visually appealing and responsive web pages.

For further learning, you can refer to the following resources:

My Profile

Courses