CSS Styling Elements

1. Colors

You can change the color of text and background using CSS. There are several ways to define colors:

• Named Colors: e.g., red, blue.
• Hexadecimal Colors: e.g., #ff0000 for red.
• RGB Colors: e.g., rgb(255, 0, 0).
• RGBA Colors: e.g., rgba(255, 0, 0, 0.5) (with transparency).

Example:

Edit Copy

h1 {
    color: blue;
    background-color: lightgray;
}

2. Fonts

You can change the font family, size, weight, and style:

Edit Copy

p {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
}

To import custom fonts, use Google Fonts or @font-face:

Edit Copy

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
}

3. Margins, Padding, and Borders

CSS allows you to create space around elements (margin), inside elements (padding), and around borders:

Edit Copy

.box {
    margin: 20px;
    padding: 15px;
    border: 1px solid black;
}

You can use shorthand for all properties:

Edit Copy

.box {
    margin: 10px 20px 15px 5px; /* top right bottom left */
    padding: 10px;
    border: 2px solid #333;
}

4. Width and Height

You can set the dimensions of elements using width and height properties:

Edit Copy

div {
    width: 100px;
    height: 100px;
}

For responsive design, use percentages or viewport units:

Edit Copy

div {
    width: 50%; /* 50% of parent */
    height: 50vh; /* 50% of viewport height */
}

5. Text Formatting

You can format text using various CSS properties:

Edit Copy

h2 {
    text-align: center;
    text-decoration: underline;
    line-height: 1.5;
}

6. Display and Positioning

CSS provides multiple display values:

• block: Elements start on a new line.
• inline: Elements flow within text.
• inline-block: Elements flow inline but respect width and height.
• flex: Enables a flexible layout.

Positioning can be controlled with:

• static: Default position.
• relative: Positioned relative to its normal position.
• absolute: Positioned relative to its closest positioned ancestor.
• fixed: Positioned relative to the viewport.

7. Transitions and Animations

Transitions allow you to change property values smoothly over a specified duration:

Edit Copy

button {
    transition: background-color 0.5s ease;
}

button:hover {
    background-color: blue;
}

For more complex animations, use the @keyframes rule:

Edit Copy

@keyframes example {
    from { background-color: red; }
    to { background-color: yellow; }
}

.animated {
    animation: example 4s infinite;
}

8. Pseudo-classes and Pseudo-elements

Pseudo-classes apply styles based on the element's state:

Edit Copy

a:hover {
    color: green;
}

Pseudo-elements style specific parts of an element:

Edit Copy

p::first-line {
    font-weight: bold;
}

This styles only the first line of the paragraph.

9. Conclusion

CSS provides a robust set of tools for styling HTML elements, from colors and fonts to positioning and animations. Mastering these properties will enhance your web design skills.