CSS Basics

CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a document written in HTML. It allows you to apply styles to HTML elements, controlling things like layout, colors, fonts, and more.

CSS works by selecting HTML elements and defining how they should be styled using properties and values. You can apply CSS styles to elements using selectors, which target specific elements or groups of elements.

Here's an example of CSS code that styles the body, h1 and p elements:

1/* replace with relevant CSS code */
2body {
3  background-color: white;
4  font-family: Arial, sans-serif;
5}
6
7h1 {
8  color: blue;
9  font-size: 24px;
10}
11
12p {
13  color: gray;
14  font-size: 16px;
15}

In this example, we are setting the background color of the body element to white, the color and font size of the h1 element to blue and 24 pixels respectively, and the color and font size of the p element to gray and 16 pixels respectively.

CSS provides a wide range of properties and values that allow you to style your HTML elements in various ways. Some common CSS properties include:

• color: Sets the color of the text
• font-size: Sets the size of the font
• background-color: Sets the background color
• margin: Sets the margin around an element
• padding: Sets the padding inside an element

To apply CSS styles to an HTML document, you can use the style attribute on individual HTML elements, or you can define styles in an external CSS file and link it to your HTML document using the <link> tag.

CSS opens up a whole world of possibilities for styling and customizing your web pages. With CSS, you can create visually appealing and engaging user interfaces that enhance the user experience.

Take some time to explore CSS and experiment with different styles and properties. Practice applying styles to different HTML elements and see how they affect the appearance of the page. Happy styling!

xxxxxxxxxx

// replace with relevant CSS code

body {

  background-color: white;

  font-family: Arial, sans-serif;

}

​

h1 {

  color: blue;

  font-size: 24px;

}

​

p {

  color: gray;

  font-size: 16px;

}