Css - touseefbaigcodes/Frontend-Notes GitHub Wiki

CSS:

It defines how the html elements should be displayed on the screens. It controls the color, fonts, hight, width ect. It decides the appearance of the webpage.

  1. Inline Styles: This method involves adding CSS directly within the HTML tags.
  2. Internal (or Embedded) Styles: You can define styles for a particular page within the <style> tags in the section.
  3. External Styles: Styles are defined in a separate .css file and then linked to the HTML document.
<head>
     <link rel="stylesheet" href="style.css" />
</head>

Different Types of CSS Selectors

  1. Universal Selector: It targets every element on the page.
    font-family: Arial, sans-serif;
}
  1. Element (or Type) Selector: Targets all instances of a specific element type.
  2. ID Selector: Targets a specific element based on its id attribute.
  3. Class Selector: Targets elements based on their class attribute.
  4. Child Selector: Targets direct children of a specified element.
#gallery > p {
    font-weight: bold;
}
  1. Descendant Selector: Targets all nested elements (or descendants) that match the specified selector, not just direct children.
#container div {
border: 1px solid black;
}
  1. Pseudo-selectors/pseudo-classes: allow us to style elements based on their certain state.
Pseudo-Class Description MDN Documentation
:active Targets elements currently being activated by the user (e.g., clicked links). MDN Docs
:focus Highlights the currently focused element, commonly used with form fields. MDN Docs
:hover Styles an element when a user hovers over it with their cursor. MDN Docs
:link Targets hyperlinks that haven't been visited by the user. MDN Docs
:visited Selects links that have been visited by the user. MDN Docs
:checked Targets checked elements like radio buttons or checkboxes. MDN Docs
:first-child Targets the first child element inside a parent element. MDN Docs
:last-child Selects the last child element within a parent. MDN Docs
:nth-child(n) Styles elements based on their position within a parent element. MDN Docs
:disabled Targets disabled form controls. MDN Docs for :disabled
:enabled Targets enabled form controls. MDN Docs for :enabled
:not(selector) Selects elements that do not match a specified selector. MDN Docs

Pseudo-elements in CSS

Allows to style certain parts of a document, or to virtually insert content into the document, without altering the actual HTML structure.

<div id="gallery">
    <p>
        <a href="https://www.google.com">Google</a>
    </p>
    <p>
        <a href="https://www.yahoo.com">Yahoo</a>
    </p>
</div>

#gallery {
    color: black;
}

#gallery p::first-letter {
    font-size: 20px;
    color: red;
}

#gallery a:hover::before {
    content: "→ ";
    color: green;
}
Pseudo-Element Description MDN Documentation
::before Inserts virtual content before an element's actual content. Typically used with the content property. MDN Docs
::after Inserts virtual content after an element's content. Often used with the content property. MDN Docs
::first-letter Targets the first letter of block-level elements, useful for drop cap styling. MDN Docs
::first-line Applies styles to the first line of text within block-level elements. MDN Docs

Box Model

Describes the structure of the element on the webpage. It consists 4 components including

  1. Content : it is actual content of a element.
  2. Padding : It creates space between content and border of the element.
  3. Border: it is boundary of the element.
  4. Margin: Margin is the space outside an element’s border. It is used to create space between elements on a web page.

Margin is the space outside an element’s border. It is used to create space between elements on a web page.

Felxbox

Technique used to create flexible and responsive designs by aligning and distributing space among elements without using floats or positioning.

How: It uses a flex container lets us control the layout of its child elements using properties like justify-content, align-items, and flex-direction

  1. Container Properties: These are set on the flex container.
Property Description Values
display Initiates the flex context, allowing use of Flexbox properties. flex, inline-flex
flex-direction Defines the direction of the main axis, controlling the flow of flex items. row, row-reverse, column, column-reverse
flex-wrap Determines whether flex items should wrap onto multiple lines when there isn’t enough space. nowrap, wrap, wrap-reverse
justify-content Aligns items along the main axis within the container. flex-start, flex-end, center, space-between, space-around, space-evenly
align-items Aligns items along the cross axis within the container. flex-start, flex-end, center, baseline, stretch
align-content Aligns lines of flex items when there is extra space on the cross axis.
  1. Item Properties: These are set on the flex items.
Property Description Values
flex Shorthand for setting flex-grow, flex-shrink, and flex-basis. none, auto, <flex-grow> <flex-shrink> <flex-basis>
align-self Allows an individual flex item to override the container’s align-items property. auto, flex-start, flex-end, center, baseline, stretch
order Specifies the order of the flex item within the container. Integer values, e.g., 0 (default), 1, -1, etc.
flex-basis Sets the initial main size of a flex item before any space distribution by flex-grow and flex-shrink. auto, length, percentage
flex-grow Specifies how much a flex item will grow relative to the rest of the flex items. Integer values, e.g., 0 (default), 1, 2, etc.
flex-shrink Specifies how much a flex item will shrink relative to the rest of the flex items. Integer values, e.g., 1 (default), 0, etc.
⚠️ **GitHub.com Fallback** ⚠️