Codédex

Introduction to CSS

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML. CSS defines how HTML elements should be displayed on the screen, paper, or other media.

CSS is one of the core languages of the web and is used to control the layout of multiple web pages all at once. By using CSS, you can improve the visual appearance of your web pages and enhance user experience.

CSS Syntax

CSS syntax is composed of a set of rules. Each rule or rule-set consists of one or more selectors, and a declaration block. The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

Example of CSS syntax:

selector {
    property: value;
}

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories:

• Simple selectors: Select elements based on name, id, class.
• Combinator selectors: Select elements based on a specific relationship between them.
• Pseudo-class selectors: Select elements based on a certain state.
• Pseudo-element selectors: Select and style parts of an element.
• Attribute selectors: Select elements based on an attribute or attribute value.

CSS Properties

CSS properties are used to style HTML elements. Each property has a value which specifies the style to be applied to the element. Common properties include:

• color: Specifies the color of the text.
• font-size: Specifies the size of the text.
• margin: Specifies the space around elements.
• padding: Specifies the space inside elements.
• border: Specifies the border around elements.

Understanding how to use these properties allows you to control the layout and design of your web pages effectively.

CSS Example

Here is an example of how you can use CSS to style an HTML document:

/* CSS */
body {
    background-color: #001f3f; /* Dark blue background */
    color: #ffffff; /* White text color */
    font-family: 'Arial', sans-serif; /* Font style */
}

h1 {
    color: #ffcc00; /* Yellow title color */
    font-size: 36px; /* Font size */
}

p {
    margin: 20px 0; /* Margin */
}