CSS Opacity

The opacity property in CSS is used to set the transparency level of an element. It accepts values ranging from 0 (completely transparent) to 1 (completely opaque). This property affects not only the background of the element but also its text and any other child elements.

Syntax:


selector {
    opacity: value;
}

value: A number between 0 and 1, inclusive. 0 represents full transparency, and 1 represents full opacity.

Semi transparent (50% transparent)


      .semi-transparent {
            opacity: 0.5; /* 50% transparent */
            background-color: lightgreen;
            padding: 20px;
            margin: 10px;
        }

This is semi-transparent (opacity: 0.5).

Try it Yourself

Fully transparent (100% transparent)


      .fully-transparent {
            opacity: 0; /* 100% transparent */
            background-color: lightgreen;
            padding: 20px;
            margin: 10px;
        }

Note:- if opacity is 0 then date will not be display.

Try it Yourself

CSS combinators

CSS combinators are used to define the relationship between selectors. They help in applying styles to elements based on their relationship in the HTML document.

There are four main types of combinators:

descendant combinator
child combinator
adjacent sibling combinator
general sibling combinator

1. Descendant Combinator ()

The descendant combinator selects elements that are descendants of a specified element. This is represented by a space between two selectors.

Example: Selects all <p> elements inside elements.


/* Selects all <p> elements inside <div> elements */
div p {
    color: blue;
}

Try it Yourself

2. Child Combinator (`>`)

The child combinator selects elements that are direct children of a specified element.

Example: Selects all <p> elements that are direct children of <div> elements


/* Selects all <p> elements that are direct children of <div> elements  */
div > p {
    color: green;
}

Try it Yourself

3. Adjacent Sibling Combinator (`+`)

The adjacent sibling combinator selects an element that is directly adjacent to a specified element. This means it selects the element that immediately follows the first element.

Example: Selects the <p> element that is immediately after a <div> element


/* Selects the <p> element that is immediately after a <div> element */
div + p {
    color: red;
}

Try it Yourself

4. General Sibling Combinator (`~`)

The general sibling combinator selects all elements that are siblings of a specified element, following it.

Example: Selects all <p> elements that are siblings of a <div> element


/* Selects the <p> Selects all <p> elements that are siblings of a <div> element  */
div ~ p {
    color: orange;
}

Try it Yourself

Complete Example:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* Descendant Combinator */
        div p {
            color: blue;
        }

        /* Child Combinator */
        div > p {
            color: green;
        }

        /* Adjacent Sibling Combinator */
        div + p {
            color: red;
        }

        /* General Sibling Combinator */
        div ~ p {
            color: orange;
        }
    </style>
</head>
<body>

    <div>
        <p>Descendant (and child) of div</p>
        <p>Another descendant (and child) of div</p>
    </div>
    <p>Adjacent sibling of div</p>
    <p>General sibling of div</p>

</body>
</html>

Try it Yourself

Explanation:

Descendant Combinator (div p): Styles all <p> elements inside a <div>, regardless of their depth.
Child Combinator (div > p): Styles only <p> elements that are direct children of a <div>.
Adjacent Sibling Combinator (div + p): Styles the first <p> element immediately following a <div>.
General Sibling Combinator (div ~ p): Styles all <p> elements that are siblings of a <div> and come after it.

CSS align

CSS alignment properties are used to control the positioning of elements within their containers and to align text or other content within elements. Depending on the context and the type of element, different properties and techniques are used for alignment. Here are some of the most commonly used CSS properties for alignment:

Text Alignment

The text-align property is used to specify the horizontal alignment of text within an element.

Syntax:


/* Text alignment within an element */
.container {
    text-align: left;   /* Align text to the left */
    text-align: right;  /* Align text to the right */
    text-align: center; /* Center align text */
    text-align: justify; /* Justify text */
}

Try it Yourself

Vertical Alignment

The vertical-align property is used to align inline or table-cell elements vertically.

Syntax:


/* Vertical alignment within inline or table-cell elements */
.element {
    vertical-align: baseline;  /* Default, aligns with the baseline of the parent */
    vertical-align: top;       /* Aligns with the top of the tallest element */
    vertical-align: middle;    /* Centers the element vertically */
    vertical-align: bottom;    /* Aligns with the bottom of the lowest element */
}

Try it Yourself

Flexbox Alignment

The Flexbox layout model provides powerful alignment capabilities for both the main axis and the cross axis.

Main Axis Alignment

The justify-content property aligns flex items along the main axis (horizontally for row direction).

Syntax:


/* Main axis alignment within a flex container */
.container {
    display: flex;
    justify-content: flex-start; /* Align items to the start of the container */
    justify-content: flex-end;   /* Align items to the end of the container */
    justify-content: center;     /* Center items within the container */
    justify-content: space-between; /* Distribute items with space between */
    justify-content: space-around; /* Distribute items with space around */
    justify-content: space-evenly; /* Distribute items with equal space around */
}

Try it Yourself

Cross Axis Alignment

The align-items property aligns flex items along the cross axis (vertically for row direction).

Syntax:


/* Cross axis alignment within a flex container */
.container {
    display: flex;
    align-items: flex-start; /* Align items to the start of the cross axis */
    align-items: flex-end;   /* Align items to the end of the cross axis */
    align-items: center;     /* Center items along the cross axis */
    align-items: baseline;   /* Align items along their baselines */
    align-items: stretch;    /* Stretch items to fill the container (default) */
}

CSS inline-block

The inline-block value for the display property in CSS is used to combine the characteristics of both inline and block elements. Elements with display: inline-block behave like inline elements in terms of layout, but they also respect width and height properties like block elements.

Key Characteristics:

1. Inline Characteristics:

Elements are laid out horizontally, one after the other.

Elements do not start on a new line and do not force subsequent content to start on a new line.

2. Block Characteristics:

Elements respect the width and height properties.

Margins and paddings are applied around the element.

Syntax:


selector {
    display: inline-block;
}

Example:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .inline-block-element {
            display: inline-block;
            width: 150px;
            height: 100px;
            margin: 10px;
            background-color: lightblue;
            text-align: center;
            vertical-align: top;
            line-height: 100px; /* Centers text vertically */
        }
    </style>
</head>
<body>

    <div class="inline-block-element">Element 1</div>
    <div class="inline-block-element">Element 2</div>
    <div class="inline-block-element">Element 3</div>

</body>
</html>

Try it Yourself

Element 1

Element 2

Element 3

CSS Float

The float property in CSS is used to position an element to the left or right of its container, allowing text and inline elements to wrap around it. Originally designed for wrapping text around images, float can also be used to create various layouts and effects.

Float property values

1. none: The element does not float. This is the default value.

2. left: The element floats to the left of its container.

3. right: The element floats to the right of its container.

4. inherit: The element inherits the float value from its parent.

Syntax:


selector {
    float: none | left | right | inherit;
}

Example:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            border: 1px solid #000;
            padding: 10px;
        }
        .box {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: lightblue;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>

    <div class="container clearfix">
        <div class="box left">Float Left</div>
        <div class="box right">Float Right</div>
        <p>This is some text that wraps around the floating elements. The float property can be used to create simple layouts where elements are positioned to the left or right and content flows around them.</p>
    </div>

</body>
</html>

Try it Yourself

Float Left

Float Right

This is some text that wraps around the floating elements. The float property can be used to create simple layouts where elements are positioned to the left or right and content flows around them.

In this example:

The .box.left element floats to the left, and the .box.right element floats to the right.
The text inside the .container wraps around the floating elements.
The .clearfix class is used to clear the floats, ensuring that the container expands to encompass the floated elements. This is a common technique to avoid layout issues when using floats.

Notes:-

Clearing Floats: Floats can cause layout issues because they are taken out of the normal document flow. To ensure that a container expands to fit floated elements, you need to clear the floats. This can be done using the clear property or the clearfix method.

Syntax:


selector {
    clear: both;
}

CSS overflow

The overflow property in CSS specifies what should happen if content overflows an element’s box. It is used to control the behavior of content that is too large to fit in an element’s box.

overflow property values

1. visible: The default value. Content is not clipped and may render outside the element’s box.

2. hidden: Content that overflows the element’s box is clipped, and no scrollbars are provided.

3. scroll: Content that overflows the element’s box is clipped, but scrollbars are provided to allow the user to scroll to see the rest of the content.

4. auto: If the content overflows, the browser will display scrollbars only when necessary.

Syntax:


selector {
    overflow: visible | hidden | scroll | auto;
}

Example:-


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            margin-bottom: 20px;
        }

        .visible {
            overflow: visible;
            background-color: lightblue;
        }

        .hidden {
            overflow: hidden;
            background-color: lightcoral;
        }

        .scroll {
            overflow: scroll;
            background-color: lightgreen;
        }

        .auto {
            overflow: auto;
            background-color: lightyellow;
        }

        .content {
            width: 300px;
            height: 150px;
            background-color: rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>

    <div class="box visible">
        <div class="content">This box has overflow: visible.</div>
    </div>

    <div class="box hidden">
        <div class="content">This box has overflow: hidden.</div>
    </div>

    <div class="box scroll">
        <div class="content">This box has overflow: scroll.</div>
    </div>

    <div class="box auto">
        <div class="content">This box has overflow: auto.</div>
    </div>

</body>
</html>

Explanation:

Visible: The content overflows and is visible outside the box.
Hidden: The content that overflows is clipped, and only the part that fits within the box is visible.
Scroll: Scrollbars appear, allowing the user to scroll to see the overflowing content.
Auto: Scrollbars appear only if the content overflows, similar to scroll but only when necessary.

Additional Properties:

overflow-x: Controls the horizontal overflow.

overflow-y: Controls the vertical overflow.

Syntax:


selector {
    overflow-x: visible | hidden | scroll | auto;
    overflow-y: visible | hidden | scroll | auto;
}

Example:


.box {
    width: 200px;
    height: 100px;
    border: 1px solid black;
}

.x-scroll {
    overflow-x: scroll;
    overflow-y: hidden;
}

In this example, the x-scroll class allows horizontal scrolling but hides any vertical overflow. This is useful when you want to control scrolling behavior separately for horizontal and vertical content.

CSS z-index

The z-index property in CSS controls the stacking order of elements that overlap. Elements with a higher z-index value will appear in front of those with a lower z-index value. The z-index property only works on positioned elements (position: relative, position: absolute, position: fixed, or position: sticky).

Key points

Default Value: The default value for z-index is auto, which means the element will follow the order of the HTML structure.

Higher Values in Front: Elements with higher z-index values are stacked in front of elements with lower values.

Example:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            position: absolute;
            width: 100px;
            height: 100px;
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 100px;
        }

        .box1 {
            background-color: red;
            top: 50px;
            left: 50px;
            z-index: 1;
        }

        .box2 {
            background-color: blue;
            top: 80px;
            left: 80px;
            z-index: 3;
        }

        .box3 {
            background-color: green;
            top: 110px;
            left: 110px;
            z-index: 2;
        }
    </style>
</head>
<body>

    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>

</body>
</html>

Notes:

1. Negative Values: z-index can have negative values, which place elements behind those with a z-index of 0 or higher.

2. Non-Positioned Elements: If an element is not positioned (i.e., position: static), the z-index property does not apply to it.

CSS Position

In CSS, the position property is used to specify how an element is positioned in a document. There are several possible values for the position property:

position: static

position: static is the default positioning for all HTML elements. When an element has a position value of static, it is placed in the normal document flow, meaning it follows the standard layout rules without any special positioning. The top, right, bottom, and left properties do not apply to elements with position: static.

Syntax


.static-element {
    position: static;
}

Note: position: static is the default value, you don’t actually need to specify it unless you’re overriding another position value.

position: relative

position: relative is a CSS property that allows an element to be positioned relative to its normal position in the document flow. When an element is given a position value of relative, it remains in the normal flow of the document, but you can adjust its position using the top, right, bottom, and left properties. These properties will offset the element from where it would normally be placed without changing the layout of surrounding elements.

Syntax:


.relative-element {
    position: relative;
    top: 20px;
    left: 30px;
}

Example:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .relative-element {
            position: relative;
            top: 20px;
            left: 20px;
            background-color: lightcoral;
            padding: 10px;
            margin: 10px;
        }
        .normal-element {
	  background-color: green;
	}
    </style>
</head>
<body>
    <div class="relative-element">This is a relatively positioned element.</div>
    <div class="normal-element">This is a normal static element.</div>
</body>
</html>

This is a relatively positioned element.

This is a normal static element.

In this example:

The div with the class relative-element has a position value of relative.
The top: 20px and left: 20px properties move the element 20 pixels down and 20 pixels to the right from its normal position.
The element remains in the document flow, so it occupies its original space. The next element in the document flow will not move into the space of the relatively positioned element.

position: absolute

position: absolute is a CSS property that allows an element to be positioned relative to its closest positioned ancestor. An element with position: absolute is removed from the normal document flow, meaning it does not affect the layout of surrounding elements and is not affected by them. Instead, its position is determined by the top, right, bottom, and left properties.

Syntax:


.absolute-element {
    position: absolute;
    top: 50px;
    left: 100px;
}

Example:


<html lang="en">
<head>
    <style>
        .relative-container {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: lightgray;
        }

        .absolute-element {
            position: absolute;
            top: 20px;
            left: 30px;
            background-color: lightgreen;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="relative-container">
        This is a relatively positioned container.
        <div class="absolute-element">This is an absolutely positioned element.</div>
    </div>
</body>
</html>

This is a relatively positioned container.

This is an absolutely positioned element.

position: fixed

position: fixed is a CSS property that positions an element relative to the browser window, rather than its containing element. A fixed-position element stays in the same place on the screen, even when the page is scrolled. This makes it useful for creating elements like sticky headers, footers, or floating buttons.

Key Points:

1. Fixed Positioning: The element is positioned relative to the viewport and does not move when the page is scrolled.

2. Offset Properties: The top, right, bottom, and left properties determine the position of the element relative to the viewport.

3. Removed from Normal Flow: The element is taken out of the normal document flow, so it does not affect the layout of other elements and vice versa.

Syntax:


.fixed-element {
    position: fixed;
    top: 0;
    right: 0;
}

Example:


<html lang="en">
<head>
    <style>
        .fixed-element {
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: lightpink;
            padding: 10px;
            border: 1px solid #000;
        }

        .content {
            height: 1500px; /* Adding height to demonstrate scrolling */
            background-color: lightgray;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="fixed-element">This is a fixed element.</div>
    <div class="content">
        Scroll down to see the fixed element stay in place.
    </div>
</body>
</html>

position: sticky

position: sticky is a CSS property that allows an element to switch between relative and fixed positioning, depending on the user’s scroll position. A sticky element toggles between relative and fixed positioning based on the scroll position in the document. When the element reaches a specified point in the scroll, it sticks to that position (like fixed) until its containing block is out of view.

Key Points:

1. Relative Positioning: The element is positioned according to the normal flow of the document until a specified scroll position is reached.

2. Fixed Positioning: Once the specified scroll position is reached, the element becomes fixed and remains at that position relative to the viewport until its container is scrolled out of view.

3. Offset Properties: The top, right, bottom, and left properties are used to define the point at which the element becomes sticky.

Syntax:


.sticky-element {
    position: sticky;
    top: 0;
}

Example:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .sticky-container {
            height: 2000px; /* Adding height to demonstrate scrolling */
            background-color: lightgray;
            padding: 10px;
        }

        .sticky-element {
            position: sticky;
            top: 10px; /* Becomes fixed 10px from the top of the viewport */
            background-color: lightyellow;
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>

    <div class="sticky-container">
        <div class="sticky-element">This is a sticky element.</div>
        <p>Scroll down to see the sticky effect.</p>
        <p>Content...</p>
        <p>Content...</p>
        <p>Content...</p>
        <p>Content...</p>
        <p>Content...</p>
        <p>Content...</p>
    </div>

</body>
</html>

CSS Max Width

The max-width property in CSS is used to set the maximum width of an element. This property ensures that the element’s width does not exceed the specified value, even if the content inside the element requires more space. It is particularly useful for creating responsive designs, ensuring that elements do not become too wide on larger screens.

Syntax


selector {
  max-width: value;
}

values of max-width

1. none

(default) The element has no maximum width.

2. length

Specifies a fixed maximum width using units such as px, em, rem, etc.


.container {
  max-width: 700px;
}

3. percentage

Specifies a maximum width as a percentage of the containing element’s width.


.container {
  max-width: 80%;
}

4. inherit

The element inherits the max-width value from its parent.


.container {
  max-width: inherit;
}

5. initial

Sets the property to its default value.


.container {
  max-width: initial;
}

6. unset

Resets the property to its natural value.


.container {
  max-width: unset;
}

Important Points

The max-width property can override the width property if the specified width exceeds the max-width value.

Combining max-width with other properties like min-width, width, and max-height can create highly controlled and flexible layouts.

CSS Display

The display property in CSS is used to define how an element is displayed on a web page. It determines the layout behavior of an element. This property controls the inner and outer display types of an element, affecting how it is rendered in the document flow and how it interacts with other elements.

property values

1. display: none

This not only hides the element but also removes it from the document flow, meaning it won’t take up any space.

Syntax:-


.container {
  display: none;
}

2. display: block

The element is displayed as a block element (like <div>). It will take up the full width available and start on a new line.

Syntax:


.element-block {
  display: block;
}

3. display: inline

The element is displayed as an inline element (like <span>). It will take up only as much width as necessary and will not start on a new line.

Syntax:


.inline-element{
  display: inline;
}

4. display: inline-block

The element is displayed as an inline element, but it can have width and height like a block element.

Syntax:


.inline-element{
  display: inline-block;
}

5. display: flex

The element is displayed as a block-level flex container. It enables the use of the flexible box layout model.

Syntax:


.flex-container{
  display: flex;
}

6. display: inline-flex

The element is displayed as an inline-level flex container.

Syntax:


.flex-inline-container{
  display: inline-flex;
}

7. display: grid

The element is displayed as a block-level grid container. It enables the use of the grid layout model.

Syntax:


.grid-container {
  display: grid;
}

8. display: inline-grid

The element is displayed as an inline-level grid container.

Syntax:


.grid-inline-container {
  display: inline-grid;
}

9. display: table

The element is displayed as a block-level table (like <table>).

Syntax:


.table-container {
  display: table;
}

10. inline-table

The element is displayed as an inline-level table.

Syntax:


.table-inline-container {
  display: inline-table;
}

11. table-row and table-cell

These values display the element as a table row, table cell, and so on.

Syntax:


.table-row{
  display: table-row;
}
.table-cell{
  display: table-cell;
}

12. display: list-item

he element is displayed as a list item (like <li>).

Syntax:


.list-item-container {
  display: list-item;
}

13. display: contents

The element itself is not displayed, but its child elements are displayed as if they were direct children of the element’s parent.

Syntax:


.content-container {
  display: contents;
}

CSS Tables

CSS tables refer to the way CSS (Cascading Style Sheets) is used to style HTML tables. HTML tables are used to display tabular data, and CSS can be applied to control their layout, appearance, and responsiveness. CSS allows for detailed customization of table elements, including borders, padding, text alignment, colors, and more.

Basic HTML Table Structure

HTML tables are created using the <table>, <tr>, <th>, and <td> elements. Here is a simple example of an HTML table:


<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </tbody>
</table>

Basic CSS Table Properties

CSS can be applied to tables using a variety of properties to enhance their appearance and usability.

Table Borders

You can add borders to tables, table rows, table headers, and table cells:


table {
    border-collapse: collapse; /* Merge adjacent borders into a single border */
    width: 100%; /* Make the table take up 100% of the container width */
}

th, td {
    border: 1px solid black; /* Add a 1px solid black border to headers and cells */
    padding: 8px; /* Add padding inside headers and cells */
    text-align: left; /* Left-align text in headers and cells */
}

Table Header and Row Background Colors

You can style the table headers and rows with background colors for better readability:


th {
    background-color: #f2f2f2; /* Light grey background for headers */
}

tr:nth-child(even) {
    background-color: #f9f9f9; /* Light grey background for even rows */
}

tr:hover {
    background-color: #d1e7dd; /* Light green background on hover */
}

Text Alignment and Padding

You can control the alignment of text and the padding inside the cells:


th, td {
    text-align: center; /* Center-align text in headers and cells */
    padding: 10px; /* Add padding inside headers and cells */
}

CSS Lists

Styling lists in CSS allows you to control the appearance of ordered (<ol>) and unordered (<ul>) lists, as well as definition lists (<dl>). You can customize list markers, spacing, and layout to match your design requirements.

Unordered Lists (`<ul>`)

Unordered lists use bullet points by default. You can change the list style, position, and spacing.


<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Unordered list styles */
.styled-ul {
    list-style-type: square; /* Change bullet to square */
    padding-left: 20px;      /* Add left padding */
    margin: 20px 0;          /* Add top and bottom margin */
}

.styled-ul li {
    margin-bottom: 10px;     /* Add space between list items */
}
</style>
</head>
<body>
    <h1>Unordered List</h1>
    <ul class="styled-ul">
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
    </ul>
</body>
</html>

Unordered List

List Item 1
List Item 2
List Item 3

Ordered Lists (`<ol>`)

Ordered lists use numbers by default. You can change the list style, position, and spacing similarly to unordered lists.


<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Ordered list styles */
.styled-ol {
    list-style-type: upper-roman; /* Change number style to upper Roman numerals */
    padding-left: 20px;           /* Add left padding */
    margin: 20px 0;               /* Add top and bottom margin */
}
.styled-ol li {
    margin-bottom: 10px;          /* Add space between list items */
}
</style>
</head>
<body>
<h2>Ordered List</h2>
<ol class="styled-ol">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>
</body>
</html>

Ordered List

First Item
Second Item
Third Item

Definition Lists (`<dl>`)

Definition lists are used for terms and their definitions.


<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Definition list styles */
.styled-dl dt {
    font-weight: bold;   /* Bold the term */
    margin-top: 10px;    /* Add space above the term */
}

.styled-dl dd {
    margin-left: 20px;   /* Indent the definition */
    margin-bottom: 10px; /* Add space below the definition */
}
</style>
</head>
<body>
<h2>Definition List</h2>
<dl class="styled-dl">
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
</dl>
</body>
</html>

Definition List

Term 1: Definition 1
Term 2: Definition 2

CSS Links

In CSS, you can style links (<a> tags) to change their appearance based on different states such as normal, hovered, active, and visited.

Basic link states

1. Normal (a): The default state of the link.


a {
    color: green; /* you can put any color value */
}

2. Visited (a:visited): When the link has been visited.


a:visited {
    color: purple;
}

3. Hover (a:hover): When the mouse is over the link.


a:hover {
    color: red;
}

4. Active (a:active): When the link is being clicked.


a:active {
    color: yellow;
}

Text Decorations Property

text-decoration: none


a {
    color: green; /* you can put any color value */
    text-decoration: none;
}
a:visited {
    color: purple;
    text-decoration: none;
}
a:hover {
    color: red;
    text-decoration: none;
}
a:active {
    color: yellow;
    text-decoration: none;
}

text-decoration: underline


a {
    color: green; 
    text-decoration: underline;
}
a:visited {
    color: purple;
    text-decoration: underline;
}
a:hover {
    color: red;
    text-decoration: underline;
}
a:active {
    color: yellow;
    text-decoration: underline;
}

Background color Property


a {
    color: green; 
    background-color: LightBlue;
}
a:visited {
    color: purple;
    background-color: LightBlue;
}
a:hover {
    color: red;
    background-color: LightBlue;
}
a:active {
    color: yellow;
    background-color: LightBlue;
}

CSS Icons

CSS icons can be incorporated into your web design in several ways, such as using icon fonts, SVGs (Scalable Vector Graphics), or CSS-generated content. Here are some popular methods:

1. Using Icon Fonts

Icon fonts like Font Awesome and Material Icons are popular because they are easy to use and scale well.

Using Font Awesome:

1. Include Font Awesome in your HTML:


<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

2. Use the icons in your HTML:


<i class="fas fa-home"></i> <!-- Home icon -->
<i class="fas fa-user"></i> <!-- User icon -->

3. Style the icons with CSS:


.fa-home {
    color: blue;
    font-size: 24px;
}

.fa-user {
    color: red;
    font-size: 22px;
}

2. Using SVGs

SVGs are a great choice because they are vector-based, meaning they are resolution-independent and can be scaled to any size without losing quality.

1. Include SVG directly in your HTML:


<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" fill="#000"/>
</svg>

2. Style SVG with CSS:


svg {
    width: 50px;
    height: 50px;
    fill: green;
}

Using SVG as an Image:

1. Include SVG file in your HTML:


<img src="icon.svg" alt="Icon" class="icon">

2. Style the image with CSS:


.icon {
    width: 50px;
    height: 50px;
}

3. CSS-Generated Content

You can use the ::before or ::after pseudo-elements to insert icons, often combined with icon fonts.

Example with Font Awesome:

1. Include Font Awesome in your HTML:


<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

2. Use CSS to insert the icon:


.icon-home::before {
    content: "\f015"; /* Unicode for home icon in Font Awesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 20px;
    color: blue;
    margin-right: 10px;
}

3. Use the class in your HTML:


<div class="icon-home">Home</div>

Home

4. Using CSS Libraries

There are several CSS libraries available that provide a wide range of icons, such as Bootstrap Icons.

Using Bootstrap Icons:

1. Include Bootstrap Icons in your HTML:


<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.css">
</head>

2. Use the icons in your HTML:


<i class="bi bi-house"></i> <!-- Home icon -->
<i class="bi bi-person"></i> <!-- Person icon -->

3. Style the icons with CSS:


.bi-house {
    color: green;
    font-size: 34px;
}

.bi-person {
    color: orange;
    font-size: 28px;
}

CSS Fonts

In CSS, fonts can be styled and customized using a variety of properties. These properties allow you to control the typeface, size, weight, style, and more.

Font Properties:

font-family

The font-family property specifies the font for an element. You can list multiple fonts as a “fallback” system, starting with your preferred font and ending with a generic family name (e.g., serif, sans-serif, monospace).


p {
    font-family: 'Arial', 'Helvetica', sans-serif;
}

`font-size`

The font-size property sets the size of the font. It can be specified in various units, including pixels (px), ems (em), rems (rem), percentages (%), and viewport units (vw, vh).


p {
    font-size: 16px; /* Sets the font size to 16 pixels */
    font-size: 1em;  /* Equivalent to the current font size of the parent element */
    font-size: 1rem; /* Equivalent to the root element's font size */
    font-size: 100%; /* Equivalent to the parent element's font size */
    font-size: 2vw;  /* 2% of the viewport width */
}

`font-weight`

The font-weight property specifies the thickness of the characters. It can take values like normal, bold, bolder, lighter, or numerical values ranging from 100 to 900.


p {
    font-weight: normal;  /* Standard weight */
    font-weight: bold;    /* Bold weight */
    font-weight: 700;     /* Numeric value (bold) */
    font-weight: 400;     /* Numeric value (normal) */
}

`font-style`

The font-style property defines the style of the font, such as normal, italic, or oblique.


p {
    font-style: normal;  /* Normal text */
    font-style: italic;  /* Italic text */
    font-style: oblique; /* Oblique text (slightly slanted) */
}

Important Font Notes:

Using Web Fonts: To use web fonts like Google Fonts, you can import them into your CSS.


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

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

Font Fallbacks: Always provide fallback fonts to ensure text is displayed properly even if a preferred font is unavailable.


p {
    font-family: 'Georgia', 'Times New Roman', Times, serif;
}

Responsive Design: Use relative units like em or rem for font sizes to ensure your text scales appropriately across different devices.


p {
    font-size: 1.2rem; /* 1.2 times the root font size */
}

CSS text-shadow

In CSS, the text-shadow property is used to add shadow effects to text. You can apply multiple shadows to text by separating each shadow effect with a comma. The text-shadow property accepts values for the horizontal offset, vertical offset, blur radius, and color of the shadow.

Syntax:


text-shadow: horizontal-offset vertical-offset blur-radius color;

Examples:

1. Basic Text Shadow:


p {
    text-shadow: 2px 2px 4px #000000;
}

Explanations of above example:

2px: Horizontal offset (moves the shadow 2 pixels to the right)
2px: Vertical offset (moves the shadow 2 pixels down)
4px: Blur radius (the amount of blur applied to the shadow)
#000000: Shadow color (black)

2. Multiple Text Shadows:


h1 {
    text-shadow: 1px 1px 2px #ff0000, 2px 2px 4px #00ff00, 3px 3px 6px #0000ff;
}

This applies three separate shadows to the text, each with different offsets, blur radii, and colors.

3. Inset Shadow: Although text-shadow does not directly support inset shadows (like box-shadow does), you can achieve similar effects with clever use of offsets and colors.


h2 {
    text-shadow: -1px -1px 0 #ff0000, 1px 1px 0 #00ff00;
}

CSS text spacing

In CSS, text spacing can be adjusted using a few different properties depending on the specific type of spacing you’re aiming to control.

1. Line Height: Controls the vertical spacing between lines of text.


p {
    line-height: 1.5; /* or a unit value like 24px */
}

2. Letter Spacing: Adjusts the space between individual characters.


p {
    letter-spacing: 3px; /* or other unit values */
}

3. Word Spacing: Modifies the space between words.


p {
    word-spacing: 4px; /* or other unit values */
}

4. Text Indent: Indents the first line of text in a block.


p {
    text-indent: 20px; /* or other unit values */
}

5. Text Align: Aligns text horizontally within its containing element.


p {
    text-align: justify; /* or left, right, center */
}

6. Margin and Padding: Adds space around or inside elements, respectively, which can affect the overall spacing of text within its container.


p {
    margin: 20px; /* space outside the element */
    padding: 20px; /* space inside the element */
}

CSS text transform

In CSS, the text-transform property is used to control the capitalization of text within an element. This property allows you to transform text to uppercase, lowercase, capitalize.

Syntax


selector {
  text-transform: value;
}

text-transform values

none: Default. No transformation is applied.

capitalize: Transforms the first character of each word to uppercase.

uppercase: Transforms all characters to uppercase.

lowercase: Transforms all characters to lowercase.

full-width: Changes the text to full-width form (typically used in East Asian typography).

inherit: Inherits the text-transform value from its parent element.

initial: Sets the property to its default value.

Examples

1. Capitalize:


p.capitalize {
  text-transform: capitalize;
}

2. Uppercase:


p.uppercase {
  text-transform: uppercase;
}

3. Lowercase:


p.lowercase {
  text-transform: lowercase;
}

4. Full-width:


p.full-width {
  text-transform: full-width;
}

5. None (No Transformation):


p.none {
  text-transform: none;
}

Example: Here is an example of a simple HTML page demonstrating various uses of the text-transform property:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .capitalize {
            text-transform: capitalize;
        }
        .uppercase {
            text-transform: uppercase;
        }
        .lowercase {
            text-transform: lowercase;
        }
        .full-width {
            text-transform: full-width;
        }
        .none {
            text-transform: none;
        }
    </style>
</head>
<body>
    <p class="capitalize">this text will have each word capitalized.</p>
    <p class="uppercase">this text will be transformed to uppercase.</p>
    <p class="lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
    <p class="full-width">this text will be transformed to full-width form.</p>
    <p class="none">This Text Will Not Be Transformed.</p>
</body>
</html>

CSS text decoration

In CSS, the text-decoration property is used to add or remove decorations to/from text. This includes underlining, overlining, line-through (strikethrough), and the style and color of these decorations. Here’s a detailed guide on how to use the text-decoration property:

Syntax


selector {
  text-decoration: value;
}

text-decoration values

1. text-decoration-line: Specifies the kind of text decoration to use (underline, overline, line-through, none).

none: No text decoration.

underline: Adds a line beneath the text.

overline: Adds a line above the text.

line-through: Adds a line through the middle of the text.

underline overline: Adds lines both above and beneath the text.

2. text-decoration-color: Specifies the color of the text decoration.

color: Any valid CSS color value (named colors, HEX, RGB, RGBA, HSL, HSLA).

3. text-decoration-style: Specifies the style of the text decoration.

solid: Default. A solid line.

double: A double line.

dotted: A dotted line.

dashed: A dashed line.

wavy: A wavy line.

4. text-decoration-thickness: Specifies the thickness of the text decoration line (not supported in all browsers).

from-font: The default value. Uses the thickness defined by the font.

length: Any valid length value (e.g., 2px, 0.1em).

Example

Here is an example of a simple HTML page demonstrating various uses of the text-decoration property:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .underline {
            text-decoration: underline;
        }
        .overline {
            text-decoration: overline;
        }
        .line-through {
            text-decoration: line-through;
        }
        .multiple {
            text-decoration: underline overline;
        }
        .decoration-color {
            text-decoration: underline;
            text-decoration-color: red;
        }
        .decoration-style {
            text-decoration: underline;
            text-decoration-style: wavy;
        }
        .decoration-thickness {
            text-decoration: underline;
            text-decoration-thickness: 3px;
        }
    </style>
</head>
<body>
    <p class="underline">This text has an underline.</p>
    <p class="overline">This text has an overline.</p>
    <p class="line-through">This text has a line through it.</p>
    <p class="multiple">This text has both an underline and an overline.</p>
    <p class="decoration-color">This text has an underline with a red color.</p>
    <p class="decoration-style">This text has a wavy underline.</p>
    <p class="decoration-thickness">This text has a thick underline.</p>
</body>
</html>

CSS Text align

In CSS, the text-align property is used to set the horizontal alignment of text within an element. Here are the possible values and how to use them:

Syntax


selector {
  text-align: value;
}

text-align values

left: Aligns the text to the left.

right: Aligns the text to the right.

center: Centers the text.

justify: Stretches the lines so that each line has equal width, and the left and right margins are aligned.

start: Aligns text to the start of the writing mode. For left-to-right text, this is equivalent to left.

end: Aligns text to the end of the writing mode. For left-to-right text, this is equivalent to right.

Example:

1. Left Align:


p {
   text-align: left;
}

2. Right Align:


p {
   text-align: right;
}

3. Center Align:


p {
   text-align: center;
}

4. Justify Align:


p {
   text-align: justify;
}

Examples: Here is an example of a simple HTML page demonstrating the use of the text-align property:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .left {
            text-align: left;
        }
        .right {
            text-align: right;
        }
        .center {
            text-align: center;
        }
        .justify {
            text-align: justify;
        }
    </style>
</head>
<body>
    <p class="left">This text is aligned to the left.</p>
    <p class="right">This text is aligned to the right.</p>
    <p class="center">This text is centered.</p>
    <p class="justify">This text is justified. It will stretch the lines so that each line has equal width, and the left and right margins are aligned, making the text look more uniform and neat.</p>
</body>
</html>

CSS Text color

In CSS, the color property is used to set the color of text. You can specify the color using different formats, such as named colors, HEX values, RGB values, RGBA values, HSL values, and HSLA values. Here’s a detailed guide on how to use the color property to style text:

Syntax


color: value;

Color Format values

1. Named Colors:


p {
  color: red;
}

2. HEX Values:


p {
  color: #ff0000;
}

3. RGB Values:


p {
  color: rgb(255, 0, 0);
}

4. RGBA Values:


p {
  color: rgba(255, 0, 0, 0.5); /* The last value is the alpha (opacity) */
}

5. HSL Values:


p {
  color: hsl(0, 100%, 50%);
}

6. HSLA Values:


p {
  color: hsla(0, 100%, 50%, 0.5); /* The last value is the alpha (opacity) */
}

Example: Basic Example with Named Colors


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>This is a paragraph with blue text.</p>
</body>
</html>

This is a paragraph with blue text.

CSS Height and Width

In CSS, the height and width properties are used to set the height and width of an element. Here’s a detailed guide on how to use these properties:

Syntax: for height


height: value;

Syntax: for Width


width: value;

Values of height and width

auto: Default value. The browser calculates the height/width.

length: Defines the height/width in px, cm, etc.

%: Defines the height/width in percent of the containing block.

initial: Sets the height/width to its default value.

inherit: Inherits the height/width from its parent element.

Examples

1. Fixed Height and Width:


.box {
  height: 200px;
  width: 300px;
  border: 1px solid #000;
}

2. Percentage-Based Height and Width:


.container {
  height: 100%; /* Takes up 100% of the parent's height */
  width: 50%;   /* Takes up 50% of the parent's width */
  border: 1px solid #000;
}

3. Height and Width with Auto Value:


.box {
  height: auto; /* Automatically calculated height */
  width: auto;  /* Automatically calculated width */
  border: 1px solid #000;
}

4. Using max-width and max-height:


.image {
  max-width: 100%;  /* Ensures the image does not exceed the container's width */
  max-height: 100%; /* Ensures the image does not exceed the container's height */
}

`min-width` and `min-height`

Use min-width and min-height to set the minimum dimensions an element can have.


.box {
  min-height: 100px;
  min-width: 200px;
  border: 1px solid #000;
}

`max-width` and `max-height`

Use max-width and max-height to set the maximum dimensions an element can have.


.box {
  max-height: 300px;
  max-width: 400px;
  border: 1px solid #000;
}

box-sizing

The box-sizing property can affect the actual rendered dimensions of an element by including/excluding padding and border in the element’s total width and height.


.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 10px solid #000;
    box-sizing: border-box; /* Ensures the padding and border are included in the width and height */
}

CSS Paddings

In CSS, the padding property is used to generate space around an element’s content, inside of any defined borders.

Syntax

1. All four sides: Adds 10px padding to all sides.


padding: 10px;

container1

2. Vertical and Horizontal: Adds 10px padding to top and bottom, 20px to left and right


padding: 10px 20px;

container2

3. Top, Horizontal and Bottom:


padding: 10px 20px 30px;

container3

4. Top, Right, Bottom and Left: Adds 10px to top, 20px to right, 30px to bottom, 40px to left.


padding: 10px 20px 30px 40px;

container4

5. Individual sides padding: Adds 10px to top, 20px to right, 30px to bottom, 40px to left.


padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

container5

Difference between Padding and Margin

Padding is the space between the content and the border of an element.

Margin is the space outside the border of an element.

Example:- Suppose you have a <div> element with some text, and you want to add padding around the text to make it look more spacious:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            padding: 20px;
            border: 1px solid #000;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="box">
        This is a box with padding.
    </div>
</body>
</html>

This is a box with padding.

CSS Margins

The margin property in CSS is used to create space around elements, outside of any defined borders. The margin property can be set individually for each side or as a shorthand for all sides.

Syntax:

Individual Properties:

margin-top: value;
margin-right: value;
margin-bottom: value;
margin-left: value;

Shorthand Property:


margin: [top] [right] [bottom] [left];

Shorthand Values:

1. One Value:


/* All sides will have 10px margin */
p {
    margin: 10px;
}

container1

All sides will have 10px margin

2. Two Values:


/* Vertical (top and bottom) margins are 10px, horizontal (right and left) margins are 20px */
p {
     margin: 10px 20px;
}

container1

Vertical (top and bottom) margins are 10px, horizontal (right and left) margins are 20px

3. Three Values:


/* Top margin is 10px, horizontal (right and left) margins are 20px, bottom margin is 30px */
p {
     margin: 10px 20px 30px;
}

container1

Top margin is 10px, horizontal (right and left) margins are 20px, bottom margin is 30px

4. Four Values:


/* Top margin is 10px, right margin is 20px, bottom margin is 30px, left margin is 40px */
p {
      margin: 10px 20px 30px 40px;
}

container1

Top margin is 10px, right margin is 20px, bottom margin is 30px, left margin is 40px

Auto Margin: You can use margin: auto; to center an element horizontally within its container. This works when the element has a defined width.


/* Horizontally centering a block element */
.centered {
    width: 50%;
    margin: 0 auto;
}

Negative Margins: Negative values are allowed for margins, which can pull elements closer together.


/* Negative margin example */
.negative-margin {
    margin-top: -10px;
}

border shorthand

In CSS, the border shorthand property allows you to define the width, style, and color of an element’s border in a single declaration. Here is the general syntax and some examples:

Syntax:


border: [border-width] [border-style] [border-color];

Examples:

1. A solid red border with 2px width


p {
    border: 2px solid red;
}

A solid red border with 2px width

2. A solid black border with medium width


p {
     border: solid;
}

A solid black border with medium width

Individual Borders:

You can also set the border for individual sides using these properties:


border-top: 1px solid black;
border-right: 2px dotted red;
border-bottom: 3px dashed blue;
border-left: 4px double green;

Example: Combining Styles


p {
    border-top: 2px solid red;
    border-right: 4px dotted green;
    border-bottom: 6px dashed blue;
    border-left: 8px double purple;
}

Example of Combining Styles

border color

The border-color property in CSS is used to set the color of an element’s border. You can specify the color using various formats, such as color names, hexadecimal values, RGB/RGBA values, or HSL/HSLA values. The border-color property can be applied to all sides of an element’s border simultaneously or to each side individually.

Syntax


element {
    border-color: colorName;  /* you can set any color into border-color property */
}

1. Apply the same color to all four sides


p {
    border-color: green;  /* you can set any color into border-color property */
}

Apply the same color to all four sides

2. Apply different colors to each side


p {
     border-color: red green blue yellow; /* top right bottom left */
}

Apply the same color to all four sides

3. Apply different colors to two sides


p {
     border-color: red green;
}

Apply different colors to two sides

4. Individual sides


p {
    border-top-color: red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: yellow;
}

Individual sides

Use border-color property values

Color Name: Use a predefined color name.


element {
    border-color: red;
}

Use a predefined color name

Hexadecimal: Use a hexadecimal value.


element {
    border-color: #ff0000;
}

Use a hexadecimal value

RGB: Use an RGB value.


element {
    border-color: rgb(255, 0, 0);
}

Use an RGB value

RGBA: Use an RGBA value for transparency.


element {
    border-color: rgba(255, 0, 0, 0.5); /* 50% transparent red */
}

Use an RGB value

HSL: Use an HSL value.


element {
    border-color: hsl(0, 100%, 50%);
}

Use an HSL value

HSLA: Use an HSLA value for transparency.


element {
    border-color: hsla(0, 100%, 50%, 0.5); /* 50% transparent red */
}

Use an HSLA value for transparency

border width

The border-width property in CSS is used to specify the width of an element’s border. It can be set using specific length values (e.g., pixels, ems, rems) or predefined keywords. This property can be applied to all sides of an element’s border simultaneously or to each side individually.

Syntax:-


element {
    border-width: 5px; /* you can define width according your requirement*/
}

1. Apply the same width to all four sides


p {
    border-width: 5px;
}

Apply the same width to all four sides

2. Apply different widths to each side


p {
     border-width: 2px 4px 6px 8px; /* top right bottom left */
}

Apply different widths to each side

3. Apply different widths to two sides


p {
    border-width: 2px 4px; /* top & bottom right & left */
}

Apply different widths to two sides

4. Individual sides


p {
    border-top-width: 5px;
    border-right-width: 10px;
    border-bottom-width: 15px;
    border-left-width: 20px;
}

Apply different widths to two sides

CSS border

The border property in CSS is used to set the border around an element. You can specify the border’s width, style, and color. The border property is a shorthand that combines these individual properties:

border-width: Specifies the width of the border.
border-style: Specifies the style of the border.
border-color: Specifies the color of the border.

Border Styles

there are many border-style property.

none: No border (default).
solid: A solid line.
dotted: A series of dots.
dashed: A series of dashes.
double: Two solid lines.
hidden: A hidden border.
groove: A 3D grooved border.
ridge: A 3D ridged border.
inset: A 3D inset border.
outset: A 3D outset border.

Example:-

1. border:none


<p style="border:none;">border none Example</p>

Try it Yourself

border none Example

2. border:solid


<p style="border:solid;">border solid Example</p>

border solid Example

3. border:dotted


<p style="border:dotted;">Dotted Example</p>

Try it Yourself

border dotted Example

4. border:dashed


<p style="border:dashed;">border dashed Example</p>

Try it Yourself

border dashed Example

5. border:double


<p style="border:double;">border double Example</p>

Try it Yourself

border double Example

6. border:groove


<p style="border:groove;">border groove Example</p>

border groove Example

7. border:ridge


<p style="border:ridge;">border ridge Example</p>

border ridge Example

8. border:inset


<p style="border:inset;">border inset Example</p>

border inset Example

9. border:outset


<p style="border:outset;">border outset Example</p>

border outset Example

10. border:hidden


<p style="border:hidden;">border hidden Example</p>

border hidden Example

CSS background

CSS background is a shorthand property used to set multiple background-related properties for an element in one declaration. This can include background color, image, position, size, repeat, origin, clip, and attachment. Here’s a breakdown of the properties that can be included in the background shorthand:

background-color

Sets the background color of an element.


background-color: #ff0000; /* Red */

background-image

Sets the background image of an element.


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

background-position

The background-position property in CSS is used to specify the initial position of a background image within an element. This property allows you to precisely control where the background image is placed relative to the element’s background area. You can set the position using keywords, length units, or percentages.

1. Predefined Keywords: You can use predefined keywords to position the background image.

top, right, bottom, left, center.

Syntax:


background-position: top left; 
background-position: bottom right;
background-position: center center; /* or just center */

Example: Image positioned at the top left corner


background-image: url('image.jpg');
background-position: top left; /* Image positioned at the top left corner */

2. Length Units: You can use length units such as pixels (px), ems (em), rems (rem), etc.


background-position: 10px 20px; /* 10px from the left, 20px from the top */

Example:- Image positioned 30px from the left and 40px from the top


element {
    background-image: url('image.jpg');
    background-position: 30px 40px; /* Image positioned 30px from the left and 40px from the top */
}

3. Percentages: You can use percentages to position the background image relative to the element’s size. 0% represents the start (top or left), and 100% represents the end (bottom or right).


background-position: 50% 50%; /* Centered */
background-position: 0% 100%; /* Bottom left */

Example:- Image centered through percentages


element {
    background-image: url('image.jpg');
    background-position: 50% 50%; /* Image centered */
}

4. Combination of Length and Percentage


background-position: 50% 10px; /* Center horizontally, 10px from the top */

Example:- Image centered horizontally, 20px from the top


element {
    background-image: url('image.jpg');
    background-position: 50% 20px; 
}

5. Using calc(): For more complex positioning, you can use the calc() function.


background-position: calc(100% - 10px) calc(100% - 20px);

Example:- Image positioned 10px from the right and 20px from the bottom


element {
    background-image: url('image.jpg');
    background-position: calc(100% - 10px) calc(100% - 20px);
}

background-size

The background-size property in CSS is used to specify the size of the background images of an element. This property allows you to control how a background image is scaled and displayed within an element. Here are the possible values for background-size

1. auto: The background image is displayed at its original size. This is the default value.


background-size: auto;

2. length: You can specify the width and height of the background image using length units (e.g., pixels, ems, etc.). If only one value is provided, the second value is set to auto.


background-size: 100px 200px; /* Width 100px, height 200px */
background-size: 100px;      /* Width 100px, height auto */

3. percentage: The background image is scaled relative to the element’s dimensions. The first value sets the width, and the second value sets the height. If only one value is provided, the second value is set to auto.


background-size: 50% 50%;   /* 50% of the element's width and height */
background-size: 50%;       /* Width 50%, height auto */

background-repeat

The background-repeat property in CSS is used to control how background images are repeated (tiled) within an element. By default, background images are repeated both horizontally and vertically. The background-repeat property allows you to change this behavior. Here are the possible values for background-repeat:

1. repeat: The background image is repeated both horizontally and vertically. This is the default value.


background-repeat: repeat;

2. repeat-x: The background image is repeated only horizontally.


background-repeat: repeat-x;

3. repeat-y: The background image is repeated only vertically.


background-repeat: repeat-y;

4. no-repeat: The background image is not repeated.


background-repeat: no-repeat;

CSS color

CSS color refers to the specification and application of color in web design using Cascading Style Sheets (CSS). CSS allows you to set the color of text, backgrounds, borders, and other elements on a webpage. There are several ways to define colors in CSS:

Named Colors

CSS includes a set of named colors that can be used directly. For example:


color: red;

Hexadecimal Colors

Colors can be defined using hexadecimal (hex) values, which start with a # followed by six hexadecimal digits. The first two digits represent the red component, the next two represent green, and the last two represent blue. For example:


color: #ff0000; /* red */

RGB and RGBA Colors

Colors can be specified using the rgb() or rgba() functions. The rgb() function takes three parameters (red, green, and blue), each ranging from 0 to 255. The rgba() function includes an additional parameter for alpha (opacity) which ranges from 0 (completely transparent) to 1 (completely opaque). For example:


color: rgb(255, 0, 0); /* red */

HSL and HSLA Colors

Colors can also be defined using the hsl() or hsla() functions. The hsl() function takes three parameters: hue (0-360), saturation (0%-100%), and lightness (0%-100%). The hsla() function adds an alpha parameter for opacity. For example:


color: hsl(0, 100%, 50%); /* red */

CSS Comments

CSS comments are used to add explanatory notes or disable parts of the CSS code temporarily. They are ignored by the browser and do not affect how the CSS is rendered. Here’s how you can use comments in CSS:

Syntax:

CSS comments start with /* and end with */. Any text between these symbols is considered a comment and will not be processed by the browser.

Single-Line Comment

You can use a single-line comment to explain a single line of CSS code.


/* This is a single-line comment */
p {
    color: blue; /* This comment is on the same line as the property */
}

Multi-Line Comment

You can use a multi-line comment to explain a block of CSS code or to provide more detailed explanations.


/*
  This is a multi-line comment.
  Author: John
*/
body {
    background-color: Gray; /* This comment is on the same line as the property */
}

Disabling Code with Comments

Comments can also be used to temporarily disable a section of code. This is useful for debugging.


/*
p {
    color: red;
}
*/

h1 {
    color: green;
}

Why we use comments?

Explain Complex Code: Use comments to explain complex or non-intuitive sections of your CSS.

Consistency: Maintain a consistent style for comments throughout your CSS files.

Avoid Overuse: While comments are helpful, overusing them can make your CSS harder to read. Use them judiciously.

Keep Comments Updated: Ensure that comments remain accurate as you update your CSS.

Example

Here’s an example demonstrating various uses of comments in CSS:


/* Main layout styles */
body {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    font-family: Arial, sans-serif; /* Set default font */
}

/* Header styles */
header {
    background-color: #333; /* Dark background for header */
    color: #fff; /* White text color */
    text-align: center; /* Center align text */
    padding: 1em 0; /* Vertical padding */
}

/* Main content styles */
.main-content {
    padding: 20px; /* Add padding around content */
}

/*
.highlight {
    background-color: yellow; 
    This block is currently disabled 
}
*/

footer {
    text-align: center; /* Center align footer text */
    font-size: 0.8em; /* Smaller text for footer */
    color: #999; /* Gray text color */
}

CSS Selectors

Selectors are used to target HTML elements you want to style. Common types include:

Element Selector: Targets all elements of a specific type.


p {
    color: green;
}

Try it Yourself

Class Selector: Targets elements with a specific class attribute.


.className {
    color: blue;
}

Try it Yourself

ID Selector: Targets an element with a specific ID attribute.


#idname {
    color: green;
}

Try it Yourself

Universal Selector: Targets all elements.


* {
    color: blue;
}

Try it Yourself

Attribute Selector: Targets elements with a specific attribute.


[type="text"] {
    border: 2px solid black;
}

Try it Yourself

Pseudo-class Selector: Targets elements in a specific state.


a:hover {
    color: green;
}

Try it Yourself

Properties and Values


body {
    background-color: lightblue;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

Combining Selectors

Selectors can be combined to target elements more precisely.

Descendant Selector: Targets elements that are descendants of a specified element.


div p {
    color: green;
}

Try it Yourself

Child Selector: Targets direct child elements of a specified element.


div > p {
    color: blue;
}

Try it Yourself

CSS Syntax

CSS (Cascading Style Sheets) is used to style and layout web pages. Here’s an overview of the basic syntax and how to use it:

Basic Structure

A CSS rule consists of a selector and a declaration block:


selector {
    property: value;
    property: value;
    ...
}

Example:- In this example, I created class container and defined property background-color which has value #ff0000 (It is a red color) and property color which has #FFFF00 ( it is a yellow color)


.container {
 background-color: "#ff0000";  /*red color*/
 color: "#FFFF00";   /*yellow color*/
}

Try it Yourself

Adding CSS to HTML

Adding CSS to HTML can be done in three main ways: inline CSS, internal CSS, and external CSS. Here’s how each method works:

Inline CSS

Inline CSS is used to apply a unique style to a single HTML element. To use inline CSS, add the style attribute directly within the HTML tag and set the CSS properties and values.

Example:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body>
    <h1 style="color: blue; text-align: center;">Hello, world!</h1>
</body>
</html>

Internal CSS

Internal CSS is used to define styles for a single HTML page. You define internal CSS within a <style> element inside the <head> section of the HTML document.

Example:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal CSS Example</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

External CSS

External CSS is used to define styles for multiple HTML pages. You link an external CSS file to an HTML document using the <link> element within the <head> section. This method is the most efficient way to manage and maintain styles across multiple pages.

Example: Create an external CSS file (styles.css):


body {
    background-color: lightblue;
}
h1 {
    color: navy;
    text-align: center;
}

Link the external CSS file in your HTML document:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

Best Practices

Use external CSS: Whenever possible, use external CSS for better maintainability and separation of concerns.

Keep it organized: Group related styles together in your CSS files and use comments to describe sections.

Use meaningful names: Use descriptive class and ID names to make your CSS easier to understand and maintain.

Avoid inline CSS: Inline CSS should be avoided unless necessary for quick tests or overrides.

CSS Introduction

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

Basic Structure of CSS

CSS is made up of rules. Each rule consists of a selector and a declaration block.


selector {
  propertyName1: value1;
  propertyName2: value2;
}

Selector: This is the HTML element you want to style.

Declaration block: This contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

Example: Here’s a simple example:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Example</title>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
      margin-left: 20px;
    }
  </style>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

Try it Yourself

In this example:

The body selector styles the entire page’s background to be light blue.

The h1 selector changes the color of the heading to navy and adds a left margin.

1. Descendant Combinator ()

2. Child Combinator (>)

3. Adjacent Sibling Combinator (+)

4. General Sibling Combinator (~)

Text Alignment

Vertical Alignment

Flexbox Alignment

Key Characteristics:

Float property values

overflow property values

Additional Properties:

position: static

position: relative

position: absolute

position: fixed

position: sticky

values of max-width

Important Points

property values

Basic HTML Table Structure

Basic CSS Table Properties

Unordered Lists (<ul>)

Unordered List

Ordered Lists (<ol>)

Ordered List

Definition Lists (<dl>)

Definition List

Basic link states

Text Decorations Property

Background color Property

1. Using Icon Fonts

2. Using SVGs

3. CSS-Generated Content

4. Using CSS Libraries

Font Properties:

font-family

font-size

font-weight

font-style

Important Font Notes:

text-transform values

text-decoration values

text-align values

Color Format values

Values of height and width

min-width and min-height

max-width and max-height

box-sizing

Difference between Padding and Margin

Syntax:

Individual Borders:

Use border-color property values

Border Styles

background-color

background-image

background-position

background-size

background-repeat

Named Colors

Hexadecimal Colors

RGB and RGBA Colors

HSL and HSLA Colors

Single-Line Comment

Multi-Line Comment

Disabling Code with Comments

Why we use comments?

Combining Selectors

Inline CSS

Internal CSS

Example:

External CSS

Basic Structure of CSS

2. Child Combinator (`>`)

3. Adjacent Sibling Combinator (`+`)

4. General Sibling Combinator (`~`)

Unordered Lists (`<ul>`)

Ordered Lists (`<ol>`)

Definition Lists (`<dl>`)

`font-size`

`font-weight`

`font-style`

`min-width` and `min-height`

`max-width` and `max-height`