CSS

How to add CSS

  1. inline: for specific section/ testing/ want it in one single element

  2. internal: useful for applying it only to one HTML document

  3. external: most used , styles.css

    1. Inline CSS:

    In this method, CSS rules are directly added to the HTML elements using the style attribute.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!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>
        <p style="font-size: 18px; font-family: Arial, sans-serif;">This is an example of inline CSS.</p>
    </body>
    </html>

    2. Internal CSS:

    In this method, CSS rules are placed inside the <style> element within the < head > section of the HTML document.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!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>
            h1 {
                color: blue;
                text-align: center;
            }
            p {
                font-size: 18px;
                font-family: Arial, sans-serif;
            }
        </style>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <p>This is an example of internal CSS.</p>
    </body>
    </html>

    3. External CSS:

    In this method, CSS rules are written in a separate .css file and then linked to the HTML document using the < link > tag.

    styles.css:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* styles.css */
    h1 {
        color: blue;
        text-align: center;
    }
    p {
        font-size: 18px;
        font-family: Arial, sans-serif;
    }

    index.html:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!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>
        <p>This is an example of external CSS.</p>
    </body>
    </html>

CSS Selector

  1. !Type Selector: Selects all elements of a specified type.

    1
    2
    3
    p {
        color: blue;
    }

  2. Class Selector: Selects all elements with a specified class attribute.

    1
    2
    3
    .highlight {
        background-color: yellow;
    }

  3. ID Selector: Selects a single element with a specified id attribute.

    1
    2
    3
    #header {
        font-size: 24px;
    }

  4. Descendant Selector: Selects all elements that are descendants of a specified element.

    1
    2
    3
    div p {
        font-weight: bold;
    }

  5. Child Selector: Selects all elements that are direct children of a specified element.

    1
    2
    3
    ul > li {
        list-style-type: square;
    }

  6. Adjacent Sibling Selector: Selects an element that is directly adjacent to another specified element.

    1
    2
    3
    h2 + p {
        margin-top: 20px;
    }

  7. Attribute Selector: Selects elements with a specified attribute and value.

    1
    2
    3
    input[type="text"] {
        width: 200px;
    }

  8. Pseudo-class Selector: Selects elements based on their state or position.

    1
    2
    3
    a:hover {
        color: red;
    }

  9. Pseudo-element Selector: Selects a specified part of an element.

    1
    2
    3
    p::first-line {
        font-weight: bold;
    }

selector

image-20240424202532710

CSS Properties

color

1
2
3
4
5
p {
    color: blue; /* Sets the text color to blue */
    background-color: yellow; /* Sets the background color to yellow */
}

font size

  1. Pixels (px): This is an absolute unit of measurement. One pixel is equal to one dot on the screen. Using pixels for font size ensures consistent sizing across different devices, but it may not scale well on high-resolution displays.

    1
    2
    3
    p {
        font-size: 16px;
    }

  2. Ems (em): The “em” unit is relative to the font size of the parent element. For example, if the parent element’s font size is 16px, then 1em is equal to 16px. Using ems for font size allows for more flexible and scalable typography.

    1
    2
    3
    p {
        font-size: 1.2em; /* 1.2 times the font size of the parent element */
    }

    rem

    relative to root size

    1
    2
    3
    span {
        font-size: 1.5rem; /* 1.5 times the font size of the root element */
    }

  3. Percentages (%): Similar to ems, percentages are also relative units. When used for font size, percentages are relative to the font size of the parent element.

    1
    2
    3
    p {
        font-size: 120%; /* 120% of the font size of the parent element */
    }

  4. Viewport Units (vw, vh, vmin, vmax): As mentioned earlier, viewport units are relative to the dimensions of the browser window. While primarily used for layout, viewport units can also be used for font size to create responsive typography.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    p {
        font-size: 5vw; /* 5% of the viewport width */
    }

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

    img {
        width: 50vmin; /* 50% of the viewport minimum (width or height) */
    }

    div {
        font-size: 3vmax; /* 3% of the viewport maximum (width or height) */
    }

Font Weight

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
p {
    font-weight: normal; /* Normal font weight (equivalent to 400) */
}

h1 {
    font-weight: bold; /* Bold font weight (equivalent to 700) */
}

h2 {
    font-weight: lighter; /* Lighter font weight relative to parent */
}

h3 {
    font-weight: bolder; /* Bolder font weight relative to parent */
}

span {
    font-weight: 600; /* Numeric value (custom font weight) */
}

In this CSS code:

  • font-weight: normal; sets the font weight of <p> elements to normal (equivalent to 400).
  • font-weight: bold; sets the font weight of <h1> elements to bold (equivalent to 700).
  • font-weight: lighter; sets the font weight of <h2> elements to lighter, adjusting relative to the parent’s font weight.
  • font-weight: bolder; sets the font weight of <h3> elements to bolder, adjusting relative to the parent’s font weight.
  • font-weight: 600; sets the font weight of <span> elements to a custom numeric value (600), which may vary depending on the font family.

Font Family

https://fonts.google.com/

To use a font from Google Fonts, you need to follow these steps:

  1. Find the Font: Visit the Google Fonts website and browse or search for the font you want to use. Once you’ve found the desired font, click on it to open its page.
  2. Select Styles and Weights: On the font’s page, you can customize the styles and weights of the font. Choose the styles (regular, italic, bold, etc.) and weights (normal, bold, etc.) that you want to include in your project.
  3. Get the Link: After selecting the styles and weights, Google Fonts provides you with a code snippet to include in your HTML document. This snippet includes a <link> tag that references a CSS file hosted by Google Fonts.
  4. Add the Link to Your HTML: Copy the provided <link> tag and paste it into the <head> section of your HTML document. This link imports the selected font styles and weights into your project.
  5. Apply the Font: Once the font is imported, you can use it in your CSS styles by specifying the font family.

Here’s an example of how to use a font from Google Fonts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using Google Fonts</title>
    <!-- Step 4: Add the link to your HTML -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
    <style>
        /* Step 5: Apply the font in your CSS */
        body {
            font-family: 'Roboto', sans-serif;
        }
    </style>
</head>
<body>
    <h1>Welcome to my website!</h1>
    <p>This is some text using the Roboto font from Google Fonts.</p>
</body>
</html>

In this example, the font “Roboto” with weights 400 (regular) and 700 (bold) is imported from Google Fonts using the provided <link> tag. Then, the font is applied to the <body> element using CSS.

text align

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
p {
    text-align: left; /* Aligns text to the left */
}

h1 {
    text-align: right; /* Aligns text to the right */
}

h2 {
    text-align: center; /* Aligns text to the center */
}

h3 {
    text-align: justify; /* Justifies text */
}

blockquote {
    text-align: initial; /* Sets text alignment to initial value (typically left) */
}

span {
    text-align: inherit; /* Inherits text alignment from parent */
}

In this CSS code:

  • text-align: left; aligns the text of <p> elements to the left.
  • text-align: right; aligns the text of <h1> elements to the right.
  • text-align: center; aligns the text of <h2> elements to the center.
  • text-align: justify; justifies the text of <h3> elements. Justified text aligns both the left and right edges of the text block. This means that each line of text is stretched to be the same width, with additional spacing inserted between words as needed.
  • text-align: initial; sets the text alignment of <blockquote> elements to the initial value, which is typically left-aligned.
  • text-align: inherit; inherits the text alignment of <span> elements from their parent element.

inspecting css

learn how to use chrome developer tools

Box Model

border:

box

image-20240425092003654

box3

padding

margin

https://www.w3schools.com/css/css_boxmodel.asp

CSS Cascading style sheets !!!

cascading rules

image-20240425093857621

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Qoverview

css selectors

group selector

1
2
3
4
selector1, selector2, selector3 {
    property: value;
    /* Additional properties and values */
}

In this syntax:

  • selector1, selector2, selector3 are individual selectors that you want to group together.
  • property: value; represents the CSS properties and values you want to apply to all the grouped selectors.

child selector

1
2
3
parent > child {
    /* Styles applied to direct children only */
}

In this syntax:

  • parent is the parent element you want to target.
  • child is the direct child element you want to style. cant be grand child. it has to be only one level nested inside

For example, consider the following HTML structure:

1
2
3
4
5
6
7
8
<div class="container">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <p>Paragraph</p>
</div>

If you want to style only the direct children (<ul> and <p>) of the .container div, you can use the child selector like this:

1
2
3
4
5
6
7
8
9
.container > ul {
    /* Styles applied to <ul> elements that are direct children of .container */
    list-style: none;
}

.container > p {
    /* Styles applied to <p> elements that are direct children of .container */
    font-style: italic;
}

In this example:

  • .container > ul targets <ul> elements that are direct children of elements with the class .container.
  • .container > p targets <p> elements that are direct children of elements with the class .container.

descendant selector

can be grandchild and grandgrandgrandchild, it can be many many levels deep

1
2
3
ancestor descendant {
    /* Styles applied to descendant elements */
}

In this syntax:

  • ancestor is the ancestor element you want to target.
  • descendant is the descendant element you want to style.

For example, consider the following HTML structure:

1
2
3
4
5
6
7
8
9
10
<div class="ancestor">
    <div>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </div>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
</div>

If you want to style all <p> elements that are descendants of the .ancestor div, you can use the descendant selector like this:

1
2
3
4
.ancestor p {
    /* Styles applied to <p> elements that are descendants of elements with class "ancestor" */
    font-style: italic;
}

chaining selector

1
2
3
selector1selector2selector3 {
    /* Styles applied to elements that match all of the selectors */
}

In this case, the styles would only apply to elements that match all three selectors selector1, selector2, and selector3. There is no comma separating the selectors, indicating that they must all be true for the styles to apply.

here’s an example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Concatenated Selectors Example</title>
    <style>
        /* Styles applied to elements that match all of the selectors */
        .container p.highlight {
            color: blue; /* Applies to <p> elements with class "highlight" inside elements with class "container" */
            font-size: 16px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="highlight">This paragraph will be blue, have a font size of 16px, and be bold.</p>
        <p>This paragraph is inside an element with class "container" but does not have the class "highlight".</p>
    </div>
    <div class="container">
        <p>This paragraph has the class "highlight" but is not inside an element with class "container".</p>
    </div>
    <p>This paragraph does not have the class "highlight" and is not inside an element with class "container".</p>
</body>
</html>

In this example:

  • The CSS selector .container p.highlight targets <p> elements with the class “highlight” that are descendants of elements with the class “container”.
  • Styles applied inside this rule set will only affect paragraphs (<p>) that have both the class “highlight” and are descendants of elements with the class “container”.

css positioning

https://www.freecodecamp.org/news/css-position-property-explained/

https://appbrewery.github.io/css-positioning/

Static is the default

  • static (default)
  • relative
  • absolute

When you apply absolute positioning to an element, it is positioned relative to its closest positioned ancestor. A positioned ancestor is an element that has a position property set to anything other than static (the default).

If all of an element’s ancestors do not have a specified position value (i.e., they all have the default value of position: static;), then the absolutely positioned element will be positioned relative to the initial containing block, which is usually the <html> element or the viewport itself.

  • fixed

css Display

https://appbrewery.github.io/css-display/

  • block:

Block-level elements typically start on a new line and occupy the full width available to them, pushing subsequent elements to new lines.

  • inline:

you can’t set the size(width/height) of inline elements.

The width of an inline element is typically determined by its content. Unlike block-level elements, which take up the full width available to them and start on a new line, inline elements only take up as much width as necessary to contain their content.

However, you can still control the width of inline elements using CSS. While directly setting the width property won’t affect the layout of inline elements (because they’re inline by nature), you can use properties like max-width and min-width to indirectly control their width.

image-20240427132726839

  • inline-block

can have elements to go on the same line and you can set the width and heigth

  • None

make the element disappear

CSS Float (not used often any more) don’t use float for layout

now it’s mostly just used to wrap the text around the img

https://www.w3schools.com/css/css_float.asp

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The float property can have one of the following values:

  • left - The element floats to the left of its container
  • right - The element floats to the right of its container
  • none - The element does not float (will be displayed just where it occurs in the text). This is default
  • inherit - The element inherits the float value of its parent

In its simplest use, the float property can be used to wrap text around images.

The CSS clear property specifies what elements can float beside the cleared element and on which side.

image-20240427141031514

Responsive web window

media query

image-20240427165954399

1
2
3
4
5
6
7
8
9
10
11
12
/* Default styles for all screen sizes */
p {
    font-size: 16px;
}

/* Media query for screens with a maximum width of 600 pixels */
@media (max-width: 600px) {
    p {
        font-size: 14px;
    }
}

Flexbox (display)

###flex

flex is a value for the display property.

overview1

overview2

—> flex vs. inline-flex

when you use flex, it no longer abides by inline/block/inline-block/none

When you assign display: flex; to an element, it changes the default behavior of that element and its children.

By default:

  • <div> elements are block-level elements, meaning they typically start on a new line and take up the full width available.
  • <span> elements are inline-level elements, meaning they don’t start on a new line and only take up as much width as necessary.

When you apply display: flex; to a parent element, it turns into a flex container, and its children become flex items. The flex container can then control the layout of its flex items using various flexbox properties.

flexbox

image-20240427171706301

flex

flex direction

https://www.w3schools.com/cssref/css3_pr_flex-direction.php

flex basis has to go on to the child not on the container

In Flexbox, certain properties are applied to the flex container, while others are applied to the flex items. Here’s a breakdown:

Properties for the Flex Container:

  1. display: Specifies the container as a flex container. Use display: flex; or display: inline-flex; on the container element.
  2. flex-direction: Defines the direction in which flex items are placed in the flex container. Options include row, row-reverse, column, and column-reverse.
  3. flex-wrap: Determines whether flex items are forced onto a single line or can wrap onto multiple lines. Options include nowrap, wrap, and wrap-reverse.
  4. justify-content: Aligns flex items along the main axis of the flex container. Options include flex-start, flex-end, center, space-between, and space-around.
  5. align-items: Aligns flex items along the cross axis of the flex container when they do not take up all the available space. Options include flex-start, flex-end, center, stretch, and baseline.
  6. align-content: Aligns a flex container’s lines within the flex container when there’s extra space in the cross axis. Options are similar to align-items.

Properties for the Flex Items:

  1. flex: Shorthand for flex-grow, flex-shrink, and flex-basis. It specifies how a flex item will grow, shrink, and its initial size.
  2. flex-grow: Specifies the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally among the items.
  3. flex-shrink: Specifies the ability for a flex item to shrink if necessary.
  4. flex-basis: Specifies the initial main size of a flex item before additional space is distributed according to flex-grow and flex-shrink.
  5. order: Specifies the order in which a flex item appears in the flex container. By default, all flex items have an order of 0, but this property allows you to change the order.
  6. align-self: Allows the default alignment set by align-items to be overridden for individual flex items. It accepts the same values as align-items.

flex direction

https://appbrewery.github.io/flex-layout/

align-self: flex-start

it makes this item separate from the group things to do its own thing

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS grid

bootstrap framework