properties

properties of CSS

Here are some of the most commonly used properties in CSS, along with a brief explanation of what they do:

1. background :

This property sets the background color, image, and other related properties of an element.
Example:

   

  body {

  background-color: #f7f7f7;

  background-image: url(‘bg-image.jpg’);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center center;

  }

 

2. color :

This property sets the color of the text content of an element.
Example:

 

  h1 {

  color: #333;

  }

 

3. font-family

This property sets the font family used for the text content of an element.
Example:

 

  body {

  font-family: Arial,sans-serif;

  }

 

4. font-size

This property sets the size of the text content of an element.
Example:

 

  p{

  font-size: 16px ;

  }

 

5. text-align

This property sets the horizontal alignment of the text content of an element.

Example:

 

  h2{

  text-align: center ;

  }

 

6. padding

This property sets the space between the content of an element and its border.
Example:

 

  div {

  padding: 20px;

  }

 

7. margin

This property sets the space between an element's border and the neighboring elements.
Example:

section {

margin: 20px;

}

 

  section {

  margin: 20px;

  }

 

8. border

This property sets the border style, width, and color of an element.
Example:

 

  button {

  border : 2px solid #333;

  }

 

9. display

This property sets how an element should be displayed on the page.
Example:

 

   ul {

  display: flex;

  justify-content: space-between;

  }

 

10. float

This property sets the horizontal alignment of an element with respect to its container.
Example:

 

  img {

  float: left;

  margin-right: 20px;

  }

 

These are just a few of the many properties available in CSS. 

Cascade and specificity :

Cascade and specificity are two important concepts in CSS that determine how conflicting styles are resolved.

1. Cascade:

The cascade refers to the process by which styles are applied to an element based on their origin and importance. CSS styles can be defined in multiple places, such as in an external stylesheet, a <style> element in the HTML document, or directly in the HTML tag using the style attribute. The cascade determines which styles take precedence when there are conflicting styles. The order of precedence is as follows:

  • Browser default styles
  • External stylesheets
  • <style> elements in the HTML document
  • style attributes on HTML tags
  • Styles defined in JavaScript

If two or more styles conflict, the style with the highest precedence will be applied.

2. Specificity:

Specificity refers to the way that conflicting styles are resolved when they have the same level of importance. Each CSS selector has a specificity score, which is calculated based on the following factors:

  • IDs in the selector (e.g. #my-element) – score = 100
  • Classes, attributes, and pseudo-classes in the selector (e.g. .my-class, [type="text"], :hover) – score = 10
  • Elements and pseudo-elements in the selector (e.g. div, ::before) – score = 1

The specificity score is calculated for each selector in a style rule, and the rule with the highest specificity score is applied.

For example, consider the following CSS code:

 

  #my-element {

  color: red;

  }

  .my-class {

  color: blue;

  }

  div {

  color: green;

  }

 

If an element has both an id of my-element and a class of my-class, the text color will be red because the #my-element selector has a higher specificity score than the .my-class selector. If an element has no id or class but is a div element, the text color will be green because the div selector has a higher specificity score than the element selector.

Understanding cascade and specificity is important for writing maintainable and predictable CSS code. By following best practices for these concepts, you can avoid conflicts and ensure that your styles are applied consistently across your website or application.

Inheritance :

Inheritance is an important feature of CSS that allows styles to be passed down from parent elements to their children. In other words, properties that are set on a parent element can be inherited by its child elements.

When a property is marked as inheritable, its value is automatically passed down to all child elements of the parent element, unless they have explicitly defined a value for that property. This can save time and effort in writing CSS, as it eliminates the need to define the same styles for each individual element.

Some of the properties that can be inherited in CSS include:

  1. Font properties: font-family, font-size, font-weight, font-style, line-height, and text-decoration.
  2. Text properties: color, text-align, text-transform, and text-indent.
  3. List properties: list-style-type and list-style-position.
  4. Table properties: border-collapse, border-spacing, and caption-side.

Here is an example of how inheritance works:

 

  body {

  font-family: Arial, sans-serif; color: #333;

  }

  h1 {

  font-size: 32px;

  font-weight: bold;

  }

  p {

  font-size: 16px;

  line-height: 1.5;

 }

 

In this code, the font-family and color properties are set on the body element. Since these properties are marked as inheritable, all child elements of the body element, such as the h1 and p elements, will inherit these styles. This means that the h1 and p elements will have the same font-family and color as the body element by default.

In addition to inherited properties, CSS also provides the inherit keyword, which can be used to explicitly inherit a property from the parent element. For example, if you wanted to set the font-family of an element to be the same as its parent element, you could use the following code:

 

  h2 {

  font-family: inherit;

   }

 

This will set the font-family of the h2 element to be the same as its parent element.

It’s important to note that not all properties are inheritable, and even for those that are, inheritance doesn’t always work the way you might expect. For example, the background-color property is not inheritable, so you would need to set this property explicitly on each individual element if you want it to have a background color.

Overall, inheritance is a powerful feature of CSS that can save time and make your code more efficient. By understanding which properties are inheritable and how to use the inherit keyword, you can take advantage of inheritance to create more consistent and predictable styles for your website or application.

click here to go back