CSS Styling: Selectors, Properties, and Values in Web Designing
Web Designing Training in Chandigarh, CSS (Cascading Style Sheets) is a language used to style web pages. It allows you to control the appearance of your web pages, including the font, color, layout, and animations.
CSS is made up of three main components: selectors, properties, and values.
Selectors
Selectors are used to select the HTML elements that you want to style. For example, you can use a selector to select all of the <h1> elements on your page, or all of the div elements with a class of my-class.
There are three main types of selectors:
- Element selectors: Element selectors select all of the elements of a specific type, such as
<h1>or<div>. - Class selectors: Class selectors select all of the elements with a specific class.
- ID selectors: ID selectors select a single element with a specific ID.
Properties
Properties are the things that you want to style about the selected elements. For example, you can use properties to control the color, font, and size of the text.
There are many different CSS properties, but some of the most common ones include:
color: The color of the text.font-family: The font family of the text.font-size: The size of the text.background-color: The color of the background.width: The width of the element.height: The height of the element.
Values
Values are the specific values that you want to apply to the properties. For example, you can set the color property to the value red, or the font-size property to the value 16px.
CSS values can be numbers, strings, or colors.
Putting it all together
CSS rules are made up of selectors, properties, and values. For example, the following CSS rule would select all of the <h1> elements on the page and set their color to red:
h1 {
color: red;
}
CSS rules can be grouped together in CSS stylesheets. CSS stylesheets are files with the extension .css.
To apply a CSS stylesheet to a web page, you can use the <link> tag in the <head> section of your HTML document. For example, the following code would apply the my-styles.css stylesheet to the web page:
<head>
<link rel="stylesheet" href="my-styles.css">
</head>
CSS styling tips
Here are a few tips for CSS styling:
- Use CSS to style your web pages, not HTML. HTML is used to define the structure of your web pages, while CSS is used to style the appearance of your web pages.
- Use CSS selectors to select the specific elements that you want to style. This will help you to avoid styling elements that you don’t want to style.
- Use CSS properties to control the appearance of the selected elements.
- Use CSS values to specify the specific values that you want to apply to the properties.
- Use CSS stylesheets to group together CSS rules. This will make your CSS code more organized and easier to maintain.
Here are some examples of CSS styling in web designing:
- Changing the font of all headings on a page:
h1, h2, h3, h4, h5, h6 {
font-family: sans-serif;
}
- Changing the color of all links on a page:
a {
color: blue;
}
- **Adding a border to all
divelements with the class ofmy-class:
div.my-class {
border: 1px solid black;
}
- Creating a button with a specific style:
button {
background-color: red;
color: white;
padding: 10px;
border-radius: 5px;
}
Conclusion
CSS styling is a powerful way to control the appearance of your web pages. By learning the basics of CSS styling with Web Designing Course in Chandigarh, you can create web pages that are both visually appealing and easy to use.
