CSS CORE PROPERTIES

CSS Core Properties

Understanding CSS core properties is crucial for designing and styling web pages effectively. Below are some of the key properties with detailed explanations and examples.

1. CSS Color

CSS color properties allow you to set the color of text and elements.

• color: Sets the color of text.

<style>

p {

color: red;

/* Named color */

}

h1 {

color: #333333;

/* Hex color */

}

a {

color: rgb(0, 0, 255);

/* RGB color */

}

div {

color: rgba(0, 0, 255, 0.5);

/* RGBA color (includes alpha for transparency) */

}

</style>

2. CSS Backgrounds

CSS background properties are used to define the background effects for elements.

• background-color: Sets the background color.

div {

background-color: #f0f0f0;

}

• background-image: Sets the background image.

body {

background-image: url('background.jpg');

}

• background-repeat: Defines if/how a background image will repeat.

div {

background-repeat: no-repeat;

}

• background-position: Sets the starting position of the background image.

div {

background-position: center;

}

• background-size: Specifies the size of the background image.

div {

background-size: cover;

}

3. CSS Box Model

The CSS Box Model describes the rectangular boxes generated for elements in the document tree and consists of margins, borders, padding, and the actual content.

/* Example with all box model properties */

div {

width: 300px;

height: 200px;

padding: 10px;

border: 5px solid black;

margin: 20px;

}

• width and height: Set the width and height of the content area.
• padding: Space between the content and the border.
• border: A line around the padding and content.
• margin: Space outside the border.

4. CSS Borders

CSS border properties allow you to specify the style, width, and color of an element's border.

• border: Shorthand for setting border width, style, and color.

div {

border: 2px solid #000;

}

 

• border-radius: Rounds the corners of an element's outer border edge.

div {

border-radius: 10px;

}

5. CSS Margins

Margins create space around elements, outside of any defined borders.

• margin: Shorthand property for setting the margin on all four sides.

div {

margin: 20px;

}

 

• margin-top, margin-right, margin-bottom, margin-left: Set the margin for individual sides.

div {

margin-top: 10px;

margin-right: 15px;

margin-bottom: 20px;

margin-left: 25px;

}

6. CSS Padding

Padding creates space around the content, inside of any defined borders.

• padding: Shorthand property for setting the padding on all four sides.

div {

padding: 20px;

}

• padding-top, padding-right, padding-bottom, padding-left: Set the padding for individual sides.

div {

padding-top: 10px;

padding-right: 15px;

padding-bottom: 20px;

padding-left: 25px;

}

7. CSS Box Sizing

The box-sizing property allows you to define how the width and height of an element are calculated: should they include padding and borders, or not.

• content-box: Default. The width and height properties include only the content. Border and padding are not included.

div {

box-sizing: content-box;

/* Default value */

}

• border-box: The width and height properties include content, padding, and borders.

div {

box-sizing: border-box;

}