2. CSS

CSS: Cascading Style Sheets in Web Programming

What is CSS?

CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of a document written in HTML or XML. It is primarily used to enhance the appearance of web pages and user interfaces written in HTML and XHTML.

CSS Height Property

The height property in CSS is used to specify the height of an element. When you set the height to a percentage like 40%, the height of the element will always be 40% of the viewport height (vh).

Example:

div {
    height: 40vh;
}

CSS Block Elements

A block-level element always starts on a new line and takes up the full width available. If we do not specify a size for a block-level element, the size defaults to 0. For instance, if we do not give a height, the height will be 0 and it will not be visible on the screen.

Example:

div {
    height: 0; /* Will not be visible on the screen */
}

CSS Selectors

Class Selector

The class selector selects elements with a specific class. The class selector uses the HTML class attribute, and is defined with a "."

Example:

.box div {
    /* Styles here will apply to all div elements within an element with the class "box" */
}

Child Selector

The child selector selects elements that are direct children of a specific element. The child selector is defined with ">".

Example:

.box > div {
    /* Styles here will apply to all div elements that are direct children of an element with the class "box" */
}

Inline vs Inline-Block

An inline element does not start on a new line and only takes up as much width as necessary. However, you cannot set the width and height of inline elements. When you need to set width, height, margin, etc., you can use inline-block. Inline-block elements are like inline elements but they can have a width and height.

Example:

span {
    display: inline; /* Will not allow width, height, margin, etc. */
    display: inline-block; /* Will allow width, height, margin, etc. */
}

CSS Table Properties

A table is a structured set of data made up of rows and columns. The downside of a table is that it cannot expand.

• tr: Defines a row in a table.

• th: Defines a header cell in a table.

• td: Defines a cell in a table.

Example:

table, th, td {
    border: 1px solid black;
}

CSS List Properties

Ordered List (ol)

An ordered list, <ol>, is a list of items where order is important. By default, the list items are marked with numbers.

Example:

<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

Unordered List (ul)

An unordered list, <ul>, is a list of items where order does not matter. By default, the list items are marked with bullets.

Example:

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

The list-style property is used to change the appearance of the list item marker.

Reference

The content in this document is based on the original notes provided in Azerbaijani. For further details, you can refer to the original document using the following link:

Original Note - Azerbaijani Version