Introduction to CSS: selectors, properties and values
CSS, which stands for 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. This can control the layout of multiple web pages at once. CSS allows you to apply styles to web pages. More importantly, CSS allows you to do this independently of the HTML being used to structure the document.
CSS Selectors
CSS selectors are the part of CSS that selects the HTML element you want to style. There are several types of selectors in CSS, including type, class, ID, attribute selectors, among others.
- Type selectors: Select elements based on the name of the HTML element. For example, the
ptype selector will select all paragraphs. - Class selectors: Select elements based on class attribute. For example, the class selector
.introwill select all elements withclass="intro". - ID Selectors: Select an element based on the ID attribute. For example, the ID selector
#firstnamewill select the element withid="firstname". - Attribute selectors: Select elements based on an attribute or attribute value. For example, the
[target="_blank"]attribute selector will select all elements withtarget="_blank".
CSS Properties
CSS properties are what you want to style in the selected element. For example, you may want to change the color, font, size, margin, padding, background, border, and many other properties of HTML elements. Each property has a specific value.
For example, the color property controls the color of the text. So, if you want the text of all paragraphs to be red, you would use the following CSS code:
P {
color: red;
}
CSS Values
CSS values are the adjustments you make to properties. In the example above, red is the value of the color property. Values can be keywords such as red, numbers such as 12px, percentages such as 50%, or a variety of other units of measure.
Values can also be more complex, such as url("image.jpg") for the background-image property, or rgba(255, 0 , 0, 0.3) for a semi-transparent color.
In short, CSS is a powerful language that allows developers to precisely control how HTML elements are displayed on the screen. Understanding CSS selectors, properties, and values is key to becoming an effective front-end developer.
