Introduction to CSS: Selectors, Properties and Values
CSS, or Cascading Style Sheets, is a style language used to describe the appearance of a document written in HTML. CSS describes how HTML elements should be displayed on screen, paper, or other media. CSS saves a lot of work as it controls the layout of multiple pages at once.
CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.
For example, a type selector selects elements by node name. For example, the type selector 'h1' selects all elements <h1>.
<style>
h1 {
color: blue;
}
</style>
This example selects all <h1> elements and changes the text color to blue.
CSS Properties
CSS properties are used to specify the style of an element. Each property has a name and a value. The property name is followed by a colon and the property value. A CSS declaration always ends with a semicolon, and style declarations are separated by a space.
Continue in our app.
You can listen to the audiobook with the screen off, receive a free certificate for this course, and also have access to 5,000 other free online courses.
Or continue reading below...
Download the app
For example:
<style>
P {
color: red;
text-align: center;
}
</style>
This example sets the text color to red and aligns the text to the center.
CSS Values
CSS values are defined along with properties to style HTML elements. For example, the color property can have values like 'red', 'blue', 'green', etc. Additionally, the width property can have values like '100px', '50%', etc.
Example:
<style>
P {
font-size: 20px;
color: white;
background-color: black;
}
</style>
This example sets the font size to 20 pixels, the text color to white, and the background color to black.
How to apply values to CSS properties
Applying values to CSS properties is quite simple. First, you need to select the element you want to apply the style to. Next, you need to define the property you want to change. Finally, you need to set the value you want to apply to this property.
For example, if you want to change the color of all your paragraphs to blue, you can do this as follows:
<style>
P {
color: blue;
}
</style>
In this example, 'p' is the selector, 'color' is the property, and 'blue' is the value.
CSS is a powerful language that allows developers to control the appearance of their websites. By understanding how CSS selectors, properties, and values work, you can create more attractive and effective websites.
We hope this guide helped you understand CSS better. Remember that practice is key when it comes to learning and mastering CSS. So keep practicing and experimenting with different selectors, properties and values.
