CSS Course

CSS ( Cascading Style Sheets ) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It allows you to control the layout, colors, fonts, and overall appearance of web pages. CSS works by associating rules with HTML elements, which specify how those elements should be displayed on the screen.

CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. It enables web developers to create visually appealing and responsive websites by separating the content (HTML) from the presentation (CSS). With CSS, you can define styles for various elements, such as headings, paragraphs, links, and images, and apply those styles consistently across multiple pages of a website.

Syntax

CSS syntax consists of a selector and a declaration block. The selector specifies which HTML elements the styles will be applied to, while the declaration block contains one or more declarations, each consisting of a property and a value. For example: 

selector {
    property: value;
}

In this example, "selector" is the HTML element or group of elements you want to style, "property" is the CSS property you want to set (such as color, font-size, or margin), and "value" is the specific value you want to assign to that property (such as red, 16px, or 10px).

Example

Here is a simple example of CSS in action:

body {
    background-color: lightblue;
}
h1 {
    color: white;
    text-align: center;
}
p {
    font-family: verdana;
    font-size: 20px;
}

In this example, the body of the webpage will have a light blue background, all h1 elements will have white text that is centered, and all p elements will use the Verdana font at a size of 20px.

Absolute Units

  • px (Pixels): This absolute unit is a fixed-size unit of measurement in CSS, providing precise control over dimensions. This means that 1px is always equal to 1/96th of an inch.
  • in (Inch): This absolute unit is equal to 96px.
  • cm (Centimeters): This absolute unit is equal to 25.2/64 of an inch.
  • mm (Millimeters): This absolute unit is equal to 1/10th of a centimeter.
  • q (Quarter-Millimeters): This absolute unit is equal to 1/40th of a centimeter.
  • pc (Picas): This absolute unit is equal to 1/6th of an inch.
  • pt (Points): This absolute unit is equal to 1/72th of an inch.

Relative Units

  • %Percentages: These relative units allow you to define sizes, dimensions, and other properties as a proportion of their parent element. For example, if you set width: 50%; on an element, it will occupy half the width of its parent container.
  • em Unit: These units are relative to the font size of the element. If you are using ems for the font-size property, the size of the text will be relative to the font size of the parent element.
  • rem Unit: These units are relative to the font size of the root element, which is the html element.
  • vh Unit: vh stands for "viewport height" and 1vh is equal to 1% of the viewport's height.
  • vw Unit: vw stands for "viewport width" and 1vw is equal to 1% of the viewport's width.

Color

CSS provides several ways to specify colors, including:

  • Named colors (e.g., red, blue, green)
  • Hexadecimal colors (e.g., #ff0000 for red)
  • RGB colors Model: 
    element {
  color: rgb ( red, green, blue );
  }

    The values for red, green, and blue can range from 0 to 255, where 0 represents the absence of that color, and 255 represents full saturation.

  • RGBA colors (e.g., rgba(255, 0, 0, 0.5) for semi-transparent red)
  • HSL colors (e.g., hsl(0, 100%, 50%) for red)
  • HSLA colors (e.g., hsla(0, 100%, 50%, 0.5) for semi-transparent red)

Choosing the right color format can depend on your specific needs, such as whether you need transparency or want to use a specific color palette. CSS also allows you to use color functions and variables for more dynamic and maintainable styling.

Selectors

CSS selectors are patterns used to select the elements you want to style. There are various types of selectors, including:

  • Element selectors (e.g., p, h1)
  • Class selectors (e.g., .class-name)
  • ID selectors (e.g., #id-name)
  • Attribute selectors (e.g., [type="text"])
  • Pseudo-class selectors (e.g., :hover, :first-child)

Understanding how to use these selectors effectively is crucial for creating dynamic and maintainable CSS styles.

Pseudo-classes

User Action Pseudo-classes

  • Pseudo-classes Definition: Thes are special CSS keywords tha allow you to select an element based on tis specific state or position.
  • User Action Pseudo-classes: Thes are special keywords that allow you to change the apperance of elements based on user interactions, improving the overall user exoeruence.
  • :activePseudo-class: This pseudo-class lets you select the active state of an element, like clicking on a button.
  • :hoverPseudo-class: This pseudo-class defines the hiver state if an element.
  • :hover Pseudo-class: This pseudo-class defines the hover state of an element.
  • :focusPseudo-class: This pseudo-class applies styles when an element gains focus, typically through keyboard navigation or when a user clicks into a form input.
  • :focus-within Pseudo-class: This pseudo-class is used to apply styles to an element when it or any of its descendants have focus.

Exemple:

a:hover {
    color: red;
}
ch:checked {
    display: none;
}
a:visited {
    color: blue;
}
div:empty{
    background: green;
}
.in:focus{
    border: blue;
}

Flex Box Parent

The flex container is the parent element that holds the flex items. It is defined by setting the display property to flex or inline-flex. The flex container establishes a new flex formatting context for its children, allowing them to be laid out in a flexible and responsive manner. The flex container can be configured with various properties to control the layout and alignment of its child elements, such as flex-direction, justify-content, align-items, and more.