CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) is a language used to add style and enhance the visual appeal of HTML elements on a web page. It plays a crucial role in improving the aesthetics of a website, just like decor, color of the walls, furniture, material of the couch, and shape of windows and doors add to the overall look of a house.

Adding CSS to Style HTML

CSS allows us to control the presentation and layout of the HTML elements, including colors, fonts, spacing, and more. Here's how we can apply CSS styles to our HTML elements:

Inline Styles

Using the style attribute, we can apply CSS styles directly to individual HTML elements. This method is useful for adding quick, one-off styles.

index

Internal Styles

We can also include CSS styles within the <style> tags in the <head> section of the HTML document. This method is useful for applying styles to multiple elements within the same document.

index

External Stylesheets

For larger projects or when we want to reuse styles across multiple pages, it's common to use external stylesheets. Create a separate CSS file (e.g., index.css) and link it to the HTML document using the <link> tag.

Please check the index.html and index.css files in the example.

index

CSS Selectors

CSS selectors target HTML elements based on criteria such as element type, class, or ID. A selector specifies the exact element to which specific styles should be applied.

Element Selector

Targets all elements of a specific type.

Class Selector

Targets elements with a specific class attribute.

ID Selector

Targets a specific element with a unique ID attribute.

CSS Properties

CSS properties define how the selected elements should be styled. Here are some common CSS properties:

color sets the text color;
background-color sets the background color of an element;
font-size sets the text size;
margin adds the spacing around an element.

We can customize the web page's appearance by applying CSS styles to the HTML elements to create visually appealing and user-friendly experiences.

Example:

index

Video Tutorial

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 3