Baca dalam Bahasa Indonesia

1. Introduction to CSS

What is CSS: Explanation of CSS as a style sheet language used to control the layout and appearance of web content.
How CSS Works: Demonstrates how CSS interacts with HTML to style content.
Including CSS in HTML:
- Inline CSS (inside HTML tags)
- Internal CSS (within the <style> tag in HTML)
- External CSS (using separate .css files)

2. CSS Selectors

Basic Selectors:
- Element selectors (e.g., h1, p)
- Class selectors (e.g., .class-name)
- ID selectors (e.g., #id-name)
Combinator Selectors:
- Descendant selector (e.g., div p)
- Child selector (e.g., div > p)
Attribute Selectors (e.g., [type="text"])

3. CSS Properties and Values

Text and Font Styling:
- font-family, font-size, font-weight
- color, text-align, line-height
Background Styling:
- background-color
- background-image
Box Model:
- Margins, borders, padding
- Box sizing (box-sizing property)
Width and Height:
- Fixed units (px, em)
- Relative units (%, vw, vh)

4. Colors

Color Models:
- Named colors (e.g., red, blue)
- Hexadecimal colors (e.g., #ff0000)
- RGB, RGBA, HSL, HSLA

5. Positioning and Layout

Positioning Elements:
- Static (default), relative, absolute, fixed, sticky positioning
Floating Elements:
- float property for floating content
Flexbox:
- display: flex, flex containers, and flex items
- Aligning and distributing items in flex containers
Grid Layout:
- display: grid, grid columns and rows

6. Responsive Design

Media Queries:
- Making layouts responsive for different screen sizes
Units for Responsiveness:
- em, rem, vw, vh vs fixed units like px
Viewport Meta Tag: Controlling how web pages appear on different devices

7. Pseudo-classes and Pseudo-elements

Pseudo-classes: Styling elements based on their state (e.g., :hover, :focus, :nth-child)
Pseudo-elements: Styling parts of elements (e.g., ::before, ::after)

8. CSS Specificity and Inheritance

Understanding Specificity: How the browser decides which styles to apply
Inheritance in CSS: Which properties are inherited and how

9. CSS Animations and Transitions

Transitions:
- Creating smooth transitions between different states
Keyframe Animations:
- Defining animations with @keyframes

10. Best Practices and Tools

DRY (Don’t Repeat Yourself): Keeping CSS modular and reusable
CSS Preprocessors: Introduction to SASS and LESS for advanced styling
CSS Frameworks: Overview of frameworks like Bootstrap and Tailwind CSS

Practical Examples

Example 1: Styling a Heading

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    h1 {
      color: blue;
      font-family: Arial, sans-serif;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Example 2: Flexbox Layout

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-around;
    }
    .box {
      background-color: lightgray;
      padding: 20px;
      margin: 10px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>
</html>

Additional Resources:

This course structure provides the foundation to understand and apply CSS for web design. You can experiment with these concepts to create custom styles for websites.

===============================================================================

1. Introduction to CSS

1. What is CSS?

CSS stands for Cascading Style Sheets, and it is a stylesheet language used to define the visual presentation of a web page written in HTML (or XML-based languages like XHTML). While HTML structures the content of the web page (headings, paragraphs, images, etc.), CSS is responsible for the look of that content.

Key Purpose: CSS allows you to separate content (HTML) from the design and presentation (styles), which provides cleaner code, easier maintenance, and a more flexible and responsive design.
What “Cascading” Means: CSS rules can “cascade” down from more general rules to more specific ones. For example, you can set a global font size for the whole webpage, but make exceptions for certain elements like headings.

2. How CSS Works

CSS works by applying styles (rules) to HTML elements. These rules are defined as “selectors” and are used to target elements within the HTML document. CSS enables you to change things like text color, font size, element layout, spacing, and many other visual aspects of your web content.

Basic CSS Syntax:
```
selector {
  property: value;
}
```
- Selector: This is the HTML element that you want to style (e.g., p, h1, .class, #id).
- Property: A CSS property defines which aspect of the element you are styling (e.g., color, font-size, margin).
- Value: This sets the value of the property (e.g., red, 16px, 10px).

For example, the following CSS rule sets the text color of all paragraphs to blue:

p {
  color: blue;
}

This rule is applied to every <p> element (paragraph) in your HTML document.

3. Including CSS in HTML

There are three ways to include CSS in your HTML files:

a. Inline CSS

Inline CSS means writing the CSS rules directly within the HTML tags. This method is used to style specific elements without affecting other parts of the page. You use the style attribute within an HTML element.

Example:

<p style="color: green; font-size: 20px;">This is a green paragraph with 20px font size.</p>

When to Use: Inline CSS is typically discouraged because it mixes content and styling, making code harder to maintain. However, it can be useful for quick, temporary styling or one-off elements.

b. Internal CSS

Internal CSS refers to adding styles within the <style> element in the <head> section of your HTML document. This allows you to define multiple CSS rules that apply to the whole document, but only that document.

Example:

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

When to Use: Internal CSS is used when you want to define styles that apply to a single webpage but do not want to link to an external stylesheet.

c. External CSS

External CSS is the most common and preferred way of adding styles to a webpage. It involves linking to a separate .css file that contains all the CSS rules. This method keeps the HTML and CSS code separate, making your code more modular and easier to maintain.

Example:

HTML file (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph with blue text.</p>
</body>
</html>

External CSS file (styles.css):

p {
  color: blue;
}

h1 {
  text-align: center;
  color: red;
}

When to Use: External CSS is best for large projects where multiple pages share the same styles. It allows for consistency across pages and makes it easy to update the design by modifying a single CSS file.

Cascading and Priority of CSS

Understanding the “cascade” in CSS is crucial for controlling which styles take precedence. The priority of CSS rules is determined by:

Inline styles: Have the highest priority. They override any other styles declared elsewhere.
Internal and external styles: Generally, styles from external CSS files are applied unless overridden by internal styles or inline styles.
Specificity: More specific selectors (like ID selectors) have higher precedence over more general selectors (like type or class selectors).
Importance: You can use the !important declaration to force a CSS rule to override others, but this should be used sparingly as it can make debugging more difficult.

Example:

p {
  color: blue !important; /* This rule will override other color declarations */
}

By understanding the different ways to apply CSS, the basic syntax, and the cascading nature of CSS, you’ll be able to start styling web pages effectively and flexibly. The next steps in learning CSS typically involve working with selectors, understanding the box model, and exploring layouts with Flexbox and Grid.

===============================================================================

2. CSS Selectors

CSS selectors are used to target specific HTML elements and apply styles to them. There are several types of selectors, including element selectors, class selectors, and ID selectors, as well as combinator selectors.

Basic Selectors

1. Element Selectors

Element selectors (also known as type selectors) target HTML elements by their tag name. This is the most basic form of CSS selector.

Example:

h1 {
  color: blue;
}

p {
  font-size: 16px;
}

In this example, all <h1> elements will have blue text, and all <p> elements will have a font size of 16px.

Use Case: Use element selectors when you want to style all instances of a specific HTML element the same way (e.g., all paragraphs, all headings, etc.).

2. Class Selectors

Class selectors target elements based on the class attribute in HTML. This selector is prefixed with a dot (.) followed by the class name.

Example:

<p class="highlight">This is highlighted text.</p>

<style>
  .highlight {
    background-color: yellow;
  }
</style>

Here, the <p> element with the class "highlight" will have a yellow background.

Use Case: Class selectors are more versatile than element selectors because you can apply the same class to multiple types of elements (e.g., paragraphs, divs, etc.), allowing more flexibility. You can also apply multiple classes to the same element.

3. ID Selectors

ID selectors target a specific element with a unique id attribute. The id selector is prefixed with a hash symbol (#).

Example:

<p id="intro">This is the introduction paragraph.</p>

<style>
  #intro {
    font-weight: bold;
  }
</style>

Here, only the paragraph with id="intro" will be bold.

Use Case: ID selectors are used when you want to target a single unique element. An id must be unique within a page, so it should not be reused for multiple elements.

Combinator Selectors

Combinator selectors allow you to combine multiple selectors in various ways to target elements based on their relationship with other elements. These are powerful for targeting nested structures.

1. Descendant Selector

The descendant selector targets elements that are nested within a specified ancestor element. You define this relationship with a space between two selectors.

Example:

<div>
  <p>This is a paragraph inside a div.</p>
</div>

<style>
  div p {
    color: red;
  }
</style>

In this example, any <p> inside a <div> will be red. The space between div and p indicates the descendant relationship.

Use Case: Use the descendant selector to style elements that are inside specific containers. This is useful for complex layouts where you want to style certain elements differently depending on their parent.

2. Child Selector

The child selector (>) selects elements that are direct children of a specific parent element. It is more specific than the descendant selector.

Example:

<ul>
  <li>This is a list item.</li>
  <ul>
    <li>This is a nested list item.</li>
  </ul>
</ul>

<style>
  ul > li {
    color: green;
  }
</style>

In this case, only the direct <li> children of the outer <ul> will be green, but the nested <li> inside the inner <ul> will not.

Use Case: Use the child selector when you only want to target direct children of an element, excluding deeper nested elements.

Attribute Selectors

Attribute selectors allow you to select elements based on the presence, value, or value pattern of their HTML attributes. They are especially useful for forms or elements with specific attributes.

1. Basic Attribute Selector

This targets elements that have a specific attribute.

Example:

<input type="text" />
<input type="password" />

<style>
  [type="text"] {
    border: 2px solid blue;
  }
</style>

Here, the text input (<input type="text">) will have a blue border, while the password input will remain unchanged.

Use Case: Use attribute selectors when you want to style form elements (e.g., input fields, buttons) or other elements with specific attributes.

2. Presence Selector

This selector targets elements that have a specific attribute, regardless of its value.

Example:

<img src="image.jpg" alt="A beautiful view">
<img src="image.jpg">

<style>
  img[alt] {
    border: 1px solid green;
  }
</style>

In this example, only the <img> element with an alt attribute will get a green border, regardless of the alt value.

3. Attribute Value Substring Selectors

These are used to select elements whose attribute values contain a specific substring.

Contains (*=): Selects elements whose attribute contains a specified substring.

Example:
```
a[href*="example"] {
  color: orange;
}
```
This would select any <a> elements whose href attribute contains “example” anywhere in the URL.
Starts with (^=): Selects elements whose attribute value begins with a specified string.

Example:
```
input[name^="user"] {
  background-color: lightgray;
}
```
This will target any <input> fields where the name attribute starts with “user” (e.g., userName, userEmail).
Ends with ($=): Selects elements whose attribute value ends with a specified string.

Example:
```
img[src$=".jpg"] {
  border: 2px solid black;
}
```
This will target all <img> elements where the src attribute ends in “.jpg”, applying a black border to them.

Combining Selectors

You can combine multiple types of selectors to create highly specific rules. For example:

div.container > ul li.active a {
  color: blue;
}

This rule targets any <a> link inside an <li> element with the class active, where the <li> is inside a <ul>, and the <ul> is a direct child of a <div> with the class container.

This is a more complex example that combines element, class, child, and descendant selectors to style very specific elements on the page.

CSS Specificity

CSS selectors have different levels of specificity, which determine which rule will be applied when multiple rules target the same element. Specificity is calculated as follows:

Inline styles (inside an element’s style attribute) have the highest specificity (e.g., style="color: red").
ID selectors (#id-name) are more specific than class selectors and element selectors.
Class selectors (.class-name), attribute selectors, and pseudo-classes are less specific than ID selectors but more specific than element selectors.
Element selectors (e.g., p, div, h1) have the lowest specificity.

Example of specificity:

<p id="special" class="important">Styled Text</p>

<style>
  p {
    color: black;
  }

  .important {
    color: green;
  }

  #special {
    color: red;
  }
</style>

In this example:

The paragraph starts with the p element selector (color: black).
The class selector .important (color: green) is more specific than the element selector, so the text turns green.
Finally, the ID selector #special (color: red) is the most specific, so the text turns red.

Pseudo-classes and Pseudo-elements

These selectors allow you to style elements in specific states or parts of an element.

1. Pseudo-classes

Pseudo-classes apply styles to elements based on their state (e.g., hover, focus).

Example:

a:hover {
  text-decoration: underline;
}

This makes links underlined when a user hovers over them.

2. Pseudo-elements

Pseudo-elements allow you to style specific parts of an element, such as the first letter or content before/after an element.

Example:

p::first-letter {
  font-size: 24px;
  color: red;
}

p::before {
  content: "Note: ";
  font-weight: bold;
}

::first-letter targets the first letter of the paragraph.
::before inserts content before the paragraph text.

This detailed explanation of selectors covers the foundational tools for controlling how you apply styles in CSS. Understanding these will allow you to precisely target HTML elements and create more organized, maintainable, and powerful styles.

===============================================================================

3. CSS Properties and Values

CSS properties and values are the building blocks of CSS. They define the styles that you want to apply to your HTML elements.

Text and Font Styling

These properties control the appearance of text on your webpage. Text and font styling is crucial for readability and aesthetics.

1. `font-family`

This property sets the font for text content. You can specify multiple fonts, separated by commas, and the browser will use the first available font in the user’s system.

Example:

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

In this case, the browser will use the Arial font if it’s available; if not, it will try Helvetica, and if neither is available, it will use any generic sans-serif font.

2. `font-size`

This property controls the size of the text. You can use various units like px, em, %, rem, or even keywords like small, medium, large.

Example:

p {
  font-size: 16px; /* Sets the font size to 16 pixels */
}

Absolute Units (px, pt): Fixed sizes that don’t change based on the user’s device or screen resolution.
Relative Units (em, rem, %): Sizes that scale relative to other elements, often useful for responsive design.

3. `font-weight`

This controls the boldness of text. The values can be keywords like normal, bold, or numeric values like 100, 400, 700.

Example:

h1 {
  font-weight: bold; /* Equivalent to 700 */
}

You can also use numeric values (100-900), where 400 is equivalent to normal weight and 700 is bold.

4. `color`

The color property sets the color of text.

Example:

p {
  color: #333333; /* Hexadecimal color */
}

Color Values: Can be specified using color names (red), hexadecimal values (#ff0000), RGB (rgb(255, 0, 0)), or HSL (hsl(0, 100%, 50%)).

5. `text-align`

This property controls the horizontal alignment of text within a block element (e.g., div, p).

Example:

h1 {
  text-align: center;
}

Common values:

left: Aligns text to the left.
center: Centers the text.
right: Aligns text to the right.
justify: Stretches lines so that each line has equal width (except the last line).

6. `line-height`

The line-height property controls the space between lines of text.

Example:

p {
  line-height: 1.5; /* Sets line height to 1.5 times the font size */
}

It can be set using unitless numbers (which multiply the font size), pixels, or percentages.

Background Styling

Background properties control the visual appearance behind the content, adding colors or images to elements.

1. `background-color`

This property sets the background color of an element.

Example:

div {
  background-color: lightblue;
}

2. `background-image`

You can set an image as the background of an element.

Example:

body {
  background-image: url('background.jpg');
}

Repeat Options: By default, the image will repeat across the element. You can control the repetition using background-repeat: no-repeat;, or make the image cover the entire element using background-size: cover;.

You can combine background properties for complex effects:

div {
  background: url('image.jpg') no-repeat center center/cover, lightblue;
}

This example sets a background image and centers it, covering the element while adding a light blue fallback color.

Box Model

The box model defines how elements are visually displayed in terms of space around the content, borders, and margins. Every element is essentially a box with the following components:

1. Content

The innermost part of the box, which contains the actual text or image.

2. Padding

The space between the content and the border. It pushes the border outward, increasing the size of the element. Padding is often used to create breathing room between the content and its edge.

Example:

div {
  padding: 20px; /* Adds 20px of space inside the element */
}

You can also define padding individually:

div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 5px;
}

Or use shorthand:

div {
  padding: 10px 20px 15px 5px; /* Top, right, bottom, left */
}

3. Border

The border surrounds the padding (or the content, if padding is not specified). You can style borders in terms of width, style (solid, dashed, dotted), and color.

Example:

div {
  border: 2px solid black; /* 2px black solid border */
}

Borders can also be defined individually:

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

4. Margin

The margin is the outermost space, creating distance between the element’s border and neighboring elements. Margins are transparent.

Example:

div {
  margin: 20px; /* Adds 20px space outside the element */
}

Like padding, you can define margins for individual sides:

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

5. `box-sizing` Property

By default, the width and height you set only apply to the content box, excluding padding and border. This can sometimes lead to unexpected layout issues, but you can control how the size is calculated using box-sizing.

content-box (default): Width and height only include the content.
border-box: Width and height include the padding and border.

Example:

div {
  box-sizing: border-box; /* Includes padding and border in width/height */
}

Width and Height

CSS allows you to control the dimensions of an element by setting its width and height. These properties can use both fixed and flexible units.

1. Fixed Units (Pixels and Points)

Pixels (px): A pixel is a relative unit that depends on the screen’s resolution. It is a fixed-size unit and doesn’t change based on device dimensions.

Example:
```
div {
  width: 300px;
  height: 200px;
}
```

2. Flexible Units

Flexible units allow layouts to respond to different screen sizes and device orientations. These are essential for creating responsive designs.

Percentages (%): The element’s size is a percentage of its parent element’s size.

Example:
```
div {
  width: 50%; /* Takes 50% of the parent’s width */
}
```
Em (em): The unit em is relative to the font size of the element itself. It is commonly used for scalable, typographically consistent layouts.

Example:
```
p {
  font-size: 16px;
}

div {
  padding: 1.5em; /* 1.5 times the font size, i.e., 24px */
}
```
Rem (rem): Similar to em, but it’s relative to the root element’s font size (html element), rather than the element’s font size.

Example:
```
html {
  font-size: 16px;
}

div {
  width: 20rem; /* Equals 320px if 1rem = 16px */
}
```
Viewport Width (vw) and Viewport Height (vh): These units are relative to the browser window size. 1vw is 1% of the viewport’s width, and 1vh is 1% of the viewport’s height.

Example:
```
div {
  width: 50vw; /* Takes 50% of the viewport width */
  height: 50vh; /* Takes 50% of the viewport height */
}
```

Min and Max Width/Height

You can use min-width, max-width, min-height, and max-height to restrict how large or small an element can grow or shrink.

Example:

div {
  width: 100%;
  max-width: 1200px; /* Will not exceed 1200px width */
}

This is especially useful for responsive design, where you want elements to be flexible but not grow too large or small on different screen sizes.

Understanding and applying these CSS properties and values is crucial for creating well-styled and responsive websites. The text and font styling controls how readable your content is, background styling adds visual flair, and the box model ensures proper spacing and structure. Handling width and height with both fixed and flexible units is essential for building responsive designs that work on all screen sizes.

By mastering these foundational properties, you’ll be able to create more complex and visually appealing layouts while maintaining control over your design’s consistency and responsiveness across different devices.

===============================================================================

4. CSS Colors

Color Models in CSS

Named Colors

CSS provides a list of predefined named colors, which can be used by simply referring to their name. These colors are easy to use but offer less flexibility compared to other models.

Examples:

h1 {
  color: red;
}

p {
  background-color: lightblue;
}

Some common named colors include:

red
blue
green
black
white
yellow
lightgray
When to Use: Named colors are convenient for quick prototyping or when you need to reference basic, widely understood colors. However, they don’t offer fine-tuned control, like choosing specific shades or tones.

Hexadecimal Colors

Hexadecimal (hex) colors are represented by a # followed by 6 digits (comprising numbers 0-9 and letters A-F), where the first two digits represent red, the next two represent green, and the final two represent blue.

Example:

h1 {
  color: #ff0000; /* Pure red */
}

p {
  background-color: #00ff00; /* Pure green */
}

#ff0000: Full red, no green, no blue.
#00ff00: No red, full green, no blue.
#0000ff: No red, no green, full blue.

The hexadecimal color code breaks down as:

#rrggbb: where rr represents the red value, gg represents the green value, and bb represents the blue value, all in hexadecimal format (base-16).

Shortened Hex Values: When the hex color has repeating pairs (e.g., #ffcc00), you can shorten the code to just three digits:

h1 {
  color: #fc0; /* Equivalent to #ffcc00 */
}

When to Use: Hex colors are widely used in web design because they are more flexible than named colors, allowing you to create an extensive range of colors. Hex values are particularly useful for fine-tuning your designs.

RGB (Red, Green, Blue)

RGB colors define colors using the red, green, and blue components, each represented by values from 0 to 255. This model provides a clearer understanding of how much red, green, and blue is mixed to create a specific color.

Example:

h1 {
  color: rgb(255, 0, 0); /* Pure red */
}

p {
  background-color: rgb(0, 255, 0); /* Pure green */
}

rgb(255, 0, 0): Full red, no green, no blue (pure red).
rgb(0, 255, 0): No red, full green, no blue (pure green).
rgb(0, 0, 255): No red, no green, full blue (pure blue).

In the RGB model, you control each color component by setting values between 0 (none) and 255 (full intensity). The result is a mixture of these three colors.

When to Use: RGB colors are intuitive when you need precise control over color intensity for each channel. It’s useful when you need to blend colors or match color schemes in design software like Photoshop.

RGBA (Red, Green, Blue, Alpha)

RGBA is an extension of the RGB model, with the added alpha parameter, which controls the opacity of the color. The alpha value is between 0 (completely transparent) and 1 (fully opaque).

Example:

p {
  background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
}

rgba(255, 0, 0, 0.5): A semi-transparent red, where the red channel is full intensity, and the alpha (opacity) is set to 0.5 (50% opacity).

This is useful when you want to layer elements or create subtle transparency effects.

When to Use: Use RGBA when you need to control both the color and the transparency of an element. This is especially useful for overlays, semi-transparent backgrounds, or when blending elements.

HSL (Hue, Saturation, Lightness)

The HSL model defines colors using three properties:

Hue: Represents the type of color (a degree on the color wheel from 0 to 360). For example, 0 is red, 120 is green, and 240 is blue.
Saturation: Defines the intensity of the color (0% is grayscale, 100% is the full color).
Lightness: Defines the brightness of the color (0% is black, 50% is the normal color, and 100% is white).

Example:

h1 {
  color: hsl(0, 100%, 50%); /* Pure red */
}

p {
  background-color: hsl(120, 100%, 50%); /* Pure green */
}

hsl(0, 100%, 50%): Full red.
hsl(120, 100%, 50%): Full green.
hsl(240, 100%, 50%): Full blue.
When to Use: HSL is useful when you want to adjust the color’s tone, intensity, and lightness more intuitively, especially for creating light or dark variations of a color.

HSLA (Hue, Saturation, Lightness, Alpha)

HSLA extends the HSL model by adding an alpha channel for transparency, similar to the RGBA model.

Example:

p {
  background-color: hsla(0, 100%, 50%, 0.5); /* Semi-transparent red */
}

hsla(0, 100%, 50%, 0.5): A semi-transparent red with 50% opacity.
When to Use: Use HSLA when you need the benefits of HSL’s intuitive color adjustment combined with control over opacity.

Using Color Models: Practical Considerations

Consistency Across Devices:
- Different devices may render colors slightly differently due to varying display technologies. By using precise color models like hex, RGB, or HSL, you ensure greater consistency across devices.
Contrast and Accessibility:
- Always check for sufficient contrast between text and background colors for readability. For example, use tools like WebAIM Contrast Checker to ensure accessibility for users with visual impairments.
- Example of good contrast:
```
p {
  color: #ffffff;
  background-color: #000000; /* White text on a black background */
}
```
When to Choose Which Color Model:
- Named Colors: Simple use cases with standard colors.
- Hexadecimal Colors: Popular in web design due to compact syntax and wide browser support.
- RGB/RGBA: Useful when you need to programmatically adjust the intensity of colors or combine colors in graphics or animation.
- HSL/HSLA: Ideal when you need to fine-tune the hue, saturation, or lightness of a color, such as creating gradients or palettes.

CSS Color Usage Examples

Example 1: Text Color

h1 {
  color: #3498db; /* Hexadecimal for a shade of blue */
}

p {
  color: rgb(231, 76, 60); /* RGB for a shade of red */
}

Example 2: Background Color

body {
  background-color: #ecf0f1; /* Light gray background */
}

Example 3: Transparent Overlay Using RGBA

div.overlay {
  background-color: rgba(0, 0, 0, 0.7); /* Black with 70% opacity */
}

Example 4: HSL for Saturation and Lightness Adjustments

a {
  color: hsl(240, 100%, 50%); /* Pure blue */
}

a:hover {
  color: hsl(240, 100%, 70%); /* Lighter blue on hover */
}

Understanding the different CSS color models provides you with the tools to manipulate colors effectively in your designs. Each model offers distinct advantages:

Named colors are easy to use but limited.
Hexadecimal colors are concise and widely used.
RGB/RGBA provides granular control over color mixing and opacity.
HSL/HSLA offers a more intuitive way to adjust colors by controlling hue, saturation, and lightness.

By mastering these color models, you’ll have the ability to create visually appealing designs while maintaining control over how colors behave in different contexts, like transparency, responsiveness, and accessibility.

===============================================================================

5. Positioning and Layout

Positioning Elements

CSS provides several positioning schemes that allow you to control how elements are laid out on a web page. These positioning schemes are defined using the position property.

1. Static Positioning

position: static; is the default value for the position property. Elements with static positioning are positioned according to the normal flow of the document (i.e., they are laid out one after the other as blocks or inline elements).

Example:

div {
  position: static; /* This is the default, so you don’t have to explicitly set it */
}

When to Use: Static positioning is generally used when you want the default behavior and don’t need to move elements around the page manually.

2. Relative Positioning

position: relative; positions an element relative to its normal position in the document flow. The element is still part of the normal flow, but you can shift it using the top, right, bottom, or left properties.

Example:

div {
  position: relative;
  top: 10px;  /* Moves the element 10px down from its original position */
  left: 20px; /* Moves the element 20px to the right */
}

In this example, the element will still occupy its original space, but it will be visually shifted 10px down and 20px to the right.

When to Use: Relative positioning is useful when you need to nudge an element slightly without removing it from the document flow. This is often used in combination with other positioning schemes (e.g., absolute or fixed).

3. Absolute Positioning

position: absolute; removes an element from the normal document flow, meaning it no longer affects the layout of other elements. Instead, it is positioned relative to its nearest positioned ancestor (an ancestor element with position set to anything other than static).

Example:

div {
  position: absolute;
  top: 50px;  /* 50px from the top of the nearest positioned ancestor */
  right: 100px; /* 100px from the right of the nearest positioned ancestor */
}

If no positioned ancestor exists, the element will be positioned relative to the initial containing block (usually the <html> element).

When to Use: Absolute positioning is useful when you need to precisely place an element in relation to another element or container, without affecting other elements on the page.

4. Fixed Positioning

position: fixed; positions an element relative to the viewport (the browser window) and keeps it in that position even when the user scrolls the page. This means the element will stay fixed in the same position on the screen regardless of how the user scrolls.

Example:

div {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

In this example, the element will always stay at the bottom-right corner of the screen, even when the page is scrolled.

When to Use: Fixed positioning is great for elements like sticky headers, navigation bars, or “back to top” buttons, which need to remain visible even as the user scrolls the page.

5. Sticky Positioning

position: sticky; is a hybrid between relative and fixed positioning. An element with position: sticky toggles between relative and fixed depending on the scroll position. It behaves like a relatively positioned element until it reaches a certain scroll position, after which it becomes fixed.

Example:

div {
  position: sticky;
  top: 20px; /* Sticks to the top of the viewport when scrolled 20px from the top */
}

In this example, the element will behave like a relatively positioned element until the page is scrolled down 20px, at which point it becomes fixed at 20px from the top of the viewport.

When to Use: Sticky positioning is useful for sticky headers, sidebars, or elements that need to “stick” to the viewport as the user scrolls past them.

Floating Elements

The float property was widely used in the past to create layouts, but its role has been diminished with the advent of modern layout techniques like Flexbox and Grid. However, float still has its uses for text wrapping and image alignment.

1. `float` Property

The float property allows an element to be “floated” to the left or right, allowing text and other elements to wrap around it.

Example:

img {
  float: left;
  margin-right: 10px;
}

In this example, the image will float to the left of its container, and any subsequent text will wrap around the right side of the image. The margin-right adds some space between the image and the text.

Clearfix: Floating elements can sometimes disrupt the layout of their parent container. To fix this, a clearfix technique is used:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

This ensures that the parent container properly wraps around its floated children.

When to Use: Float is still useful for wrapping text around images or other inline content but should generally be avoided for complex layouts in favor of Flexbox or Grid.

Flexbox

Flexbox (Flexible Box Layout) is a powerful, one-dimensional layout system that allows you to arrange items in rows or columns. Flexbox simplifies creating layouts where you need items to align, distribute, or dynamically adapt to the available space.

1. Setting up Flexbox

To use Flexbox, you apply display: flex to a container element. All direct children of that container become flex items.

Example:

.container {
  display: flex;
}

2. Main Axis and Cross Axis

Main Axis: The primary axis along which the flex items are laid out. By default, this is horizontal (left to right).
Cross Axis: The axis perpendicular to the main axis (by default, vertical).

You can change the direction of the main axis using the flex-direction property:

.container {
  flex-direction: row; /* Default: horizontal row */
}

.container-vertical {
  flex-direction: column; /* Vertical layout */
}

3. Aligning and Distributing Items

Flexbox provides properties to control how items are aligned and distributed along the main and cross axes.

justify-content: Aligns items along the main axis (horizontal by default).
```
.container {
  justify-content: center; /* Center items horizontally */
}
```
Values include:
- flex-start: Aligns items to the start of the main axis.
- center: Centers items along the main axis.
- space-between: Distributes items with equal space between them.
align-items: Aligns items along the cross axis (vertical by default).
```
.container {
  align-items: stretch; /* Stretch items to fill the cross axis */
}
```
Values include:
- stretch: Stretches items to fill the container’s height.
- center: Aligns items in the center of the cross axis.
- flex-start: Aligns items to the start of the cross axis.
flex-wrap: Controls whether flex items should wrap onto multiple lines when they don’t fit in a single line.
```
.container {
  flex-wrap: wrap;
}
```

4. Controlling Flex Items

flex-grow: Specifies how much a flex item should grow relative to the other flex items inside the container.
```
.item {
  flex-grow: 1; /* Grow item to fill available space */
}
```
flex-shrink: Controls how much an item should shrink if there’s not enough space.
```
.item {
  flex-shrink: 1; /* Shrink if necessary */
}
```

flex-basis: Sets the initial size of a flex item before it grows or shrinks.

.item {
  flex-basis: 200px; /* Item will be at least 200px wide */
}

When to Use: Flexbox is ideal for simpler, one-dimensional layouts like navigation bars, centering elements, or creating fluid grids where items need to dynamically resize.

Grid Layout

CSS Grid Layout is a two-dimensional system that gives you control over both rows and columns. It’s more powerful than Flexbox when dealing with complex layouts that require alignment along both axes.

1. Setting up Grid Layout

To create a grid, you apply display: grid to a container and define rows and columns using grid-template-rows and grid-template-columns.

Example:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 columns: first and last are equal, middle is twice as wide */
  grid-template-rows: 100px 200

px;   /* 2 rows: first is 100px, second is 200px */
}

fr: The fractional unit, where 1fr represents a fraction of the available space.

2. Placing Grid Items

You can place items in specific grid cells using the grid-column and grid-row properties.

Example:

.item1 {
  grid-column: 1 / 3; /* Spans from column 1 to column 3 */
  grid-row: 1 / 2;    /* Spans from row 1 to row 2 */
}

3. Aligning Items in the Grid

Grid layout provides similar alignment properties as Flexbox, including justify-items (for horizontal alignment) and align-items (for vertical alignment).

Example:

.container {
  justify-items: center;
  align-items: stretch;
}

When to Use: CSS Grid is perfect for complex two-dimensional layouts where you need control over both rows and columns, such as dashboard layouts, galleries, or any design where items need to be precisely placed.

By mastering CSS positioning and layout techniques, you can control how elements appear and interact within a web page. Key takeaways:

Positioning: Static, relative, absolute, fixed, and sticky give you control over how elements are laid out or removed from the document flow.
Float: While less commonly used for layout today, it’s still helpful for text wrapping and floating images.
Flexbox: Ideal for simpler, one-dimensional layouts where items need to align or resize based on the available space.
Grid: A powerful two-dimensional layout system for more complex layouts, offering precise control over both rows and columns.

Each layout tool has its strengths, and choosing the right one depends on your specific design needs.

===============================================================================

6. Responsive Design

Responsive Design

Responsive design ensures that your website’s layout adapts to different screen sizes and devices. As users access the web on a wide range of devices, from mobile phones to large desktop monitors, it’s essential to make your web pages flexible and responsive to ensure usability.

Key techniques for achieving responsive design include media queries, responsive units, and the viewport meta tag. These tools work together to make layouts dynamic and adaptable to varying screen sizes.

Media Queries

Media queries are a core tool in CSS for building responsive layouts. They allow you to apply different styles based on the characteristics of the device being used to view the page, such as its width, height, or even screen orientation. This enables you to tailor your design for specific screen sizes or breakpoints.

How Media Queries Work

Media queries work by defining conditions under which a certain block of CSS rules will apply. You specify a media feature (such as the width of the viewport), and if the condition is met, the CSS styles inside the media query are applied.

Basic structure of a media query:

@media only screen and (min-width: 600px) {
  /* Styles for devices with a minimum width of 600px */
  body {
    background-color: lightblue;
  }
}

In this example:

If the viewport width is 600px or wider, the background color of the <body> element will be set to light blue.

Common Media Queries for Breakpoints

When creating a responsive website, you generally define different CSS rules for several common breakpoints. Breakpoints are specific screen widths where the layout needs to change for optimal viewing.

Example breakpoints:

Mobile: Up to 600px
Tablet: 600px to 1024px
Desktop: Above 1024px

Here’s an example of how you might use media queries to change the layout for these breakpoints:

/* Base styles (for mobile first) */
body {
  font-size: 16px;
}

/* Tablet styles */
@media (min-width: 600px) {
  body {
    font-size: 18px;
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

In this example:

The base font size is 16px (this is the mobile-first design approach).
When the viewport is 600px or wider (tablet size), the font size increases to 18px.
When the viewport is 1024px or wider (desktop size), the font size becomes 20px.

Media Query Features

In addition to screen width, media queries allow you to target other features of the device:

Orientation: Detects whether the device is in portrait or landscape mode.

@media (orientation: landscape) {
  body {
    background-color: green;
  }
}

Resolution: Targets devices based on screen resolution (e.g., Retina displays).

@media (min-resolution: 2dppx) {
  img {
    width: 100%;
  }
}

Aspect Ratio: Targets devices based on the width-to-height ratio.

@media (min-aspect-ratio: 16/9) {
  .video-container {
    height: 50vh;
  }
}

Units for Responsiveness

Choosing the right units is key to making your layout responsive. There are two main types of units in CSS: fixed units like px, and relative units like em, rem, vw, and vh. While px is fixed and absolute, relative units adapt to the viewport or font size, making them essential for responsive design.

1. Fixed Units: `px`

Pixels (px) are absolute units, meaning they are fixed and don’t scale with the viewport. For example, if you set an element’s width to 200px, it will always be 200 pixels wide, regardless of the screen size.

Example:

div {
  width: 300px;
}

This width will remain constant on all devices, which can cause layout issues on smaller screens, making fixed units less ideal for responsive design.

2. Relative Units: `em`, `rem`

em: Relative to the font size of the element’s parent. For example, if the parent element’s font size is 16px, setting an element to 1.5em will make its size 1.5 * 16px = 24px.

Example:
```
p {
  font-size: 1.5em; /* 1.5 times the size of the parent element's font size */
}
```
rem: Relative to the root element’s (html) font size. This makes rem more predictable than em, since the root font size usually remains constant across the document.

Example:
```
p {
  font-size: 2rem; /* 2 times the root element's font size (usually 16px) */
}
```
When to Use: em and rem are particularly useful for typography in responsive design. Using these units makes font sizes and element dimensions scale relative to the user’s base settings, making your design more adaptable.

3. Viewport Units: `vw`, `vh`

Viewport-based units (vw, vh) are particularly useful for responsive layouts, as they allow you to size elements relative to the size of the viewport.

vw (viewport width): 1vw is 1% of the viewport’s width.
vh (viewport height): 1vh is 1% of the viewport’s height.

Example:

div {
  width: 50vw; /* 50% of the viewport width */
  height: 100vh; /* Full height of the viewport */
}

In this example:

The width of the div will be 50% of the browser’s current width.
The height of the div will always take up 100% of the browser’s current height.

These units are particularly useful for full-page sections or responsive image containers.

4. Percentage (`%`)

Percentages (%) are relative to the size of the parent element. They are extremely useful for creating fluid, flexible layouts that adjust based on the size of the container.

Example:

div {
  width: 80%; /* 80% of the parent element's width */
}

In this example, the div will always occupy 80% of the width of its parent container, making it a flexible layout that adjusts with the parent’s size.

Viewport Meta Tag

The viewport meta tag is critical for making your web pages responsive on mobile devices. Without this tag, the browser will render the page with a fixed layout width, which is usually set to the desktop viewport width (around 980px), regardless of the actual screen size.

To make sure your website scales properly on mobile devices, you need to include the viewport meta tag in your HTML <head> section:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Explanation:

width=device-width: This sets the width of the page to the width of the device’s screen.
initial-scale=1.0: This sets the initial zoom level to 1.0 (no zoom), so that the page is not zoomed in or out when it first loads.

Why It’s Important:

Without the viewport meta tag, mobile browsers would scale your website down to fit a larger virtual viewport. This could lead to your website being difficult to read or interact with on smaller screens.
With the viewport tag, your website scales properly for mobile users, ensuring that fonts, buttons, and other elements are readable and usable without zooming or excessive scrolling.

Responsive Design Example: Bringing It All Together

Let’s put everything together with an example that uses media queries, viewport units, and responsive units to create a simple responsive design:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Base styles (mobile-first) */
    body {
      font-size: 1rem; /* 16px by default */
      padding: 10px;
    }

    h1 {
      font-size: 2rem; /* 32px */
      color: darkblue;
    }

    .container {
      width: 90%; /* 90% of the viewport width */
      margin: 0 auto;
      padding: 20px;
      background-color: lightgray;
    }

    /* Tablet styles */
    @media (min-width: 600px) {
      body {
        font-size: 1.2rem; /* Slightly larger font for tablets */
      }

      .container {
        width: 70%; /* Less width for tablets */
      }
    }

    /* Desktop styles */
    @media (min-width: 1024px) {
      body {
        font-size

: 1.5rem; /* Larger font for desktops */
      }

      .container {
        width: 50%; /* Even narrower for desktops */
      }
    }
  </style>
</head>
<body>
  <h1>Responsive Design Example</h1>
  <div class="container">
    <p>This is a responsive layout that adjusts based on the screen size.</p>
  </div>
</body>
</html>

How It Works:

Mobile-first design: The base styles are designed for small screens first.
Media queries: The layout adapts to larger screens (tablets and desktops) using breakpoints.
Viewport units: The .container uses a percentage width (%), which adapts to the size of the viewport, making it fluid.
Viewport meta tag: Ensures that the website renders correctly on mobile devices.

Responsive design is essential for modern web development, as it ensures your website works well on all devices, from small mobile phones to large desktop monitors. By combining media queries, relative units (like em, rem, vw, vh), and the viewport meta tag, you can create a flexible and user-friendly design that adapts to any screen size.

===============================================================================

7. Pseudo-Classes and Pseudo-Elements in CSS

Pseudo-Classes

A pseudo-class is used to define a special state of an element. Pseudo-classes target elements based on their state or user interaction (such as hovering over a button) and allow for dynamic styling without needing JavaScript. They always start with a single colon (:).

Common Pseudo-Classes

:hover
- What it does: Targets an element when the user hovers their mouse over it.
- Use case: Commonly used for buttons, links, or other interactive elements to provide visual feedback when hovered.
Example:
```
button:hover {
  background-color: lightblue;
}
```
In this example, when the user hovers over a <button>, its background color changes to light blue.
:focus
- What it does: Targets an element when it has focus, typically when a user clicks on or tabs into an input field or button.
- Use case: Often used for input fields and form elements to provide feedback that the element is active.
Example:
```
input:focus {
  border-color: green;
}
```
In this example, when an <input> field receives focus (e.g., clicked on or tabbed into), the border color changes to green.
:nth-child()
- What it does: Selects elements based on their position in a parent element, using a specific formula.
- Use case: Useful for styling specific rows in tables, lists, or other repeated elements.
Example:
```
tr:nth-child(even) {
  background-color: #f2f2f2;
}
```
In this example, every even-numbered row (<tr>) in a table will have a light gray background.

You can also use nth-child() with formulas:
```
li:nth-child(3n) {
  color: red;
}
```
This will style every 3rd <li> in a list, changing its text color to red.
:nth-of-type()
- What it does: Similar to :nth-child(), but only selects elements of a specific type within their parent.
- Use case: Useful for targeting elements of a specific type (e.g., only <p> elements, ignoring others like <div> or <ul>).
Example:
```
p:nth-of-type(2) {
  font-weight: bold;
}
```
This would make the second <p> element within its parent bold, without counting other elements like <div> or <span>.
:first-child
- What it does: Selects the first child of a parent element.
- Use case: Used when you want to apply different styles to the first item in a list or first paragraph in a section.
Example:
```
p:first-child {
  font-size: 20px;
}
```
This will increase the font size of the first paragraph inside its parent container.
:last-child
- What it does: Selects the last child of a parent element.
- Use case: Useful when you need to style the last item in a list or container.
Example:
```
li:last-child {
  font-weight: bold;
}
```
This will make the last <li> in a list bold.
:checked
- What it does: Targets checkboxes or radio buttons that are checked.
- Use case: Often used in forms to apply different styles when a checkbox or radio button is checked.
Example:
```
input:checked {
  outline: 2px solid green;
}
```
This will add a green outline to any input elements (like checkboxes or radio buttons) that are checked.
:disabled
- What it does: Targets elements (usually form inputs) that are disabled and cannot be interacted with.
- Use case: Used to visually differentiate disabled form elements.
Example:
```
button:disabled {
  background-color: gray;
  cursor: not-allowed;
}
```
In this example, a disabled button will have a gray background and the cursor will change to indicate it’s not clickable.

Pseudo-Elements

A pseudo-element is used to style specific parts of an element. Unlike pseudo-classes, which target the state of an entire element, pseudo-elements allow you to style a part of the element, such as the first letter, the first line, or content before/after the element. Pseudo-elements are always written with two colons (::), though older versions of CSS supported a single colon (:).

Common Pseudo-Elements

::before
- What it does: Inserts content before an element’s actual content.
- Use case: Often used to add decorative elements or icons before an element.
Example:
```
h1::before {
  content: "🌟";
  margin-right: 10px;
}
```
In this example, a star emoji is inserted before every <h1> element, with a margin to separate it from the heading text.
::after
- What it does: Inserts content after an element’s actual content.
- Use case: Commonly used to add additional text, icons, or other decorative content after an element.
Example:
```
h1::after {
  content: "🌟";
  margin-left: 10px;
}
```
This would add the star emoji after each <h1> element, with some space between the text and the emoji.
::first-letter
- What it does: Targets the first letter of a block-level element (like a paragraph or a heading).
- Use case: Typically used for decorative typography, such as creating large drop caps at the beginning of paragraphs.
Example:
```
p::first-letter {
  font-size: 3em;
  font-weight: bold;
  color: red;
}
```
This will style the first letter of every paragraph (<p>) to be larger, bold, and red, similar to a “drop cap” effect.
::first-line
- What it does: Targets the first line of a block-level element.
- Use case: Useful for styling the first line of a paragraph or heading, making it stand out from the rest of the text.
Example:
```
p::first-line {
  font-weight: bold;
  text-transform: uppercase;
}
```
This will make the first line of every paragraph bold and uppercase.
::selection
- What it does: Styles the portion of text that a user has selected (highlighted).
- Use case: Allows you to customize the background color or text color when the user highlights text with their mouse.
Example:
```
::selection {
  background-color: yellow;
  color: black;
}
```
This will make any selected text have a yellow background and black text, overriding the default selection colors (usually blue and white).

Combining Pseudo-Classes and Pseudo-Elements

You can combine pseudo-classes and pseudo-elements to achieve more specific styles.

Example:

p:first-child::first-letter {
  font-size: 2em;
  color: blue;
}

In this example:

The first-child pseudo-class selects the first paragraph (<p>) within its parent.
The first-letter pseudo-element styles the first letter of that first paragraph, making it blue and twice the font size.

Practical Use Cases

Hover Effects on Links
```
a:hover {
  color: red;
  text-decoration: underline;
}
```
- This creates a visual feedback effect for links when the user hovers over them by changing the text color to red and underlining the link.
Focus Effect on Input Fields
```
input:focus {
  border: 2px solid blue;
  background-color: #e0f7fa;
}
```
- When the user clicks on or tabs into an input field, the field’s border changes to blue and the background color turns light cyan.
Adding Decorative Content with ::before and ::after
```
button::before {
  content: "✔️";
  margin-right: 5px;
}

button::after {
  content: "→";
  margin-left: 5px;
}
```
- A checkmark icon is inserted before the button text, and an arrow is added after the button text. This is commonly used for styling buttons with additional icons.
Custom Text Highlighting with ::selection
```
::selection {
  background-color: lightgreen;
  color: black;
}
```
- When users select text on the page, the selected text will have a light green background and black text, instead of the default blue and white.

Pseudo-classes are used to apply styles based on the state or position of an element (like :hover, :focus, :nth-child()).
Pseudo-elements allow you to style parts of an element (like the ::before, ::after, ::first-letter, and ::first-line pseudo-elements).

These tools are powerful for creating interactive, dynamic, and aesthetically pleasing web designs. They let you go beyond basic styling and provide users with visual feedback and enhanced functionality without the need for JavaScript.

===============================================================================

8. CSS Specificity and Inheritance

In this section, we will discuss specificity and inheritance in CSS, which are crucial concepts for controlling how styles are applied to elements.

Understanding specificity and inheritance is crucial for controlling how CSS styles are applied when multiple rules conflict. These concepts help you predict how the browser chooses which CSS rules to apply to an element, especially when different rules target the same elements but with different selectors.

1. CSS Specificity

Specificity determines which CSS rule is applied by the browser when multiple rules match the same element. CSS specificity is calculated based on the type of selectors used, and the more specific the selector, the higher priority it has. If two or more CSS rules apply to the same element, the browser uses specificity to decide which rule takes precedence.

Specificity Hierarchy

CSS specificity is calculated based on a hierarchical structure of selectors. The more specific a selector, the higher its specificity score. Here’s how specificity is calculated in the form of four categories (or “weights”):

Inline styles (inside an element’s style attribute)
IDs (e.g., #header)
Classes, pseudo-classes, and attributes (e.g., .button, :hover, [type="text"])
Element selectors (e.g., div, p, h1), pseudo-elements (e.g., ::before, ::after)

Each of these categories has a different weight. When the browser calculates specificity, it assigns a score based on these categories:

Inline styles: 1000
ID selectors: 100
Class, attribute, and pseudo-class selectors: 10
Element and pseudo-element selectors: 1

Calculating Specificity

Let’s break down how specificity is calculated based on different selectors:

Example 1: Element Selector

p {
  color: blue;
}

Specificity score: 0, 0, 0, 1
- 0 for inline styles (none used)
- 0 for ID selectors (none used)
- 0 for class selectors (none used)
- 1 for the element selector (p)

Example 2: Class Selector

.button {
  color: red;
}

Specificity score: 0, 0, 1, 0
- 0 for inline styles (none used)
- 0 for ID selectors (none used)
- 1 for the class selector (.button)
- 0 for element selectors (none used)

Example 3: ID Selector

#header {
  color: green;
}

Specificity score: 0, 1, 0, 0
- 0 for inline styles (none used)
- 1 for the ID selector (#header)
- 0 for class selectors (none used)
- 0 for element selectors (none used)

Example 4: Inline Style

<p style="color: purple;">This is a paragraph.</p>

Specificity score: 1, 0, 0, 0
- 1 for inline styles
- 0 for ID selectors (none used)
- 0 for class selectors (none used)
- 0 for element selectors (none used)

Since inline styles have the highest specificity score, they will override any external or internal CSS rules, regardless of how specific those rules are.

Combining Selectors for Higher Specificity

When you combine selectors, the specificity adds up.

Example 5: Multiple Selectors

div#content .button p {
  color: yellow;
}

Specificity score: 0, 1, 1, 2
- 0 for inline styles
- 1 for the ID selector (#content)
- 1 for the class selector (.button)
- 2 for the two element selectors (div and p)

In this example, the specificity of this rule is higher than either just #content or just .button alone because they are combined.

When Rules Conflict

If multiple rules apply to the same element, the browser compares the specificity of each rule. The rule with the highest specificity score wins. If two rules have the same specificity score, the browser applies the last rule that appears in the CSS file (this is called the cascade).

Example:

p {
  color: blue; /* Specificity: 0, 0, 0, 1 */
}

p#intro {
  color: red; /* Specificity: 0, 1, 0, 1 */
}

For a <p id="intro">, the color will be red because the second rule (p#intro) has a higher specificity due to the ID selector.

2. Inheritance in CSS

Inheritance is another important concept in CSS, where certain properties of an element are automatically inherited from its parent element, while others are not.

Which Properties Are Inherited?

Some CSS properties are naturally inherited from parent to child elements. These are usually properties that deal with text and layout.

Commonly inherited properties:

color: The text color of an element is inherited by its children.
font-family: Children will inherit the same font family as their parent.
font-size: The size of the font will be inherited unless overridden.
line-height: The space between lines of text is inherited.
visibility: If a parent is hidden (visibility: hidden), its children will also be hidden.
text-align: Text alignment (left, right, center) is inherited.

Non-inherited properties:

margin: Margin is specific to each element and is not inherited.
padding: Padding is also specific to individual elements.
border: Borders do not inherit from parent elements.
width and height: These are defined for each element individually.
background: The background color or image does not inherit by default.

How to Force Inheritance

Sometimes, you may want to force an element to inherit a property from its parent, even if that property is not normally inherited. You can use the inherit keyword to do this.

Example:

div {
  color: blue;
}

p {
  color: inherit; /* Forces the paragraph to inherit the color from its parent */
}

In this case, if the parent div has a color of blue, the paragraph inside will inherit that blue color.

How to Override Inheritance

If you want to stop inheritance or override it, simply define a new value for the child element. For example, you can change the color or font-size directly on the child element:

Example:

div {
  color: blue;
}

p {
  color: red; /* This overrides the inherited blue color */
}

Here, even though the div has a blue color, the paragraph inside it will be red because it has an explicit color set.

3. `!important` in Specificity and Inheritance

The !important rule can be used to override all other specificity and inheritance rules. When you use !important with a CSS property, that property will always be applied, no matter the specificity or order of the rules.

Example:

p {
  color: blue !important;
}

#intro {
  color: red;
}

Even though #intro has a higher specificity, the paragraph will still be blue because the color: blue rule has !important.

However, use !important sparingly, as it can make your CSS harder to debug and maintain, especially when multiple !important rules conflict.

Practical Example: Combining Specificity and Inheritance

Let’s take a real-world scenario to show how specificity and inheritance work together:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body {
      color: black;
    }

    .container {
      color: green;
    }

    #header {
      color: red;
    }

    p {
      color: blue;
    }

    .container p {
      color: orange;
    }
  </style>
</head>
<body>
  <div id="header">
    <p>This is a red paragraph (ID selector wins).</p>
  </div>
  
  <div class="container">
    <p>This is an orange paragraph (class + element selector wins).</p>
  </div>
  
  <p>This is a blue paragraph (element selector wins).</p>
</body>
</html>

Explanation:

The first paragraph is inside a #header element, so it will be red, even though p is blue. The ID selector has a higher specificity.
The second paragraph is inside a .container, so it will be orange because .container p has a higher specificity than just p.
The third paragraph is styled by the element selector p, so it will be blue.
Specificity: Determines which CSS rule is applied when multiple rules target the same element. It is calculated based on the types of selectors used (inline styles > ID selectors > class selectors > element selectors).
Inheritance: Certain properties (like color and font-family) are inherited from parent elements by default, while others (like margin and width) are not.
Use !important sparingly to force a rule to take precedence over other rules.
Understanding and controlling specificity and inheritance ensures you can effectively manage the application of styles and resolve conflicts in your CSS.

===============================================================================

9. CSS Transitions and CSS Keyframe Animations

CSS Transitions and Keyframe Animations are two powerful tools in CSS for creating smooth and dynamic visual effects. These features allow you to animate properties of HTML elements, enhancing user experiences and adding polish to your web design.

CSS Transitions

Transitions allow you to smoothly change the value of a CSS property over a given duration. This is commonly used to animate simple state changes, such as when a user hovers over a button or clicks on an element.

1. How CSS Transitions Work

A transition occurs between two states of an element. For example, if an element changes from one background color to another, you can use a transition to make that change happen gradually over time, rather than instantly.

The syntax for a transition is straightforward. It involves specifying:

The property to be transitioned (e.g., background-color, opacity, transform).
The duration of the transition (e.g., 0.5s for half a second).
An optional timing function (e.g., ease, linear) that controls the pace of the transition.
An optional delay before the transition starts.

Basic syntax:

selector {
  transition: property duration timing-function delay;
}

Here’s an example of a basic color transition on a button when hovered:

button {
  background-color: blue;
  color: white;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: green;
}

In this example:

The background color of the button changes from blue to green when hovered.
The transition takes 0.3s and uses an ease-in-out timing function (which starts slow, speeds up, and then slows down again).

2. Transition Properties

There are four key properties you can define for a transition:

transition-property: Specifies which CSS property will change (e.g., width, color, opacity).
```
transition-property: background-color;
```
transition-duration: Defines how long the transition takes to complete (e.g., 0.5s for half a second).
```
transition-duration: 0.5s;
```
transition-timing-function: Defines how the intermediate states of the transition are calculated. The most common values are:
- ease (default): Starts slow, speeds up, and then slows down.
- linear: Maintains the same pace throughout.
- ease-in: Starts slow and speeds up at the end.
- ease-out: Starts fast and slows down toward the end.
- ease-in-out: Combines ease-in and ease-out.
Example:
```
transition-timing-function: ease-in-out;
```
transition-delay: Adds a delay before the transition starts (e.g., 1s for a one-second delay).
```
transition-delay: 1s;
```

3. Transition Shorthand

You can combine all these properties into a shorthand transition property for concise styling. Here’s an example:

button {
  background-color: blue;
  transition: background-color 0.5s ease-in-out 0.2s;
}

This shorthand version specifies that the background color will transition over 0.5s, using the ease-in-out timing function, with a 0.2s delay before the transition starts.

4. Transitioning Multiple Properties

You can transition multiple properties at once by separating them with commas:

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 0.5s, height 0.5s, background-color 0.3s ease-in;
}

div:hover {
  width: 200px;
  height: 200px;
  background-color: green;
}

In this example:

Both the width and height will change over 0.5s.
The background-color will change over 0.3s, using an ease-in function.

CSS Keyframe Animations

While transitions are great for simple state changes (e.g., hover effects), keyframe animations allow you to create more complex, multi-step animations by defining specific points (or “keyframes”) during the animation.

1. Defining Keyframe Animations with `@keyframes`

A keyframe animation is defined using the @keyframes rule. This rule lets you specify multiple steps in an animation, where each step represents a different stage of the element’s state over time.

Basic structure of a keyframe animation:

@keyframes animation-name {
  0% {
    /* Starting state */
  }
  50% {
    /* Midway state */
  }
  100% {
    /* Ending state */
  }
}

The percentages (0%, 50%, 100%) represent points in time during the animation:

0% is the starting state.
100% is the ending state.
Any percentage in between represents an intermediate state.

Example of a simple keyframe animation:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

div {
  animation: fadeIn 2s ease-in-out;
}

In this example:

The animation is called fadeIn.
The animation gradually increases the opacity of the div from 0 to 1 (transparent to fully visible).
The animation lasts for 2s and uses the ease-in-out timing function.

2. Applying Keyframe Animations

Once you’ve defined your keyframe animation using @keyframes, you can apply it to an element using the animation property.

The basic syntax of the animation property is:

selector {
  animation: animation-name duration timing-function delay iteration-count direction fill-mode;
}

Key Animation Properties

animation-name: The name of the keyframe animation (defined using @keyframes).
```
animation-name: fadeIn;
```
animation-duration: How long the animation takes to complete (e.g., 2s for two seconds).
```
animation-duration: 2s;
```
animation-timing-function: Defines how the animation progresses over time (e.g., linear, ease-in, ease-out).
```
animation-timing-function: ease-in-out;
```
animation-delay: Specifies a delay before the animation starts.
```
animation-delay: 1s;
```
animation-iteration-count: Defines how many times the animation should repeat. You can specify a number (e.g., 2 for two iterations) or use the keyword infinite to make it loop indefinitely.
```
animation-iteration-count: infinite;
```
animation-direction: Controls whether the animation should run in reverse after each iteration. Common values include:
- normal: The animation plays forward each time (default).
- reverse: The animation plays in reverse.
- alternate: The animation alternates between forward and reverse.
```
animation-direction: alternate;
```
animation-fill-mode: Controls what happens to the element when the animation is not playing (before it starts and after it ends). Common values include:
- none: The element will not retain any style changes from the animation.
- forwards: The element will retain the styles from the last keyframe after the animation ends.
- backwards: The element will apply the styles from the first keyframe before the animation starts.
- both: The element will retain the styles from both the first and last keyframes.
```
animation-fill-mode: forwards;
```

3. Keyframe Animation Example

Here’s an example of a more complex keyframe animation that moves a square across the screen and changes its color and size:

@keyframes moveAndGrow {
  0% {
    left: 0;
    background-color: blue;
    width: 100px;
  }
  50% {
    left: 200px;
    background-color: green;
    width: 150px;
  }
  100% {
    left: 400px;
    background-color: red;
    width: 100px;
  }
}

div {
  position: relative;
  animation: moveAndGrow 5s ease-in-out infinite alternate;
}

In this example:

The div starts on the left side of the screen, changes its background color and width, and moves across to the right side over 5s.
The animation alternates between running forward and backward (animation-direction: alternate), creating a back-and-forth effect.
The animation runs indefinitely (animation-iteration-count: infinite).

4. Animation Shorthand

Just like with transitions, you can combine multiple animation properties into a shorthand declaration:

div {
  animation: moveAndGrow 5s ease

-in-out 1s infinite alternate forwards;
}

In this example:

The animation lasts for 5s (animation-duration: 5s).
It uses an ease-in-out timing function (animation-timing-function: ease-in-out).
There’s a 1s delay before the animation starts (animation-delay: 1s).
The animation repeats indefinitely (animation-iteration-count: infinite).
The animation alternates between forward and reverse (animation-direction: alternate).
The element retains the styles of the last keyframe after the animation ends (animation-fill-mode: forwards).

Differences Between Transitions and Keyframe Animations

Feature	Transitions	Keyframe Animations
Use case	Simple changes between two states (e.g., hover effects)	Complex, multi-step animations with fine control
How it’s triggered	Triggered by state change (e.g., hover, click)	Automatically or repeatedly after being applied
Control over steps	Only start and end states (no intermediate steps)	Define intermediate steps using keyframes
Looping	No built-in support for loops or repetitions	Supports loops with `animation-iteration-count`

Transitions are great for simple, one-step animations like hover effects or state changes, providing smooth transitions between states. Keyframe animations, on the other hand, offer much more control and flexibility, allowing you to define complex animations with multiple steps, loops, and direction control.

By combining transitions and keyframe animations, you can create a highly interactive and visually engaging user experience that adds dynamic visual effects without the need for JavaScript. These tools are essential for modern web design, allowing for smooth animations and improved user interaction.

===============================================================================

10. Best Practices in CSS Development

In this section, we’ll cover some best practices in CSS development, focusing on how to keep your code maintainable, reusable, and efficient. We’ll also cover CSS preprocessors and CSS frameworks, which can streamline and enhance your workflow.

1. DRY (Don’t Repeat Yourself)

The DRY principle—“Don’t Repeat Yourself”—is a software development practice aimed at reducing redundancy. In CSS, applying DRY means writing clean, modular, and reusable code by minimizing duplication. This approach leads to easier maintenance, better readability, and scalability of your styles.

How to Implement DRY in CSS

Modularize Your Styles

Instead of repeating the same styles across multiple selectors, group shared styles into reusable classes or selectors.

Before (repetitive styles):

h1 {
  font-family: Arial, sans-serif;
  color: #333;
  margin-bottom: 10px;
}

h2 {
  font-family: Arial, sans-serif;
  color: #333;
  margin-bottom: 8px;
}

After (modularized styles):

.heading {
  font-family: Arial, sans-serif;
  color: #333;
}

h1 {
  @extend .heading; /* SCSS Example for extending styles */
  margin-bottom: 10px;
}

h2 {
  @extend .heading;
  margin-bottom: 8px;
}

By abstracting common styles into a .heading class, the duplicated code is reduced, and any future changes to fonts or colors can be done in one place.

Use CSS Variables (Custom Properties)

CSS variables (introduced in CSS3) allow you to define reusable values for properties like colors, fonts, and spacings, making your code more flexible.

Example:
```
:root {
  --main-color: #3498db;
  --main-font: 'Arial', sans-serif;
}

h1 {
  color: var(--main-color);
  font-family: var(--main-font);
}

h2 {
  color: var(--main-color);
  font-family: var(--main-font);
}
```
By using variables, if you ever want to change the main color or font, you only need to modify the variable in one place.

Mixins in Preprocessors (SCSS/LESS)

If you’re using a CSS preprocessor like SCSS or LESS (discussed later), you can create mixins to reuse blocks of styles across different selectors.

SCSS Example:

@mixin button-style {
  padding: 10px 20px;
  background-color: blue;
  border-radius: 5px;
}

.btn-primary {
  @include button-style;
  color: white;
}

.btn-secondary {
  @include button-style;
  background-color: gray;
  color: white;
}

Use Shorthand Properties

CSS provides shorthand properties for many aspects of styling, such as margin, padding, border, and background. Using shorthand makes your code more concise and reduces repetition.

Example:
```
/* Longhand */
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

/* Shorthand */
margin: 10px;
```

2. CSS Preprocessors: SASS and LESS

CSS preprocessors like SASS and LESS extend the capabilities of CSS by allowing you to use features like variables, nesting, mixins, and more. These tools compile into standard CSS that browsers can interpret, but they provide enhanced syntax and capabilities during development.

SASS (Syntactically Awesome Style Sheets)

SASS is one of the most popular CSS preprocessors. It offers two syntax options: SCSS (Sassy CSS) and the original, more indented SASS syntax. SCSS is more widely used because it’s fully CSS-compatible, meaning any valid CSS is also valid SCSS.

Key Features of SASS:

Variables
- SASS allows you to define variables for colors, fonts, sizes, etc., so you can reuse them throughout your stylesheets.
Example:
```
$primary-color: #3498db;

body {
  color: $primary-color;
}
```

Nesting

In SASS, you can nest your selectors, which allows for a more structured, hierarchical approach to your styles.

Example:

nav {
  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
    color: $primary-color;
  }
}

Mixins

Mixins let you define reusable chunks of styles that can be included wherever necessary.

Example:

@mixin rounded-corners($radius: 5px) {
  border-radius: $radius;
}

.box {
  @include rounded-corners(10px);
}

Inheritance/Extends

SASS allows you to share a set of CSS properties from one selector to another by using the @extend directive.

Example:

.message {
  border: 1px solid black;
  padding: 10px;
  color: red;
}

.error {
  @extend .message;
  background-color: pink;
}

LESS (Leaner Style Sheets)

LESS is another popular CSS preprocessor that offers similar features to SASS, such as variables, nesting, and mixins, but with a slightly different syntax.

Key Features of LESS:

Variables Example:

@primary-color: #3498db;

body {
  color: @primary-color;
}

Nesting Example:

nav {
  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
    color: @primary-color;
  }
}

Mixins

LESS mixins are similar to SASS mixins but use a different syntax.

Example:

.rounded-corners(@radius: 5px) {
  border-radius: @radius;
}

.box {
  .rounded-corners(10px);
}

3. CSS Frameworks: Bootstrap and Tailwind CSS

CSS frameworks provide pre-built, modular CSS components that help you build websites faster. These frameworks include predefined classes, layout systems, and utility functions to help developers avoid writing styles from scratch.

Bootstrap

Bootstrap is a comprehensive front-end framework that includes CSS and JavaScript components for building responsive websites. It offers pre-built components (like navigation bars, buttons, forms) and a grid system to simplify layout creation.

Key Features of Bootstrap:

Responsive Grid System

Bootstrap uses a 12-column grid system to create flexible and responsive layouts.

Example:

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

Predefined Components
- Bootstrap includes ready-made components like modals, dropdowns, tooltips, carousels, etc.
Example:
```
<button class="btn btn-primary">Primary Button</button>
```
Responsive Utilities
- You can hide, show, or adjust the display of elements based on screen size using utility classes.
Example:
```
<div class="d-none d-md-block">Visible on desktop only</div>
```
Customizable Themes
- Bootstrap is customizable via SASS or LESS, allowing developers to tweak the default theme by modifying variables like colors, typography, and spacing.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework, meaning it provides a large set of small, reusable utility classes to style your elements directly in your HTML, rather than writing custom CSS styles.

Key Features of Tailwind CSS:

Utility-First Approach
- Tailwind promotes styling with utility classes like p-4 for padding, text-center for centering text, or bg-blue-500 for a blue background.
Example:
```
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">Button</button>
```
Responsive and State Variants
- Tailwind’s utility classes can be modified to apply to specific screen sizes or states like hover, focus, or active.
Example:
```
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Button</button>
```
Customization
- Tailwind is highly customizable. You can define your own color palettes, spacing units, fonts, and more by configuring Tailwind’s configuration file (tailwind.config.js).
No Predefined Components

Unlike Bootstrap, Tailwind does not provide pre-built components. Instead, it gives you low-level utility classes that allow for complete design flexibility.

Performance-Oriented
- Tailwind uses PurgeCSS to remove unused styles from the final CSS, leading to optimized, smaller file sizes.

Best Practices for Using CSS Frameworks and Preprocessors

Combine Frameworks and Custom Styles with Preprocessors
- If you’re using frameworks like Bootstrap, consider using a preprocessor like SASS to customize the framework’s variables (colors, fonts, etc.) and to avoid redundant code. This allows you to leverage the benefits of both.
Keep Styles Modular
- Organize your CSS or SCSS files into modular components. For example, create separate files for buttons, forms, and layouts. This makes your styles easier to manage as your project grows.
Example SCSS File Structure:
```
/styles/
  /components/
    _buttons.scss
    _forms.scss
  /layout/
    _grid.scss
    _header.scss
  main.scss
```
Use Utility Classes for Fast Prototyping
- If you need to quickly build a layout or prototype, frameworks like Tailwind CSS can be very effective. You can style your elements directly in your HTML, and later refactor into more maintainable styles if needed.
Purge Unused CSS
- Especially when using large frameworks like Bootstrap, make sure to remove unused CSS classes. Tools like PurgeCSS can help you scan your project for unused styles and remove them from the final build.

DRY principles in CSS help reduce redundancy by reusing code, which makes stylesheets more maintainable and scalable.
CSS preprocessors like SASS and LESS provide advanced features like variables, nesting, mixins, and more, making CSS development faster and more powerful.
CSS frameworks like Bootstrap and Tailwind CSS provide pre-built utilities and components, allowing you to speed up development and ensure consistent design. Bootstrap offers ready-to-use components and a grid system, while Tailwind promotes a utility-first approach with high flexibility and customization.

By combining these tools and best practices, you can create clean, efficient, and responsive web designs that are easy to maintain and scale as your project grows.

===============================================================================

Read in English

1. Pengenalan CSS

1. Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheets, yaitu bahasa stylesheet yang digunakan untuk mendefinisikan presentasi visual dari halaman web yang ditulis dalam HTML (atau bahasa berbasis XML seperti XHTML). Sementara HTML mengatur struktur konten halaman web (judul, paragraf, gambar, dll.), CSS bertanggung jawab untuk tampilan dari konten tersebut.

Tujuan Utama: CSS memungkinkan Anda memisahkan konten (HTML) dari desain dan presentasi (gaya), yang menghasilkan kode yang lebih bersih, perawatan yang lebih mudah, dan desain yang lebih fleksibel dan responsif.
Apa Arti “Cascading”: Aturan CSS dapat “mengalir” dari aturan yang lebih umum ke aturan yang lebih spesifik. Sebagai contoh, Anda bisa mengatur ukuran font global untuk seluruh halaman web, namun membuat pengecualian untuk elemen tertentu seperti judul.

2. Bagaimana CSS Bekerja

CSS bekerja dengan menerapkan gaya (aturan) ke elemen HTML. Aturan-aturan ini didefinisikan sebagai “selector” dan digunakan untuk menargetkan elemen-elemen dalam dokumen HTML. CSS memungkinkan Anda mengubah hal-hal seperti warna teks, ukuran font, tata letak elemen, spasi, dan berbagai aspek visual lainnya dari konten web Anda.

Sintaks Dasar CSS:
```
selector {
  property: value;
}
```
- Selector: Ini adalah elemen HTML yang ingin Anda gaya (misalnya, p, h1, .class, #id).
- Property: Properti CSS mendefinisikan aspek mana dari elemen yang ingin Anda gaya (misalnya, color, font-size, margin).
- Value: Ini menetapkan nilai untuk properti tersebut (misalnya, red, 16px, 10px).

Sebagai contoh, aturan CSS berikut mengatur warna teks dari semua paragraf menjadi biru:

p {
  color: blue;
}

Aturan ini diterapkan pada setiap elemen <p> (paragraf) di dokumen HTML Anda.

3. Menyertakan CSS dalam HTML

Ada tiga cara untuk menyertakan CSS dalam file HTML Anda:

a. CSS Inline

CSS inline berarti menulis aturan CSS langsung di dalam tag HTML. Metode ini digunakan untuk memberikan gaya pada elemen tertentu tanpa memengaruhi bagian lain dari halaman. Anda menggunakan atribut style di dalam elemen HTML.

Contoh:

<p style="color: green; font-size: 20px;">Ini adalah paragraf berwarna hijau dengan ukuran font 20px.</p>

Kapan Digunakan: CSS inline biasanya tidak disarankan karena mencampurkan konten dan gaya, sehingga membuat kode lebih sulit untuk dirawat. Namun, ini bisa berguna untuk penataan sementara atau elemen khusus.

b. CSS Internal

CSS internal mengacu pada penambahan gaya di dalam elemen <style> di bagian <head> dari dokumen HTML Anda. Ini memungkinkan Anda untuk mendefinisikan banyak aturan CSS yang diterapkan ke seluruh dokumen, namun hanya dokumen tersebut.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    p {
      color: blue;
    }
    h1 {
      text-align: center;
      color: red;
    }
  </style>
</head>
<body>
  <h1>Ini adalah Judul</h1>
  <p>Ini adalah paragraf dengan teks berwarna biru.</p>
</body>
</html>

Kapan Digunakan: CSS internal digunakan saat Anda ingin mendefinisikan gaya yang berlaku untuk satu halaman web, tetapi tidak ingin menautkan ke stylesheet eksternal.

c. CSS Eksternal

CSS eksternal adalah cara yang paling umum dan disukai untuk menambahkan gaya ke halaman web. Ini melibatkan penautan ke file .css terpisah yang berisi semua aturan CSS. Metode ini menjaga kode HTML dan CSS tetap terpisah, membuat kode lebih modular dan lebih mudah dirawat.

Contoh:

File HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Ini adalah Judul</h1>
  <p>Ini adalah paragraf dengan teks berwarna biru.</p>
</body>
</html>

File CSS eksternal (styles.css):

p {
  color: blue;
}

h1 {
  text-align: center;
  color: red;
}

Kapan Digunakan: CSS eksternal paling cocok untuk proyek besar di mana beberapa halaman berbagi gaya yang sama. Ini memungkinkan konsistensi di seluruh halaman dan memudahkan pembaruan desain dengan memodifikasi satu file CSS.

Cascading dan Prioritas CSS

Memahami “cascading” dalam CSS sangat penting untuk mengontrol aturan mana yang akan diterapkan. Prioritas aturan CSS ditentukan oleh:

Gaya Inline: Memiliki prioritas tertinggi. Mereka akan menimpa gaya lain yang dideklarasikan di tempat lain.
Gaya Internal dan Eksternal: Umumnya, gaya dari file CSS eksternal diterapkan kecuali ditimpa oleh gaya internal atau inline.
Spesifisitas: Selector yang lebih spesifik (seperti selector ID) memiliki prioritas lebih tinggi daripada selector yang lebih umum (seperti selector tipe atau class).
Importance: Anda dapat menggunakan deklarasi !important untuk memaksa aturan CSS menimpa yang lain, tetapi ini harus digunakan dengan hemat karena dapat membuat debugging lebih sulit.

Contoh:

p {
  color: blue !important; /* Aturan ini akan menimpa deklarasi warna lainnya */
}

Dengan memahami berbagai cara untuk menerapkan CSS, sintaks dasar, dan sifat cascading CSS, Anda akan dapat mulai membuat halaman web yang bergaya dengan efektif dan fleksibel. Langkah selanjutnya dalam mempelajari CSS biasanya melibatkan bekerja dengan selector, memahami box model, dan menjelajahi layout dengan Flexbox dan Grid.

===============================================================================

2. Selector CSS

Selector CSS digunakan untuk menargetkan elemen HTML tertentu dan menerapkan gaya kepada mereka. Ada beberapa jenis selector, termasuk selector elemen, selector class, dan selector ID, serta selector kombinator.

Selector Dasar

1. Selector Elemen

Selector elemen (juga dikenal sebagai selector tipe) menargetkan elemen HTML berdasarkan nama tag mereka. Ini adalah bentuk paling dasar dari selector CSS.

Contoh:

h1 {
  color: blue;
}

p {
  font-size: 16px;
}

Dalam contoh ini, semua elemen <h1> akan memiliki teks berwarna biru, dan semua elemen <p> akan memiliki ukuran font 16px.

Penggunaan: Gunakan selector elemen saat Anda ingin memberikan gaya yang sama untuk semua instance dari elemen HTML tertentu (misalnya, semua paragraf, semua judul, dll.).

2. Selector Class

Selector class menargetkan elemen berdasarkan atribut class dalam HTML. Selector ini diawali dengan tanda titik (.) diikuti dengan nama class.

Contoh:

<p class="highlight">Ini adalah teks yang disorot.</p>

<style>
  .highlight {
    background-color: yellow;
  }
</style>

Di sini, elemen <p> dengan class "highlight" akan memiliki latar belakang kuning.

Penggunaan: Selector class lebih fleksibel daripada selector elemen karena Anda dapat menerapkan class yang sama pada beberapa jenis elemen (misalnya, paragraf, div, dll.), memberikan fleksibilitas yang lebih besar. Anda juga dapat menerapkan beberapa class pada elemen yang sama.

3. Selector ID

Selector ID menargetkan elemen tertentu dengan atribut id yang unik. Selector id diawali dengan simbol pagar (#).

Contoh:

<p id="intro">Ini adalah paragraf pengantar.</p>

<style>
  #intro {
    font-weight: bold;
  }
</style>

Di sini, hanya paragraf dengan id="intro" yang akan dicetak tebal.

Penggunaan: Selector ID digunakan saat Anda ingin menargetkan satu elemen yang unik. id harus unik dalam satu halaman, sehingga tidak boleh digunakan kembali untuk beberapa elemen.

Selector Kombinator

Selector kombinator memungkinkan Anda untuk menggabungkan beberapa selector dengan berbagai cara untuk menargetkan elemen berdasarkan hubungannya dengan elemen lain. Ini sangat berguna untuk menargetkan struktur bersarang.

1. Selector Descendant

Selector descendant menargetkan elemen yang bersarang di dalam elemen leluhur tertentu. Anda mendefinisikan hubungan ini dengan spasi antara dua selector.

Contoh:

<div>
  <p>Ini adalah paragraf di dalam div.</p>
</div>

<style>
  div p {
    color: red;
  }
</style>

Dalam contoh ini, setiap <p> di dalam <div> akan berwarna merah. Spasi antara div dan p menunjukkan hubungan descendant.

Penggunaan: Gunakan selector descendant untuk memberikan gaya pada elemen yang berada di dalam kontainer tertentu. Ini berguna untuk tata letak yang kompleks di

mana Anda ingin memberikan gaya berbeda pada elemen-elemen tertentu tergantung pada induknya.

2. Selector Child

Selector child (>) memilih elemen yang merupakan anak langsung dari elemen induk tertentu. Ini lebih spesifik daripada selector descendant.

Contoh:

<ul>
  <li>Ini adalah item daftar.</li>
  <ul>
    <li>Ini adalah item daftar bersarang.</li>
  </ul>
</ul>

<style>
  ul > li {
    color: green;
  }
</style>

Dalam kasus ini, hanya anak langsung <li> dari <ul> luar yang akan berwarna hijau, tetapi <li> bersarang di dalam <ul> dalam tidak akan berwarna hijau.

Penggunaan: Gunakan selector child saat Anda hanya ingin menargetkan anak langsung dari elemen, mengecualikan elemen yang bersarang lebih dalam.

Selector Atribut

Selector atribut memungkinkan Anda memilih elemen berdasarkan keberadaan, nilai, atau pola nilai dari atribut HTML mereka. Ini sangat berguna untuk form atau elemen dengan atribut khusus.

1. Selector Atribut Dasar

Ini menargetkan elemen yang memiliki atribut tertentu.

Contoh:

<input type="text" />
<input type="password" />

<style>
  [type="text"] {
    border: 2px solid blue;
  }
</style>

Di sini, input teks (<input type="text">) akan memiliki border berwarna biru, sementara input password akan tetap tidak berubah.

Penggunaan: Gunakan selector atribut saat Anda ingin menata elemen form (misalnya, field input, tombol) atau elemen lain dengan atribut tertentu.

2. Selector Keberadaan

Selector ini menargetkan elemen yang memiliki atribut tertentu, terlepas dari nilainya.

Contoh:

<img src="image.jpg" alt="Pemandangan indah">
<img src="image.jpg">

<style>
  img[alt] {
    border: 1px solid green;
  }
</style>

Dalam contoh ini, hanya elemen <img> yang memiliki atribut alt yang akan mendapatkan border hijau, terlepas dari nilai alt.

3. Selector Substring Nilai Atribut

Selector ini digunakan untuk memilih elemen yang nilai atributnya mengandung substring tertentu.

Mengandung (*=): Memilih elemen yang atributnya mengandung substring yang ditentukan.

Contoh:
```
a[href*="example"] {
  color: orange;
}
```
Ini akan memilih setiap elemen <a> yang atribut href-nya mengandung “example” di mana saja di dalam URL.
Dimulai dengan (^=): Memilih elemen yang nilai atributnya dimulai dengan string yang ditentukan.

Contoh:
```
input[name^="user"] {
  background-color: lightgray;
}
```
Ini akan menargetkan setiap field <input> di mana atribut name dimulai dengan “user” (misalnya, userName, userEmail).
Berakhir dengan ($=): Memilih elemen yang nilai atributnya berakhir dengan string yang ditentukan.

Contoh:
```
img[src$=".jpg"] {
  border: 2px solid black.
```
Ini akan menargetkan semua elemen <img> di mana atribut src berakhir dengan “.jpg”, menerapkan border hitam pada mereka.

Menggabungkan Selector

Anda bisa menggabungkan berbagai jenis selector untuk membuat aturan yang sangat spesifik. Sebagai contoh:

div.container > ul li.active a {
  color: blue;
}

Aturan ini menargetkan setiap tautan (<a>) di dalam elemen <li> yang memiliki class active, di mana <li> tersebut berada di dalam <ul>, dan <ul> adalah anak langsung dari <div> dengan class container.

Ini adalah contoh yang lebih kompleks yang menggabungkan selector elemen, class, child, dan descendant untuk menata elemen yang sangat spesifik di halaman.

Spesifisitas CSS

Selector CSS memiliki berbagai tingkat spesifisitas, yang menentukan aturan mana yang akan diterapkan ketika beberapa aturan menargetkan elemen yang sama. Spesifisitas dihitung sebagai berikut:

Gaya inline (di dalam atribut style elemen) memiliki spesifisitas tertinggi (misalnya, style="color: red").
Selector ID (#id-name) lebih spesifik daripada selector class dan elemen.
Selector class (.class-name), selector atribut, dan pseudo-class kurang spesifik daripada selector ID tetapi lebih spesifik daripada selector elemen.
Selector elemen (misalnya, p, div, h1) memiliki spesifisitas terendah.

Contoh spesifisitas:

<p id="special" class="important">Teks yang Ditata</p>

<style>
  p {
    color: black;
  }

  .important {
    color: green;
  }

  #special {
    color: red;
  }
</style>

Dalam contoh ini:

Paragraf dimulai dengan selector elemen p (color: black).
Selector class .important (color: green) lebih spesifik daripada selector elemen, jadi teks berubah menjadi hijau.
Terakhir, selector ID #special (color: red) adalah yang paling spesifik, jadi teks berubah menjadi merah.

Pseudo-class dan Pseudo-element

Selector ini memungkinkan Anda untuk menata elemen dalam keadaan tertentu atau bagian dari elemen.

1. Pseudo-class

Pseudo-class menerapkan gaya pada elemen berdasarkan statusnya (misalnya, hover, fokus).

Contoh:

a:hover {
  text-decoration: underline;
}

Ini membuat tautan bergaris bawah ketika pengguna mengarahkan mouse ke atasnya.

2. Pseudo-element

Pseudo-element memungkinkan Anda menata bagian tertentu dari elemen, seperti huruf pertama atau konten sebelum/setelah elemen.

Contoh:

p::first-letter {
  font-size: 24px;
  color: red;
}

p::before {
  content: "Catatan: ";
  font-weight: bold;
}

::first-letter menargetkan huruf pertama paragraf.
::before menyisipkan konten sebelum teks paragraf.

Penjelasan mendetail mengenai selector ini mencakup alat-alat dasar untuk mengontrol bagaimana Anda menerapkan gaya dalam CSS. Memahami ini akan memungkinkan Anda menargetkan elemen HTML dengan presisi dan menciptakan gaya yang lebih terorganisir, mudah dirawat, dan kuat.

3. Properti dan Nilai CSS

Properti dan nilai CSS adalah dasar dari CSS. Mereka menentukan gaya yang ingin Anda terapkan pada elemen HTML Anda.

Penataan Teks dan Font

Properti ini mengontrol tampilan teks di halaman web Anda. Penataan teks dan font sangat penting untuk keterbacaan dan estetika.

1. `font-family`

Properti ini mengatur font untuk konten teks. Anda bisa menentukan beberapa font, dipisahkan dengan koma, dan browser akan menggunakan font pertama yang tersedia di sistem pengguna.

Contoh:

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

Dalam kasus ini, browser akan menggunakan font Arial jika tersedia; jika tidak, ia akan mencoba Helvetica, dan jika tidak ada yang tersedia, ia akan menggunakan font generik sans-serif.

2. `font-size`

Properti ini mengontrol ukuran teks. Anda dapat menggunakan berbagai satuan seperti px, em, %, rem, atau bahkan kata kunci seperti small, medium, large.

Contoh:

p {
  font-size: 16px; /* Mengatur ukuran font menjadi 16 piksel */
}

Satuan Absolut (px, pt): Ukuran tetap yang tidak berubah berdasarkan perangkat atau resolusi layar pengguna.
Satuan Relatif (em, rem, %): Ukuran yang dapat diskalakan relatif terhadap elemen lain, sering digunakan untuk desain responsif.

3. `font-weight`

Ini mengontrol ketebalan teks. Nilainya bisa berupa kata kunci seperti normal, bold, atau nilai numerik seperti 100, 400, 700.

Contoh:

h1 {
  font-weight: bold; /* Setara dengan 700 */
}

Anda juga bisa menggunakan nilai numerik (100-900), di mana 400 setara dengan berat normal dan 700 adalah tebal.

4. `color`

Properti color mengatur warna teks.

Contoh:

p {
  color: #333333; /* Warna hexadecimal */
}

Nilai Warna: Dapat ditentukan menggunakan nama warna (red), nilai hexadecimal (#ff0000), RGB (rgb(255, 0, 0)), atau HSL (hsl(0, 100%, 50%)).

5. `text-align`

Properti ini mengontrol perataan horizontal teks dalam elemen blok (misalnya, div, p).

Contoh:

h1 {
  text-align: center;
}

Nilai umum:

left: Meratakan teks ke kiri.
center: Memusatkan teks.
right: Meratakan teks ke kanan.
justify: Meregangkan baris sehingga setiap baris memiliki lebar yang sama (kecuali baris terakhir).

6. `line-height`

Properti line-height mengontrol jarak antar baris teks.

Contoh:

p {
  line-height: 1.5; /* Mengatur tinggi garis menjadi 1,5 kali ukuran font */
}

Ini bisa diatur menggunakan angka tanpa satuan (yang mengalikan ukuran font), piksel, atau persentase.

Penataan Latar Belakang

Properti latar belakang mengontrol tampilan visual di belakang konten, menambahkan warna atau gambar ke elemen.

1. `background-color`

Properti ini mengatur warna latar belakang sebuah elemen.

Contoh:

div {
  background-color: lightblue;
}

2. `background-image`

Anda dapat mengatur gambar sebagai latar belakang sebuah elemen.

Contoh:

body {
  background-image: url('background.jpg');
}

Opsi Pengulangan: Secara default, gambar akan diulang di seluruh elemen. Anda bisa mengontrol pengulangannya dengan background-repeat: no-repeat;, atau membuat gambar menutupi seluruh elemen menggunakan background-size: cover;.

Anda dapat menggabungkan properti latar belakang untuk efek yang kompleks:

div {
  background: url('image.jpg') no-repeat center center/cover, lightblue;
}

Contoh ini mengatur gambar latar belakang dan memusatkannya, menutupi elemen sambil menambahkan warna cadangan biru muda.

Model Kotak

Model kotak menentukan bagaimana elemen ditampilkan secara visual dalam hal ruang di sekitar konten, border, dan margin. Setiap elemen pada dasarnya adalah kotak dengan komponen berikut:

1. Konten

Bagian paling dalam dari kotak, yang berisi teks atau gambar yang sebenarnya.

2. Padding

Ruang antara konten dan border. Padding mendorong border ke luar, meningkatkan ukuran elemen. Padding sering digunakan untuk memberi ruang di antara konten dan tepinya.

Contoh:

div {
  padding: 20px; /* Menambahkan ruang 20px di dalam elemen */
}

Anda juga bisa menentukan padding secara individual:

div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 5px;
}

Atau menggunakan shorthand:

div {
  padding: 10px 20px 15px 5px; /* Atas, kanan, bawah, kiri */
}

3. Border

Border mengelilingi padding (atau konten, jika padding tidak ditentukan). Anda dapat menata border dalam hal lebar, gaya (solid, dashed, dotted), dan warna.

Contoh:

div {
  border: 2px solid black; /* Border solid hitam 2px */
}

Border juga dapat ditentukan secara individual:

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

4. Margin

Margin adalah ruang terluar, menciptakan jarak antara border elemen dan elemen tetangga. Margin bersifat transparan.

Contoh:

div {
  margin: 20px; /* Menambahkan ruang 20px di luar elemen */
}

Seperti padding, Anda dapat menentukan margin untuk sisi tertentu:

div {
  margin: 10px 20px 30px 40px; /* Atas, kanan, bawah, kiri */
}

5. Properti `box-sizing`

Secara default, lebar dan tinggi yang Anda atur hanya berlaku untuk kotak konten, tidak termasuk padding dan border. Ini kadang-kadang dapat menyebabkan masalah tata letak yang tidak terduga, tetapi Anda dapat mengontrol bagaimana ukuran dihitung menggunakan box-sizing.

content-box (default): Lebar dan tinggi hanya termasuk konten.
border-box: Lebar dan tinggi termasuk padding dan border.

Contoh:

div {
  box-sizing: border-box; /* Termasuk padding dan border dalam lebar/tinggi */
}

Lebar dan Tinggi

CSS memungkinkan Anda untuk mengontrol dimensi elemen dengan mengatur lebar dan tingginya. Properti ini bisa menggunakan satuan tetap atau fleksibel.

1. Satuan Tetap (Piksel dan Poin)

Piksel (px): Piksel adalah satuan relatif yang bergantung pada resolusi layar. Ini adalah satuan dengan ukuran tetap dan tidak berubah berdasarkan dimensi perangkat.

Contoh:
```
div {
  width: 300px;
  height: 200px;
}
```

2. Satuan Fleksibel

Satuan fleksibel memungkinkan tata letak menyesuaikan dengan berbagai ukuran layar dan orientasi perangkat. Ini penting untuk menciptakan desain responsif.

Persentase (%): Ukuran elemen adalah persentase dari ukuran elemen induknya.

Contoh:
```
div {
  width: 50%; /* Mengambil 50% dari lebar induk */
}
```
Em (em): Satuan em adalah relatif terhadap ukuran font elemen itu sendiri. Ini sering digunakan untuk tata letak yang skalabel dan konsisten secara tipografi.

Contoh:
```
p {
  font-size: 16px;
}

div {
  padding: 1.5em; /* 1,5 kali ukuran font, yaitu 24px */
}
```
Rem (rem): Mirip dengan em, tetapi relatif terhadap ukuran font elemen root (html), bukan ukuran font elemen itu sendiri.

Contoh:
```
html {
  font-size: 16px;
}

div {
  width: 20rem; /* Setara dengan 320px jika 1rem = 16px */
}
```
Lebar Viewport (vw) dan Tinggi Viewport (vh): Satuan ini relatif terhadap ukuran jendela browser. 1vw adalah 1% dari lebar viewport, dan 1vh adalah 1% dari tinggi viewport.

Contoh:
```
div {
  width: 50vw; /* Mengambil 50% dari le
```

bar viewport / height: 50vh; / Mengambil 50% dari tinggi viewport */ }


#### **Lebar/Tinggi Minimum dan Maksimum**
Anda bisa menggunakan `min-width`, `max-width`, `min-height`, dan `max-height` untuk membatasi seberapa besar atau kecil suatu elemen dapat tumbuh atau menyusut.

Contoh:
```css
div {
width: 100%;
max-width: 1200px; /* Tidak akan melebihi lebar 1200px */
}

Ini sangat berguna untuk desain responsif, di mana Anda ingin elemen-elemen tetap fleksibel tetapi tidak tumbuh terlalu besar atau kecil pada berbagai ukuran layar.

Memahami dan menerapkan properti serta nilai CSS ini sangat penting untuk menciptakan situs web yang bergaya dan responsif. Penataan teks dan font mengontrol keterbacaan konten Anda, penataan latar belakang menambahkan daya tarik visual, dan model kotak memastikan pengaturan jarak dan struktur yang tepat. Mengelola lebar dan tinggi dengan satuan tetap maupun fleksibel sangat penting untuk membangun desain responsif yang berfungsi di semua ukuran layar.

Dengan menguasai properti-properti dasar ini, Anda akan dapat membuat tata letak yang lebih kompleks dan menarik secara visual, sambil menjaga konsistensi dan responsivitas desain Anda di berbagai perangkat.

===============================================================================

4. Warna dalam CSS

Model Warna dalam CSS

Warna Bernama

CSS menyediakan daftar warna bernama yang telah ditentukan, yang dapat digunakan hanya dengan menyebutkan namanya. Warna-warna ini mudah digunakan tetapi menawarkan fleksibilitas yang lebih sedikit dibandingkan dengan model lainnya.

Contoh:

h1 {
  color: red;
}

p {
  background-color: lightblue;
}

Beberapa warna bernama yang umum meliputi:

red
blue
green
black
white
yellow
lightgray
Kapan Digunakan: Warna bernama nyaman untuk prototipe cepat atau saat Anda perlu merujuk warna-warna dasar yang umum dipahami. Namun, mereka tidak menawarkan kontrol yang halus seperti memilih corak atau nada tertentu.

Warna Hexadecimal

Warna Hexadecimal (hex) diwakili oleh tanda # diikuti oleh 6 digit (terdiri dari angka 0-9 dan huruf A-F), di mana dua digit pertama mewakili merah, dua berikutnya mewakili hijau, dan dua terakhir mewakili biru.

Contoh:

h1 {
  color: #ff0000; /* Merah murni */
}

p {
  background-color: #00ff00; /* Hijau murni */
}

#ff0000: Merah penuh, tanpa hijau, tanpa biru.
#00ff00: Tanpa merah, hijau penuh, tanpa biru.
#0000ff: Tanpa merah, tanpa hijau, biru penuh.

Kode warna hexadecimal diuraikan sebagai:

#rrggbb: di mana rr mewakili nilai merah, gg mewakili nilai hijau, dan bb mewakili nilai biru, semuanya dalam format hexadecimal (basis-16).

Nilai Hex Pendek: Ketika warna hex memiliki pasangan yang berulang (misalnya, #ffcc00), Anda bisa mempersingkat kode menjadi hanya tiga digit:

h1 {
  color: #fc0; /* Setara dengan #ffcc00 */
}

Kapan Digunakan: Warna hex banyak digunakan dalam desain web karena lebih fleksibel daripada warna bernama, memungkinkan Anda menciptakan berbagai rentang warna. Nilai hex sangat berguna untuk memperhalus desain Anda.

RGB (Red, Green, Blue)

Warna RGB mendefinisikan warna menggunakan komponen merah, hijau, dan biru, masing-masing diwakili oleh nilai dari 0 hingga 255. Model ini memberikan pemahaman yang lebih jelas tentang berapa banyak merah, hijau, dan biru yang dicampur untuk menciptakan warna tertentu.

Contoh:

h1 {
  color: rgb(255, 0, 0); /* Merah murni */
}

p {
  background-color: rgb(0, 255, 0); /* Hijau murni */
}

rgb(255, 0, 0): Merah penuh, tanpa hijau, tanpa biru (merah murni).
rgb(0, 255, 0): Tanpa merah, hijau penuh, tanpa biru (hijau murni).
rgb(0, 0, 255): Tanpa merah, tanpa hijau, biru penuh (biru murni).

Dalam model RGB, Anda mengontrol setiap komponen warna dengan mengatur nilai antara 0 (tidak ada) dan 255 (intensitas penuh). Hasilnya adalah campuran dari tiga warna ini.

Kapan Digunakan: Warna RGB intuitif saat Anda perlu kontrol presisi terhadap intensitas warna untuk setiap saluran. Ini berguna saat Anda perlu mencampur warna atau mencocokkan skema warna dalam perangkat lunak desain seperti Photoshop.

RGBA (Red, Green, Blue, Alpha)

RGBA adalah perpanjangan dari model RGB, dengan tambahan parameter alpha, yang mengontrol opacity dari warna. Nilai alpha berkisar antara 0 (sepenuhnya transparan) hingga 1 (sepenuhnya buram).

Contoh:

p {
  background-color: rgba(255, 0, 0, 0.5); /* Merah setengah transparan */
}

rgba(255, 0, 0, 0.5): Merah setengah transparan, di mana saluran merah penuh intensitas, dan alpha (opacity) diatur ke 0.5 (50% opacity).

Ini berguna saat Anda ingin melapisi elemen atau membuat efek transparansi halus.

Kapan Digunakan: Gunakan RGBA saat Anda perlu mengontrol warna dan transparansi elemen sekaligus. Ini sangat berguna untuk overlay, latar belakang setengah transparan, atau saat menggabungkan elemen.

HSL (Hue, Saturation, Lightness)

Model HSL mendefinisikan warna menggunakan tiga properti:

Hue: Mewakili jenis warna (derajat pada roda warna dari 0 hingga 360). Misalnya, 0 adalah merah, 120 adalah hijau, dan 240 adalah biru.
Saturation: Mendefinisikan intensitas warna (0% adalah grayscale, 100% adalah warna penuh).
Lightness: Mendefinisikan kecerahan warna (0% adalah hitam, 50% adalah warna normal, dan 100% adalah putih).

Contoh:

h1 {
  color: hsl(0, 100%, 50%); /* Merah murni */
}

p {
  background-color: hsl(120, 100%, 50%); /* Hijau murni */
}

hsl(0, 100%, 50%): Merah penuh.
hsl(120, 100%, 50%): Hijau penuh.
hsl(240, 100%, 50%): Biru penuh.
Kapan Digunakan: HSL berguna saat Anda ingin menyesuaikan nada, intensitas, dan kecerahan warna dengan lebih intuitif, terutama untuk membuat variasi terang atau gelap dari suatu warna.

HSLA (Hue, Saturation, Lightness, Alpha)

HSLA memperpanjang model HSL dengan menambahkan saluran alpha untuk transparansi, mirip dengan model RGBA.

Contoh:

p {
  background-color: hsla(0, 100%, 50%, 0.5); /* Merah setengah transparan */
}

hsla(0, 100%, 50%, 0.5): Merah setengah transparan dengan 50% opacity.
Kapan Digunakan: Gunakan HSLA saat Anda membutuhkan manfaat dari penyesuaian warna intuitif HSL yang digabungkan dengan kontrol terhadap transparansi.

Menggunakan Model Warna: Pertimbangan Praktis

Konsistensi di Berbagai Perangkat:
- Perangkat yang berbeda dapat menampilkan warna sedikit berbeda karena teknologi tampilan yang bervariasi. Dengan menggunakan model warna yang tepat seperti hex, RGB, atau HSL, Anda memastikan konsistensi yang lebih baik di berbagai perangkat.
Kontras dan Aksesibilitas:
- Selalu periksa kontras yang cukup antara teks dan warna latar belakang untuk keterbacaan. Misalnya, gunakan alat seperti WebAIM Contrast Checker untuk memastikan aksesibilitas bagi pengguna dengan gangguan penglihatan.
- Contoh kontras yang baik:
```
p {
  color: #ffffff;
  background-color: #000000; /* Teks putih pada latar belakang hitam */
}
```
Kapan Memilih Model Warna yang Mana:
- Warna Bernama: Kasus penggunaan sederhana dengan warna standar.
- Warna Hexadecimal: Populer dalam desain web karena sintaks yang ringkas dan dukungan browser yang luas.
- RGB/RGBA: Berguna saat Anda perlu menyesuaikan intensitas warna secara programatik atau menggabungkan warna dalam grafik atau animasi.
- HSL/HSLA: Ideal saat Anda perlu menyesuaikan hue, saturasi, atau kecerahan warna secara lebih halus, seperti saat membuat gradasi atau palet.

Contoh Penggunaan Warna CSS

Contoh 1: Warna Teks

h1 {
  color: #3498db; /* Hexadecimal untuk warna biru */
}

p {
  color: rgb(231, 76, 60); /* RGB untuk warna merah */
}

Contoh 2: Warna Latar Belakang

body {
  background-color: #ecf0f1; /* Latar belakang abu-abu terang */
}

Contoh 3: Overlay Transparan Menggunakan RGBA

div.overlay {
  background-color: rgba(0, 0, 0, 0.7); /* Hitam dengan 70% opacity

 */
}

Contoh 4: HSL untuk Penyesuaian Saturasi dan Kecerahan

a {
  color: hsl(240, 100%, 50%); /* Biru murni */
}

a:hover {
  color: hsl(240, 100%, 70%); /* Biru lebih terang saat hover */
}

Memahami berbagai model warna dalam CSS memberi Anda alat untuk memanipulasi warna secara efektif dalam desain Anda. Setiap model menawarkan keuntungan yang berbeda:

Warna bernama mudah digunakan tetapi terbatas.
Warna hexadecimal ringkas dan banyak digunakan.
RGB/RGBA memberikan kontrol granular atas pencampuran warna dan transparansi.
HSL/HSLA menawarkan cara yang lebih intuitif untuk menyesuaikan warna dengan mengontrol hue, saturasi, dan kecerahan.

Dengan menguasai model warna ini, Anda akan memiliki kemampuan untuk menciptakan desain yang menarik secara visual sambil tetap mengontrol bagaimana warna berperilaku dalam berbagai konteks, seperti transparansi, responsivitas, dan aksesibilitas.

===============================================================================

5. Penempatan dan Tata Letak

Posisi Elemen

CSS menyediakan beberapa skema penempatan yang memungkinkan Anda mengontrol bagaimana elemen-elemen ditempatkan di halaman web. Skema penempatan ini ditentukan menggunakan properti position.

1. Posisi Statis

position: static; adalah nilai default untuk properti position. Elemen dengan posisi statis ditempatkan sesuai dengan alur dokumen normal (yaitu, mereka ditempatkan satu demi satu sebagai elemen blok atau inline).

Contoh:

div {
  position: static; /* Ini adalah default, jadi Anda tidak perlu secara eksplisit mengaturnya */
}

Kapan Digunakan: Posisi statis biasanya digunakan ketika Anda menginginkan perilaku default dan tidak perlu memindahkan elemen secara manual di halaman.

2. Posisi Relatif

position: relative; menempatkan elemen relatif terhadap posisi normalnya dalam alur dokumen. Elemen masih merupakan bagian dari alur normal, tetapi Anda dapat memindahkannya menggunakan properti top, right, bottom, atau left.

Contoh:

div {
  position: relative;
  top: 10px;  /* Memindahkan elemen 10px ke bawah dari posisi aslinya */
  left: 20px; /* Memindahkan elemen 20px ke kanan */
}

Dalam contoh ini, elemen masih akan menempati ruang aslinya, tetapi secara visual akan bergeser 10px ke bawah dan 20px ke kanan.

Kapan Digunakan: Posisi relatif berguna ketika Anda perlu menggeser elemen sedikit tanpa mengeluarkannya dari alur dokumen. Ini sering digunakan dalam kombinasi dengan skema penempatan lainnya (misalnya, absolute atau fixed).

3. Posisi Absolut

position: absolute; menghapus elemen dari alur dokumen normal, artinya elemen tersebut tidak lagi memengaruhi tata letak elemen lainnya. Sebaliknya, elemen tersebut ditempatkan relatif terhadap leluhur terdekat yang diposisikan (elemen leluhur dengan position yang diatur ke nilai selain static).

Contoh:

div {
  position: absolute;
  top: 50px;  /* 50px dari bagian atas leluhur terdekat yang diposisikan */
  right: 100px; /* 100px dari kanan leluhur terdekat yang diposisikan */
}

Jika tidak ada leluhur yang diposisikan, elemen akan diposisikan relatif terhadap blok pengandung awal (biasanya elemen <html>).

Kapan Digunakan: Posisi absolut berguna ketika Anda perlu menempatkan elemen secara presisi dalam hubungannya dengan elemen atau wadah lain, tanpa memengaruhi elemen lain di halaman.

4. Posisi Tetap

position: fixed; menempatkan elemen relatif terhadap jendela tampilan (jendela browser) dan mempertahankannya di posisi tersebut bahkan ketika pengguna menggulir halaman. Ini berarti elemen akan tetap berada di posisi yang sama di layar, terlepas dari bagaimana pengguna menggulir.

Contoh:

div {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

Dalam contoh ini, elemen akan selalu berada di sudut kanan bawah layar, bahkan saat halaman digulir.

Kapan Digunakan: Posisi tetap cocok untuk elemen seperti header yang menempel, bilah navigasi, atau tombol “kembali ke atas”, yang perlu tetap terlihat saat pengguna menggulir halaman.

5. Posisi Sticky

position: sticky; adalah hibrida antara posisi relatif dan tetap. Elemen dengan position: sticky beralih antara relatif dan tetap tergantung pada posisi gulir. Elemen ini berperilaku seperti elemen yang diposisikan relatif sampai mencapai posisi gulir tertentu, setelah itu menjadi tetap.

Contoh:

div {
  position: sticky;
  top: 20px; /* Menempel di bagian atas jendela tampilan ketika digulir 20px dari atas */
}

Dalam contoh ini, elemen akan berperilaku seperti elemen yang diposisikan relatif sampai halaman digulir ke bawah sejauh 20px, di mana elemen akan tetap berada 20px dari bagian atas jendela tampilan.

Kapan Digunakan: Posisi sticky berguna untuk header yang menempel, sidebar, atau elemen yang perlu “menempel” pada jendela tampilan saat pengguna menggulir melewatinya.

Mengapungnya Elemen

Properti float banyak digunakan di masa lalu untuk membuat tata letak, tetapi perannya telah berkurang dengan adanya teknik tata letak modern seperti Flexbox dan Grid. Namun, float masih memiliki kegunaannya untuk membungkus teks dan perataan gambar.

1. Properti `float`

Properti float memungkinkan elemen untuk “mengapung” ke kiri atau kanan, memungkinkan teks dan elemen lainnya untuk mengelilinginya.

Contoh:

img {
  float: left;
  margin-right: 10px;
}

Dalam contoh ini, gambar akan mengapung ke kiri wadahnya, dan teks berikutnya akan membungkus sisi kanan gambar. margin-right menambahkan sedikit ruang antara gambar dan teks.

Clearfix: Elemen yang mengapung kadang-kadang dapat mengganggu tata letak wadah induknya. Untuk memperbaikinya, digunakan teknik clearfix:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Ini memastikan bahwa wadah induk membungkus anak-anak yang mengapung dengan benar.

Kapan Digunakan: Float masih berguna untuk membungkus teks di sekitar gambar atau konten inline lainnya, tetapi umumnya harus dihindari untuk tata letak yang kompleks demi Flexbox atau Grid.

Flexbox

Flexbox (Flexible Box Layout) adalah sistem tata letak satu dimensi yang kuat yang memungkinkan Anda mengatur item dalam baris atau kolom. Flexbox menyederhanakan pembuatan tata letak di mana Anda perlu menyelaraskan, mendistribusikan, atau menyesuaikan secara dinamis dengan ruang yang tersedia.

1. Mengatur Flexbox

Untuk menggunakan Flexbox, Anda menerapkan display: flex ke elemen wadah. Semua anak langsung dari wadah tersebut menjadi flex items.

Contoh:

.container {
  display: flex;
}

2. Sumbu Utama dan Sumbu Silang

Sumbu Utama: Sumbu utama di mana flex items ditempatkan. Secara default, ini horizontal (dari kiri ke kanan).
Sumbu Silang: Sumbu yang tegak lurus dengan sumbu utama (secara default, vertikal).

Anda dapat mengubah arah sumbu utama menggunakan properti flex-direction:

.container {
  flex-direction: row; /* Default: baris horizontal */
}

.container-vertical {
  flex-direction: column; /* Tata letak vertikal */
}

3. Menyelaraskan dan Mendistribusikan Item

Flexbox menyediakan properti untuk mengontrol bagaimana item diselaraskan dan didistribusikan di sepanjang sumbu utama dan silang.

justify-content: Menyelaraskan item di sepanjang sumbu utama (secara default, horizontal).
```
.container {
  justify-content: center; /* Menyelaraskan item secara horizontal */
}
```
Nilai meliputi:
- flex-start: Menyelaraskan item ke awal sumbu utama.
- center: Menyelaraskan item di tengah sumbu utama.
- space-between: Mendistribusikan item dengan jarak yang sama di antara mereka.
align-items: Menyelaraskan item di sepanjang sumbu silang (secara default, vertikal).
```
.container {
  align-items: stretch; /* Meregangkan item untuk mengisi sumbu silang */
}
```
Nilai meliputi:
- stretch: Meregangkan item untuk mengisi tinggi wadah.
- center: Menyelaraskan item di tengah sumbu silang.
- flex-start: Menyelaraskan item ke awal sumbu silang.
flex-wrap: Mengontrol apakah flex items harus dibungkus ke beberapa baris ketika mereka tidak muat dalam satu baris.
```
.container {
  flex-wrap: wrap;
}
```

4. Mengontrol Flex Items

flex-grow: Menentukan seberapa besar flex item harus tumbuh relatif terhadap flex item lainnya di dalam wadah.
```
.item {
  flex-grow: 1; /* Tumbuh untuk mengisi ruang yang tersedia */
}
```
flex-shrink: Mengontrol seberapa besar item harus menyusut jika ruang tidak cukup.
```
.item {
  flex-shrink: 1; /* Menyusut
```

jika diperlukan */ }


- **`flex-basis`**: Mengatur ukuran awal flex item sebelum tumbuh atau menyusut.
```css
.item {
  flex-basis: 200px; /* Item akan setidaknya selebar 200px */
}

Kapan Digunakan: Flexbox ideal untuk tata letak satu dimensi yang lebih sederhana seperti bilah navigasi, elemen yang dipusatkan, atau membuat grid yang fleksibel di mana item perlu menyesuaikan ukurannya secara dinamis.

Tata Letak Grid

CSS Grid Layout adalah sistem dua dimensi yang memberi Anda kontrol atas baris dan kolom. Ini lebih kuat daripada Flexbox untuk tata letak kompleks yang memerlukan penyelarasan di kedua sumbu.

1. Mengatur Grid Layout

Untuk membuat grid, Anda menerapkan display: grid ke elemen wadah dan mendefinisikan baris dan kolom menggunakan grid-template-rows dan grid-template-columns.

Contoh:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 kolom: pertama dan terakhir sama, tengah dua kali lebih lebar */
  grid-template-rows: 100px 200px;   /* 2 baris: pertama 100px, kedua 200px */
}

fr: Satuan fraksional, di mana 1fr mewakili bagian dari ruang yang tersedia.

2. Menempatkan Grid Items

Anda dapat menempatkan item dalam sel grid tertentu menggunakan properti grid-column dan grid-row.

Contoh:

.item1 {
  grid-column: 1 / 3; /* Membentang dari kolom 1 hingga kolom 3 */
  grid-row: 1 / 2;    /* Membentang dari baris 1 hingga baris 2 */
}

3. Menyelaraskan Item dalam Grid

Tata letak grid menyediakan properti penyelarasan yang mirip dengan Flexbox, termasuk justify-items (untuk penyelarasan horizontal) dan align-items (untuk penyelarasan vertikal).

Contoh:

.container {
  justify-items: center;
  align-items: stretch;
}

Kapan Digunakan: CSS Grid sempurna untuk tata letak dua dimensi yang kompleks di mana Anda memerlukan kontrol atas baris dan kolom, seperti tata letak dasbor, galeri, atau desain di mana item perlu ditempatkan dengan presisi.

Dengan menguasai teknik penempatan dan tata letak CSS, Anda dapat mengontrol bagaimana elemen muncul dan berinteraksi di halaman web. Beberapa poin penting:

Penempatan: Statis, relatif, absolut, tetap, dan sticky memberi Anda kontrol atas bagaimana elemen ditempatkan atau dihapus dari alur dokumen.
Float: Meskipun jarang digunakan untuk tata letak saat ini, masih berguna untuk membungkus teks dan gambar yang mengapung.
Flexbox: Ideal untuk tata letak satu dimensi yang lebih sederhana di mana item perlu diselaraskan atau diubah ukurannya berdasarkan ruang yang tersedia.
Grid: Sistem tata letak dua dimensi yang kuat untuk tata letak yang lebih kompleks, menawarkan kontrol presisi atas baris dan kolom.

Setiap alat tata letak memiliki kekuatannya sendiri, dan memilih yang tepat bergantung pada kebutuhan desain spesifik Anda.

===============================================================================

6. Desain Responsif

Desain Responsif

Desain responsif memastikan tata letak situs web Anda beradaptasi dengan berbagai ukuran layar dan perangkat. Seiring dengan akses pengguna web melalui berbagai perangkat, mulai dari ponsel hingga monitor desktop besar, sangat penting untuk membuat halaman web Anda fleksibel dan responsif demi kenyamanan pengguna.

Teknik utama untuk mencapai desain responsif meliputi media queries, satuan responsif, dan meta tag viewport. Alat-alat ini bekerja sama untuk membuat tata letak dinamis dan dapat beradaptasi dengan berbagai ukuran layar.

Media Queries

Media queries adalah alat inti dalam CSS untuk membangun tata letak responsif. Mereka memungkinkan Anda menerapkan gaya yang berbeda berdasarkan karakteristik perangkat yang digunakan untuk melihat halaman, seperti lebar, tinggi, atau bahkan orientasi layar. Ini memungkinkan Anda menyesuaikan desain untuk ukuran layar atau breakpoint tertentu.

Cara Kerja Media Queries

Media queries bekerja dengan mendefinisikan kondisi di mana blok aturan CSS tertentu akan diterapkan. Anda menentukan fitur media (seperti lebar viewport), dan jika kondisinya terpenuhi, gaya CSS di dalam media query akan diterapkan.

Struktur dasar dari sebuah media query:

@media only screen and (min-width: 600px) {
  /* Gaya untuk perangkat dengan lebar minimum 600px */
  body {
    background-color: lightblue;
  }
}

Dalam contoh ini:

Jika lebar viewport adalah 600px atau lebih, warna latar belakang elemen <body> akan diatur menjadi biru muda.

Media Queries Umum untuk Breakpoints

Saat membuat situs web responsif, Anda biasanya menentukan aturan CSS yang berbeda untuk beberapa breakpoint umum. Breakpoints adalah lebar layar tertentu di mana tata letak perlu diubah agar tampilan optimal.

Contoh breakpoint:

Mobile: Hingga 600px
Tablet: 600px hingga 1024px
Desktop: Di atas 1024px

Berikut contoh cara menggunakan media queries untuk mengubah tata letak pada breakpoint ini:

/* Gaya dasar (untuk mobile terlebih dahulu) */
body {
  font-size: 16px;
}

/* Gaya untuk tablet */
@media (min-width: 600px) {
  body {
    font-size: 18px;
  }
}

/* Gaya untuk desktop */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

Dalam contoh ini:

Ukuran font dasar adalah 16px (ini adalah pendekatan desain mobile-first).
Ketika viewport adalah 600px atau lebih lebar (ukuran tablet), ukuran font meningkat menjadi 18px.
Ketika viewport adalah 1024px atau lebih lebar (ukuran desktop), ukuran font menjadi 20px.

Fitur Media Query

Selain lebar layar, media queries memungkinkan Anda menargetkan fitur lain dari perangkat:

Orientasi: Mendeteksi apakah perangkat dalam mode potret atau lanskap.

@media (orientation: landscape) {
  body {
    background-color: green;
  }
}

Resolusi: Menargetkan perangkat berdasarkan resolusi layar (misalnya, layar Retina).
```
@media (min-resolution: 2dppx) {
  img {
    width: 100%;
  }
}
```

Rasio Aspek: Menargetkan perangkat berdasarkan rasio lebar-tinggi.

@media (min-aspect-ratio: 16/9) {
  .video-container {
    height: 50vh;
  }
}

Satuan untuk Responsivitas

Memilih satuan yang tepat adalah kunci untuk membuat tata letak responsif. Ada dua jenis satuan utama dalam CSS: satuan tetap seperti px, dan satuan relatif seperti em, rem, vw, dan vh. Sementara px bersifat tetap dan absolut, satuan relatif beradaptasi dengan viewport atau ukuran font, menjadikannya penting untuk desain responsif.

1. Satuan Tetap: `px`

Piksel (px) adalah satuan absolut, artinya mereka tetap dan tidak skala dengan viewport. Misalnya, jika Anda mengatur lebar elemen menjadi 200px, elemen tersebut akan selalu selebar 200 piksel, terlepas dari ukuran layar.

Contoh:

div {
  width: 300px;
}

Lebar ini akan tetap konstan pada semua perangkat, yang dapat menyebabkan masalah tata letak pada layar yang lebih kecil, membuat satuan tetap kurang ideal untuk desain responsif.

2. Satuan Relatif: `em`, `rem`

em: Relatif terhadap ukuran font elemen induk. Misalnya, jika ukuran font elemen induk adalah 16px, mengatur elemen menjadi 1.5em akan membuat ukurannya menjadi 1.5 * 16px = 24px.

Contoh:
```
p {
  font-size: 1.5em; /* 1,5 kali ukuran font elemen induk */
}
```
rem: Relatif terhadap ukuran font elemen akar (html). Ini membuat rem lebih dapat diprediksi dibandingkan em, karena ukuran font elemen akar biasanya tetap konstan di seluruh dokumen.

Contoh:
```
p {
  font-size: 2rem; /* 2 kali ukuran font elemen akar (biasanya 16px) */
}
```
Kapan Digunakan: em dan rem sangat berguna untuk tipografi dalam desain responsif. Menggunakan satuan ini membuat ukuran font dan dimensi elemen skala relatif terhadap pengaturan dasar pengguna, membuat desain Anda lebih adaptif.

3. Satuan Viewport: `vw`, `vh`

Satuan berbasis viewport (vw, vh) sangat berguna untuk tata letak responsif, karena mereka memungkinkan Anda mengukur elemen relatif terhadap ukuran viewport.

vw (viewport width): 1vw adalah 1% dari lebar viewport.
vh (viewport height): 1vh adalah 1% dari tinggi viewport.

Contoh:

div {
  width: 50vw; /* 50% dari lebar viewport */
  height: 100vh; /* Tinggi penuh dari viewport */
}

Dalam contoh ini:

Lebar div akan menjadi 50% dari lebar browser saat ini.
Tinggi div akan selalu mengambil 100% dari tinggi browser saat ini.

Satuan ini sangat berguna untuk bagian halaman penuh atau wadah gambar responsif.

4. Persentase (`%`)

Persentase (%) bersifat relatif terhadap ukuran elemen induk. Mereka sangat berguna untuk menciptakan tata letak yang fleksibel dan cair yang menyesuaikan berdasarkan ukuran kontainer.

Contoh:

div {
  width: 80%; /* 80% dari lebar elemen induk */
}

Dalam contoh ini, div akan selalu menempati 80% dari lebar kontainer induknya, menjadikannya tata letak yang fleksibel yang menyesuaikan dengan ukuran induk.

Meta Tag Viewport

Meta tag viewport sangat penting untuk membuat halaman web Anda responsif di perangkat seluler. Tanpa tag ini, browser akan merender halaman dengan lebar tata letak tetap, yang biasanya diatur ke lebar viewport desktop (sekitar 980px), terlepas dari ukuran layar yang sebenarnya.

Untuk memastikan situs web Anda diskalakan dengan benar pada perangkat seluler, Anda perlu menyertakan meta tag viewport dalam bagian <head> HTML Anda:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Penjelasan:

width=device-width: Ini mengatur lebar halaman sesuai dengan lebar layar perangkat.
initial-scale=1.0: Ini mengatur level zoom awal ke 1.0 (tanpa zoom), sehingga halaman tidak diperbesar atau diperkecil saat pertama kali dimuat.

Mengapa Ini Penting:

Tanpa meta tag viewport, browser seluler akan mengecilkan situs web Anda agar sesuai dengan viewport virtual yang lebih besar. Ini bisa membuat situs web Anda sulit dibaca atau dioperasikan pada layar yang lebih kecil.
Dengan tag viewport, situs web Anda diskalakan dengan benar untuk pengguna seluler, memastikan bahwa font, tombol, dan elemen lainnya dapat dibaca dan digunakan tanpa perlu zoom atau menggulir berlebihan.

Contoh Desain Responsif: Menggabungkan Semua

Mari kita gabungkan semuanya dengan contoh yang menggunakan media queries, satuan viewport, dan satuan responsif untuk membuat desain responsif sederhana:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Gaya dasar (mobile-first) */
    body {
      font-size: 1rem; /* 16px secara default */
      padding: 10px;
    }

    h1 {
      font-size: 2rem; /* 32px */
      color: darkblue;
    }

    .container {
      width:

 90%; /* 90% dari lebar viewport */
      margin: 0 auto;
      padding: 20px;
      background-color: lightgray;
    }

    /* Gaya untuk tablet */
    @media (min-width: 600px) {
      body {
        font-size: 1.2rem; /* Sedikit lebih besar untuk tablet */
      }

      .container {
        width: 70%; /* Lebar lebih sedikit untuk tablet */
      }
    }

    /* Gaya untuk desktop */
    @media (min-width: 1024px) {
      body {
        font-size: 1.5rem; /* Ukuran font lebih besar untuk desktop */
      }

      .container {
        width: 50%; /* Lebih sempit untuk desktop */
      }
    }
  </style>
</head>
<body>
  <h1>Contoh Desain Responsif</h1>
  <div class="container">
    <p>Ini adalah tata letak responsif yang menyesuaikan berdasarkan ukuran layar.</p>
  </div>
</body>
</html>

Cara Kerjanya:

Desain mobile-first: Gaya dasar dirancang untuk layar kecil terlebih dahulu.
Media queries: Tata letak menyesuaikan untuk layar yang lebih besar (tablet dan desktop) menggunakan breakpoint.
Satuan viewport: .container menggunakan lebar persentase (%), yang beradaptasi dengan ukuran viewport, menjadikannya cair.
Meta tag viewport: Memastikan bahwa situs web dirender dengan benar pada perangkat seluler.

Desain responsif sangat penting untuk pengembangan web modern, karena memastikan situs web Anda bekerja dengan baik di semua perangkat, dari ponsel kecil hingga monitor desktop besar. Dengan menggabungkan media queries, satuan relatif (seperti em, rem, vw, vh), dan meta tag viewport, Anda dapat menciptakan desain yang fleksibel dan ramah pengguna yang beradaptasi dengan berbagai ukuran layar.

===============================================================================

7. Pseudo-Kelas dan Pseudo-Elemen dalam CSS

Pseudo-Kelas

Pseudo-kelas digunakan untuk mendefinisikan keadaan khusus dari sebuah elemen. Pseudo-kelas menargetkan elemen berdasarkan keadaan atau interaksi pengguna (seperti mengarahkan kursor di atas tombol) dan memungkinkan penataan dinamis tanpa perlu JavaScript. Mereka selalu dimulai dengan satu titik dua (:).

Pseudo-Kelas Umum

:hover
- Fungsi: Menargetkan elemen saat pengguna mengarahkan mouse ke atasnya.
- Penggunaan: Sering digunakan untuk tombol, tautan, atau elemen interaktif lainnya untuk memberikan umpan balik visual saat di-hover.
Contoh:
```
button:hover {
  background-color: lightblue;
}
```
Dalam contoh ini, saat pengguna mengarahkan kursor di atas elemen <button>, warna latar belakangnya berubah menjadi biru muda.
:focus
- Fungsi: Menargetkan elemen saat elemen tersebut mendapatkan fokus, biasanya ketika pengguna mengklik atau menekan tab pada input field atau tombol.
- Penggunaan: Sering digunakan untuk input field dan elemen formulir untuk memberikan umpan balik bahwa elemen tersebut aktif.
Contoh:
```
input:focus {
  border-color: green;
}
```
Dalam contoh ini, saat sebuah input field (<input>) mendapatkan fokus (misalnya, diklik atau dipilih melalui tab), warna border-nya berubah menjadi hijau.
:nth-child()
- Fungsi: Memilih elemen berdasarkan posisinya di dalam elemen induk, menggunakan rumus tertentu.
- Penggunaan: Berguna untuk menata baris tertentu dalam tabel, daftar, atau elemen berulang lainnya.
Contoh:
```
tr:nth-child(even) {
  background-color: #f2f2f2;
}
```
Dalam contoh ini, setiap baris bernomor genap (<tr>) dalam tabel akan memiliki latar belakang berwarna abu-abu muda.

Anda juga dapat menggunakan nth-child() dengan rumus:
```
li:nth-child(3n) {
  color: red;
}
```
Ini akan menata setiap elemen <li> ketiga dalam daftar, mengubah warna teksnya menjadi merah.
:nth-of-type()
- Fungsi: Mirip dengan :nth-child(), tetapi hanya memilih elemen dari tipe tertentu di dalam induknya.
- Penggunaan: Berguna untuk menargetkan elemen dari tipe tertentu (misalnya hanya elemen <p>, mengabaikan elemen lain seperti <div> atau <ul>).
Contoh:
```
p:nth-of-type(2) {
  font-weight: bold;
}
```
Ini akan membuat elemen <p> kedua di dalam induknya menjadi tebal, tanpa memperhitungkan elemen lain seperti <div> atau <span>.
:first-child
- Fungsi: Memilih anak pertama dari elemen induk.
- Penggunaan: Digunakan saat Anda ingin menerapkan gaya yang berbeda pada item pertama dalam daftar atau paragraf pertama dalam sebuah bagian.
Contoh:
```
p:first-child {
  font-size: 20px;
}
```
Ini akan memperbesar ukuran font dari paragraf pertama di dalam kontainer induknya.
:last-child
- Fungsi: Memilih anak terakhir dari elemen induk.
- Penggunaan: Berguna saat Anda perlu menata item terakhir dalam daftar atau kontainer.
Contoh:
```
li:last-child {
  font-weight: bold;
}
```
Ini akan membuat elemen <li> terakhir dalam daftar menjadi tebal.
:checked
- Fungsi: Menargetkan kotak centang atau tombol radio yang dicentang.
- Penggunaan: Sering digunakan dalam formulir untuk menerapkan gaya yang berbeda saat kotak centang atau tombol radio dipilih.
Contoh:
```
input:checked {
  outline: 2px solid green;
}
```
Ini akan menambahkan outline berwarna hijau pada elemen input (seperti kotak centang atau tombol radio) yang dicentang.
:disabled
- Fungsi: Menargetkan elemen (biasanya input formulir) yang dinonaktifkan dan tidak dapat diinteraksi.
- Penggunaan: Digunakan untuk membedakan secara visual elemen formulir yang dinonaktifkan.
Contoh:
```
button:disabled {
  background-color: gray;
  cursor: not-allowed;
}
```
Dalam contoh ini, tombol yang dinonaktifkan akan memiliki latar belakang abu-abu dan kursor akan berubah untuk menunjukkan bahwa tombol tersebut tidak dapat diklik.

Pseudo-Elemen

Pseudo-elemen digunakan untuk menata bagian tertentu dari sebuah elemen. Berbeda dengan pseudo-kelas yang menargetkan keadaan seluruh elemen, pseudo-elemen memungkinkan Anda menata bagian dari elemen, seperti huruf pertama, baris pertama, atau konten sebelum/setelah elemen. Pseudo-elemen selalu ditulis dengan dua titik dua (::), meskipun versi lama CSS mendukung satu titik dua (:).

Pseudo-Elemen Umum

::before
- Fungsi: Menyisipkan konten sebelum konten asli elemen.
- Penggunaan: Sering digunakan untuk menambahkan elemen dekoratif atau ikon sebelum elemen.
Contoh:
```
h1::before {
  content: "🌟";
  margin-right: 10px;
}
```
Dalam contoh ini, emoji bintang disisipkan sebelum setiap elemen <h1>, dengan margin untuk memisahkannya dari teks judul.
::after
- Fungsi: Menyisipkan konten setelah konten asli elemen.
- Penggunaan: Biasanya digunakan untuk menambahkan teks tambahan, ikon, atau konten dekoratif lainnya setelah elemen.
Contoh:
```
h1::after {
  content: "🌟";
  margin-left: 10px;
}
```
Ini akan menambahkan emoji bintang setelah setiap elemen <h1>, dengan sedikit jarak antara teks dan emoji.
::first-letter
- Fungsi: Menargetkan huruf pertama dari elemen blok (seperti paragraf atau judul).
- Penggunaan: Biasanya digunakan untuk tipografi dekoratif, seperti membuat huruf awal besar di awal paragraf.
Contoh:
```
p::first-letter {
  font-size: 3em;
  font-weight: bold;
  color: red;
}
```
Ini akan menata huruf pertama dari setiap paragraf (<p>) agar lebih besar, tebal, dan berwarna merah, mirip dengan efek “drop cap”.
::first-line
- Fungsi: Menargetkan baris pertama dari elemen blok.
- Penggunaan: Berguna untuk menata baris pertama dari paragraf atau judul agar lebih menonjol dari teks lainnya.
Contoh:
```
p::first-line {
  font-weight: bold;
  text-transform: uppercase;
}
```
Ini akan membuat baris pertama dari setiap paragraf menjadi tebal dan menggunakan huruf kapital.
::selection
- Fungsi: Menata bagian teks yang dipilih pengguna (disorot).
- Penggunaan: Memungkinkan Anda menyesuaikan warna latar belakang atau warna teks saat pengguna menyorot teks dengan mouse.
Contoh:
```
::selection {
  background-color: yellow;
  color: black;
}
```
Ini akan membuat teks yang dipilih memiliki latar belakang kuning dan teks hitam, menggantikan warna pilihan default (biasanya biru dan putih).

Menggabungkan Pseudo-Kelas dan Pseudo-Elemen

Anda dapat menggabungkan pseudo-kelas dan pseudo-elemen untuk mencapai gaya yang lebih spesifik.

Contoh:

p:first-child::first-letter {
  font-size: 2em;
  color: blue;
}

Dalam contoh ini:

Pseudo-kelas first-child memilih paragraf (<p>) pertama di dalam induknya.
Pseudo-elemen first-letter menata huruf pertama dari paragraf pertama, membuatnya berwarna biru dan dua kali ukuran font.

Kasus Penggunaan Praktis

Efek Hover pada Tautan
```
a:hover {
  color: red;
  text-decoration: underline;
}
```
- Ini menciptakan efek umpan balik visual untuk tautan saat pengguna mengarahkan kursor di atasnya dengan mengubah warna teks menjadi merah dan menggar

isbawahi tautan.

Efek Fokus pada Input Field
```
input:focus {
  border: 2px solid blue;
  background-color: #e0f7fa;
}
```
- Ketika pengguna mengklik atau memilih input field dengan tab, border field tersebut berubah menjadi biru dan warna latar belakangnya menjadi cyan muda.
Menambahkan Konten Dekoratif dengan ::before dan ::after
```
button::before {
  content: "✔️";
  margin-right: 5px;
}

button::after {
  content: "→";
  margin-left: 5px;
}
```
- Ikon centang disisipkan sebelum teks tombol, dan panah ditambahkan setelah teks tombol. Ini biasa digunakan untuk menata tombol dengan ikon tambahan.
Penyorotan Teks Kustom dengan ::selection
```
::selection {
  background-color: lightgreen;
  color: black;
}
```
- Ketika pengguna memilih teks di halaman, teks yang dipilih akan memiliki latar belakang hijau muda dan teks berwarna hitam, bukan warna pilihan default.

Pseudo-kelas digunakan untuk menerapkan gaya berdasarkan keadaan atau posisi elemen (seperti :hover, :focus, :nth-child()).
Pseudo-elemen memungkinkan Anda menata bagian dari sebuah elemen (seperti pseudo-elemen ::before, ::after, ::first-letter, dan ::first-line).

Alat-alat ini sangat kuat untuk menciptakan desain web yang interaktif, dinamis, dan estetis. Mereka memungkinkan Anda untuk melampaui penataan dasar dan memberikan pengguna umpan balik visual serta meningkatkan fungsionalitas tanpa perlu JavaScript.

===============================================================================

8. Spesifisitas CSS dan Pewarisan

Dalam bagian ini, kita akan membahas spesifisitas dan pewarisan dalam CSS, yang merupakan konsep penting untuk mengontrol bagaimana gaya diterapkan pada elemen.

Memahami spesifisitas dan pewarisan sangat penting untuk mengontrol bagaimana aturan CSS diterapkan ketika beberapa aturan konflik. Konsep ini membantu Anda memprediksi bagaimana browser memilih aturan CSS mana yang akan diterapkan pada sebuah elemen, terutama ketika aturan yang berbeda menargetkan elemen yang sama tetapi dengan selektor yang berbeda.

1. Spesifisitas CSS

Spesifisitas menentukan aturan CSS mana yang diterapkan oleh browser ketika beberapa aturan cocok dengan elemen yang sama. Spesifisitas CSS dihitung berdasarkan jenis selektor yang digunakan, dan semakin spesifik selektornya, semakin tinggi prioritasnya. Jika dua atau lebih aturan CSS diterapkan pada elemen yang sama, browser menggunakan spesifisitas untuk memutuskan aturan mana yang memiliki prioritas lebih tinggi.

Hierarki Spesifisitas

Spesifisitas CSS dihitung berdasarkan struktur hierarkis selektor. Semakin spesifik selektornya, semakin tinggi skor spesifisitasnya. Berikut ini cara perhitungan spesifisitas dalam empat kategori (atau “berat”):

Gaya inline (di dalam atribut style elemen)
ID (misalnya, #header)
Kelas, pseudo-kelas, dan atribut (misalnya, .button, :hover, [type="text"])
Selektor elemen (misalnya, div, p, h1), pseudo-elemen (misalnya, ::before, ::after)

Setiap kategori ini memiliki berat yang berbeda. Ketika browser menghitung spesifisitas, ia memberikan skor berdasarkan kategori-kategori ini:

Gaya inline: 1000
Selektor ID: 100
Selektor kelas, atribut, dan pseudo-kelas: 10
Selektor elemen dan pseudo-elemen: 1

Menghitung Spesifisitas

Mari kita lihat bagaimana spesifisitas dihitung berdasarkan selektor yang berbeda:

Contoh 1: Selektor Elemen

p {
  color: blue;
}

Skor spesifisitas: 0, 0, 0, 1
- 0 untuk gaya inline (tidak digunakan)
- 0 untuk selektor ID (tidak digunakan)
- 0 untuk selektor kelas (tidak digunakan)
- 1 untuk selektor elemen (p)

Contoh 2: Selektor Kelas

.button {
  color: red;
}

Skor spesifisitas: 0, 0, 1, 0
- 0 untuk gaya inline (tidak digunakan)
- 0 untuk selektor ID (tidak digunakan)
- 1 untuk selektor kelas (.button)
- 0 untuk selektor elemen (tidak digunakan)

Contoh 3: Selektor ID

#header {
  color: green;
}

Skor spesifisitas: 0, 1, 0, 0
- 0 untuk gaya inline (tidak digunakan)
- 1 untuk selektor ID (#header)
- 0 untuk selektor kelas (tidak digunakan)
- 0 untuk selektor elemen (tidak digunakan)

Contoh 4: Gaya Inline

<p style="color: purple;">Ini adalah paragraf.</p>

Skor spesifisitas: 1, 0, 0, 0
- 1 untuk gaya inline
- 0 untuk selektor ID (tidak digunakan)
- 0 untuk selektor kelas (tidak digunakan)
- 0 untuk selektor elemen (tidak digunakan)

Karena gaya inline memiliki skor spesifisitas tertinggi, mereka akan mengesampingkan aturan CSS eksternal atau internal, terlepas dari seberapa spesifik aturan tersebut.

Menggabungkan Selektor untuk Spesifisitas yang Lebih Tinggi

Ketika Anda menggabungkan selektor, spesifisitasnya akan bertambah.

Contoh 5: Selektor Ganda

div#content .button p {
  color: yellow;
}

Skor spesifisitas: 0, 1, 1, 2
- 0 untuk gaya inline
- 1 untuk selektor ID (#content)
- 1 untuk selektor kelas (.button)
- 2 untuk dua selektor elemen (div dan p)

Dalam contoh ini, spesifisitas aturan ini lebih tinggi daripada hanya #content atau hanya .button karena mereka digabungkan.

Saat Aturan Berkonflik

Jika beberapa aturan diterapkan pada elemen yang sama, browser membandingkan spesifisitas masing-masing aturan. Aturan dengan skor spesifisitas tertinggi akan menang. Jika dua aturan memiliki skor spesifisitas yang sama, browser akan menerapkan aturan yang terakhir muncul dalam file CSS (ini disebut cascading).

Contoh:

p {
  color: blue; /* Spesifisitas: 0, 0, 0, 1 */
}

p#intro {
  color: red; /* Spesifisitas: 0, 1, 0, 1 */
}

Untuk <p id="intro">, warna akan menjadi merah karena aturan kedua (p#intro) memiliki spesifisitas lebih tinggi karena menggunakan selektor ID.

2. Pewarisan dalam CSS

Pewarisan adalah konsep penting lain dalam CSS, di mana properti tertentu dari elemen secara otomatis diwarisi dari elemen induknya, sedangkan properti lainnya tidak.

Properti yang Diwarisi

Beberapa properti CSS secara alami diwariskan dari elemen induk ke elemen anaknya. Biasanya, ini adalah properti yang berhubungan dengan teks dan tata letak.

Properti yang umum diwariskan:

color: Warna teks dari elemen diwariskan oleh anak-anaknya.
font-family: Anak-anak akan mewarisi keluarga font yang sama dengan induknya.
font-size: Ukuran font akan diwarisi kecuali ditimpa.
line-height: Jarak antar baris teks diwarisi.
visibility: Jika induk disembunyikan (visibility: hidden), anak-anaknya juga akan disembunyikan.
text-align: Perataan teks (kiri, kanan, tengah) diwariskan.

Properti yang tidak diwariskan:

margin: Margin khusus untuk setiap elemen dan tidak diwariskan.
padding: Padding juga khusus untuk elemen individu.
border: Border tidak diwariskan dari elemen induk.
width dan height: Ini didefinisikan untuk setiap elemen secara individual.
background: Warna atau gambar latar belakang tidak diwariskan secara default.

Cara Memaksa Pewarisan

Terkadang, Anda mungkin ingin memaksa elemen untuk mewarisi properti dari induknya, meskipun properti tersebut biasanya tidak diwariskan. Anda dapat menggunakan kata kunci inherit untuk melakukan ini.

Contoh:

div {
  color: blue;
}

p {
  color: inherit; /* Memaksa paragraf mewarisi warna dari induknya */
}

Dalam kasus ini, jika elemen div induk memiliki warna biru, paragraf di dalamnya akan mewarisi warna biru tersebut.

Cara Mengganti Pewarisan

Jika Anda ingin menghentikan pewarisan atau menimpanya, cukup definisikan nilai baru untuk elemen anak. Misalnya, Anda dapat mengubah color atau font-size langsung pada elemen anak:

Contoh:

div {
  color: blue;
}

p {
  color: red; /* Ini menimpa warna biru yang diwariskan */
}

Di sini, meskipun div memiliki warna biru, paragraf di dalamnya akan berwarna merah karena memiliki warna yang ditetapkan secara eksplisit.

3. `!important` dalam Spesifisitas dan Pewarisan

Aturan !important dapat digunakan untuk menimpa semua aturan spesifisitas dan pewarisan lainnya. Ketika Anda menggunakan !important dengan properti CSS, properti tersebut akan selalu diterapkan, tidak peduli spesifisitas atau urutan aturannya.

Contoh:

p {
  color: blue !important;
}

#intro {
  color: red;
}

Meskipun #intro memiliki spesifisitas lebih tinggi, paragraf tetap akan berwarna biru karena aturan color: blue memiliki !important.

Namun, gunakan !important secara hati-hati, karena dapat membuat CSS Anda sulit untuk di-debug dan dipelihara, terutama ketika beberapa aturan !important bertentangan.

**Contoh Praktis: Menggabungkan Spesif

isitas dan Pewarisan**

Mari kita lihat skenario dunia nyata untuk menunjukkan bagaimana spesifisitas dan pewarisan bekerja bersama:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body {
      color: black;
    }

    .container {
      color: green;
    }

    #header {
      color: red;
    }

    p {
      color: blue;
    }

    .container p {
      color: orange;
    }
  </style>
</head>
<body>
  <div id="header">
    <p>Ini adalah paragraf merah (selektor ID menang).</p>
  </div>
  
  <div class="container">
    <p>Ini adalah paragraf oranye (selektor kelas + elemen menang).</p>
  </div>
  
  <p>Ini adalah paragraf biru (selektor elemen menang).</p>
</body>
</html>

Penjelasan:

Paragraf pertama berada di dalam elemen #header, sehingga akan berwarna merah, meskipun p berwarna biru. Selektor ID memiliki spesifisitas lebih tinggi.
Paragraf kedua berada di dalam .container, sehingga akan berwarna oranye karena .container p memiliki spesifisitas lebih tinggi daripada hanya p.
Paragraf ketiga diatur oleh selektor elemen p, sehingga akan berwarna biru.
Spesifisitas: Menentukan aturan CSS mana yang diterapkan ketika beberapa aturan menargetkan elemen yang sama. Ini dihitung berdasarkan jenis selektor yang digunakan (gaya inline > selektor ID > selektor kelas > selektor elemen).
Pewarisan: Properti tertentu (seperti color dan font-family) diwariskan dari elemen induk secara default, sedangkan yang lain (seperti margin dan width) tidak.
Gunakan !important secara hati-hati untuk memaksa sebuah aturan memiliki prioritas lebih tinggi.
Memahami dan mengontrol spesifisitas dan pewarisan memastikan Anda dapat secara efektif mengelola penerapan gaya dan menyelesaikan konflik dalam CSS Anda.

===============================================================================

9. Transisi CSS dan Animasi Keyframe CSS

Transisi dan Animasi Keyframe CSS adalah dua alat yang kuat dalam CSS untuk menciptakan efek visual yang halus dan dinamis. Fitur-fitur ini memungkinkan Anda menganimasikan properti elemen HTML, meningkatkan pengalaman pengguna, dan menambahkan sentuhan visual yang menarik dalam desain web Anda.

Transisi CSS

Transisi memungkinkan Anda mengubah nilai properti CSS secara halus dalam durasi tertentu. Ini sering digunakan untuk menganimasi perubahan keadaan sederhana, seperti ketika pengguna mengarahkan kursor ke tombol atau mengklik sebuah elemen.

1. Cara Kerja Transisi CSS

Transisi terjadi antara dua keadaan dari sebuah elemen. Misalnya, jika elemen berubah dari satu warna latar belakang ke warna lain, Anda dapat menggunakan transisi untuk membuat perubahan tersebut terjadi secara bertahap selama periode waktu tertentu, bukan langsung secara instan.

Sintaks dasar untuk transisi cukup sederhana. Ini melibatkan spesifikasi:

Properti yang akan ditransisikan (misalnya, background-color, opacity, transform).
Durasi transisi (misalnya, 0.5s untuk setengah detik).
Fungsi timing opsional (misalnya, ease, linear) yang mengontrol kecepatan transisi.
Penundaan opsional sebelum transisi dimulai.

Sintaks dasar:

selector {
  transition: property duration timing-function delay;
}

Berikut contoh transisi warna dasar pada tombol ketika diarahkan:

button {
  background-color: blue;
  color: white;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: green;
}

Dalam contoh ini:

Warna latar belakang tombol berubah dari biru menjadi hijau saat diarahkan.
Transisi berlangsung selama 0.3s dan menggunakan fungsi ease-in-out (yang dimulai lambat, dipercepat, lalu melambat lagi).

2. Properti Transisi

Ada empat properti utama yang bisa Anda tentukan untuk transisi:

transition-property: Menentukan properti CSS mana yang akan berubah (misalnya, width, color, opacity).
```
transition-property: background-color;
```
transition-duration: Mendefinisikan berapa lama transisi berlangsung (misalnya, 0.5s untuk setengah detik).
```
transition-duration: 0.5s;
```
transition-timing-function: Mendefinisikan bagaimana keadaan transisi dihitung. Nilai yang paling umum digunakan adalah:
- ease (default): Dimulai lambat, dipercepat, lalu melambat.
- linear: Menjaga kecepatan yang sama sepanjang transisi.
- ease-in: Dimulai lambat dan dipercepat pada akhir.
- ease-out: Dimulai cepat dan melambat di akhir.
- ease-in-out: Menggabungkan ease-in dan ease-out.
Contoh:
```
transition-timing-function: ease-in-out;
```
transition-delay: Menambahkan penundaan sebelum transisi dimulai (misalnya, 1s untuk penundaan satu detik).
```
transition-delay: 1s;
```

3. Transisi dalam Bentuk Singkat

Anda bisa menggabungkan semua properti ini menjadi satu pernyataan singkat transition untuk pemrograman yang lebih ringkas. Berikut contohnya:

button {
  background-color: blue;
  transition: background-color 0.5s ease-in-out 0.2s;
}

Versi singkat ini menentukan bahwa warna latar belakang akan bertransisi selama 0.5s, menggunakan fungsi ease-in-out, dengan penundaan 0.2s sebelum transisi dimulai.

4. Mentransisikan Beberapa Properti Sekaligus

Anda bisa mentransisikan beberapa properti sekaligus dengan memisahkan mereka dengan koma:

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 0.5s, height 0.5s, background-color 0.3s ease-in;
}

div:hover {
  width: 200px;
  height: 200px;
  background-color: green;
}

Dalam contoh ini:

Baik width dan height akan berubah selama 0.5s.
Warna latar belakang akan berubah selama 0.3s, menggunakan fungsi ease-in.

Animasi Keyframe CSS

Sementara transisi bagus untuk perubahan keadaan sederhana (misalnya, efek hover), animasi keyframe memungkinkan Anda membuat animasi yang lebih kompleks, multi-langkah dengan mendefinisikan poin spesifik (atau “keyframe”) selama animasi.

1. Mendefinisikan Animasi Keyframe dengan `@keyframes`

Animasi keyframe didefinisikan menggunakan aturan @keyframes. Aturan ini memungkinkan Anda untuk menentukan beberapa langkah dalam animasi, di mana setiap langkah mewakili tahapan berbeda dari keadaan elemen selama animasi.

Struktur dasar animasi keyframe:

@keyframes nama-animasi {
  0% {
    /* Keadaan awal */
  }
  50% {
    /* Keadaan di tengah */
  }
  100% {
    /* Keadaan akhir */
  }
}

Persentase (0%, 50%, 100%) mewakili poin waktu selama animasi:

0% adalah keadaan awal.
100% adalah keadaan akhir.
Setiap persentase di antaranya mewakili keadaan menengah.

Contoh animasi keyframe sederhana:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

div {
  animation: fadeIn 2s ease-in-out;
}

Dalam contoh ini:

Animasi disebut fadeIn.
Animasi secara bertahap meningkatkan opacity dari 0 ke 1 (dari transparan hingga sepenuhnya terlihat).
Animasi berlangsung selama 2s dan menggunakan fungsi ease-in-out.

2. Menerapkan Animasi Keyframe

Setelah Anda mendefinisikan animasi keyframe menggunakan @keyframes, Anda dapat menerapkannya ke elemen menggunakan properti animation.

Sintaks dasar dari properti animation adalah:

selector {
  animation: nama-animasi durasi timing-function delay iteration-count direction fill-mode;
}

Properti Utama Animasi

animation-name: Nama animasi keyframe (didefinisikan menggunakan @keyframes).
```
animation-name: fadeIn;
```
animation-duration: Berapa lama animasi berlangsung (misalnya, 2s untuk dua detik).
```
animation-duration: 2s;
```
animation-timing-function: Mendefinisikan bagaimana animasi berkembang seiring waktu (misalnya, linear, ease-in, ease-out).
```
animation-timing-function: ease-in-out;
```
animation-delay: Menentukan penundaan sebelum animasi dimulai.
```
animation-delay: 1s;
```
animation-iteration-count: Mendefinisikan berapa kali animasi harus diulang. Anda dapat menentukan angka (misalnya, 2 untuk dua iterasi) atau menggunakan kata kunci infinite untuk membuatnya berulang tanpa henti.
```
animation-iteration-count: infinite;
```
animation-direction: Mengontrol apakah animasi harus dijalankan secara terbalik setelah setiap iterasi. Nilai umum meliputi:
- normal: Animasi berjalan maju setiap kali (default).
- reverse: Animasi berjalan mundur.
- alternate: Animasi bergantian antara maju dan mundur.
```
animation-direction: alternate;
```
animation-fill-mode: Mengontrol apa yang terjadi pada elemen ketika animasi tidak berjalan (sebelum dimulai dan setelah selesai). Nilai umum meliputi:
- none: Elemen tidak akan mempertahankan perubahan gaya dari animasi.
- forwards: Elemen akan mempertahankan gaya dari keyframe terakhir setelah animasi berakhir.
- backwards: Elemen akan menerapkan gaya dari keyframe pertama sebelum animasi dimulai.
- both: Elemen akan mempertahankan gaya dari keyframe pertama dan terakhir.
```
animation-fill-mode: forwards;
```

3. Contoh Animasi Keyframe

Berikut adalah contoh animasi keyframe yang lebih kompleks yang memindahkan kotak melintasi layar dan mengubah warna serta ukurannya:

@keyframes moveAndGrow {
  0% {
    left: 0;
    background-color: blue;
    width: 100px;
  }
  50% {
    left

: 200px;
    background-color: green;
    width: 150px;
  }
  100% {
    left: 400px;
    background-color: red;
    width: 100px;
  }
}

div {
  position: relative;
  animation: moveAndGrow 5s ease-in-out infinite alternate;
}

Dalam contoh ini:

Elemen div dimulai dari sisi kiri layar, mengubah warna latar belakang dan ukurannya, serta bergerak ke kanan selama 5s.
Animasi bergantian antara berjalan maju dan mundur (animation-direction: alternate), menciptakan efek bolak-balik.
Animasi berulang tanpa henti (animation-iteration-count: infinite).

4. Bentuk Singkat Animasi

Seperti pada transisi, Anda bisa menggabungkan beberapa properti animasi menjadi deklarasi singkat:

div {
  animation: moveAndGrow 5s ease-in-out 1s infinite alternate forwards;
}

Dalam contoh ini:

Animasi berlangsung selama 5s (animation-duration: 5s).
Menggunakan fungsi timing ease-in-out (animation-timing-function: ease-in-out).
Ada penundaan 1s sebelum animasi dimulai (animation-delay: 1s).
Animasi berulang tanpa henti (animation-iteration-count: infinite).
Animasi bergantian antara maju dan mundur (animation-direction: alternate).
Elemen mempertahankan gaya dari keyframe terakhir setelah animasi berakhir (animation-fill-mode: forwards).

Perbedaan Antara Transisi dan Animasi Keyframe

Fitur	Transisi	Animasi Keyframe
Use case	Perubahan sederhana antara dua keadaan (misalnya, efek hover)	Animasi kompleks, multi-langkah dengan kontrol detail
Cara dipicu	Dipicu oleh perubahan keadaan (misalnya, hover, klik)	Secara otomatis atau berulang setelah diterapkan
Kontrol langkah	Hanya keadaan awal dan akhir (tanpa langkah menengah)	Mendefinisikan langkah-langkah menengah menggunakan keyframe
Looping	Tidak ada dukungan bawaan untuk loop atau pengulangan	Mendukung loop dengan `animation-iteration-count`

Transisi sangat baik untuk animasi sederhana, satu langkah seperti efek hover atau perubahan keadaan, memberikan transisi halus antar keadaan. Animasi keyframe, di sisi lain, menawarkan lebih banyak kontrol dan fleksibilitas, memungkinkan Anda mendefinisikan animasi kompleks dengan beberapa langkah, loop, dan kontrol arah.

Dengan menggabungkan transisi dan animasi keyframe, Anda dapat menciptakan pengalaman pengguna yang sangat interaktif dan visual, menambahkan efek visual dinamis tanpa perlu JavaScript. Alat-alat ini penting untuk desain web modern, memungkinkan animasi halus dan interaksi pengguna yang lebih baik.

===============================================================================

10. Praktik Terbaik dalam Pengembangan CSS

Di bagian ini, kita akan membahas beberapa praktik terbaik dalam pengembangan CSS, yang berfokus pada cara menjaga kode tetap terstruktur, dapat digunakan kembali, dan efisien. Kita juga akan membahas CSS preprocessors dan CSS frameworks yang dapat mempercepat dan meningkatkan alur kerja pengembangan.

1. Prinsip DRY (Don’t Repeat Yourself)

Prinsip DRY—“Jangan Mengulangi Diri Sendiri”—adalah praktik pengembangan perangkat lunak yang bertujuan untuk mengurangi redundansi. Dalam CSS, menerapkan DRY berarti menulis kode yang bersih, modular, dan dapat digunakan kembali dengan meminimalkan pengulangan. Pendekatan ini membuat perawatan kode lebih mudah, meningkatkan keterbacaan, dan memperluas skalabilitas gaya Anda.

Cara Menerapkan Prinsip DRY dalam CSS

Modulasi Gaya Anda

Alih-alih mengulang gaya yang sama pada beberapa selektor, kelompokkan gaya yang sama ke dalam kelas atau selektor yang dapat digunakan kembali.

Sebelum (gaya yang berulang):

h1 {
  font-family: Arial, sans-serif;
  color: #333;
  margin-bottom: 10px;
}

h2 {
  font-family: Arial, sans-serif;
  color: #333;
  margin-bottom: 8px;
}

Setelah (gaya yang dimodulasi):

.heading {
  font-family: Arial, sans-serif;
  color: #333;
}

h1 {
  @extend .heading; /* Contoh SCSS untuk mewarisi gaya */
  margin-bottom: 10px;
}

h2 {
  @extend .heading;
  margin-bottom: 8px;
}

Dengan mengabstraksi gaya umum ke dalam kelas .heading, kode yang berulang dapat dikurangi, dan setiap perubahan di masa depan dapat dilakukan hanya pada satu tempat.

Gunakan Variabel CSS (Custom Properties)

Variabel CSS (diperkenalkan di CSS3) memungkinkan Anda mendefinisikan nilai-nilai yang dapat digunakan kembali untuk properti seperti warna, font, dan jarak, membuat kode Anda lebih fleksibel.

Contoh:
```
:root {
  --main-color: #3498db;
  --main-font: 'Arial', sans-serif;
}

h1 {
  color: var(--main-color);
  font-family: var(--main-font);
}

h2 {
  color: var(--main-color);
  font-family: var(--main-font);
}
```
Dengan menggunakan variabel, jika Anda ingin mengubah warna atau font utama, Anda hanya perlu memodifikasi variabel tersebut di satu tempat.

Mixin dalam Preprocessor (SCSS/LESS)

Jika Anda menggunakan preprocessor CSS seperti SCSS atau LESS (akan dibahas nanti), Anda bisa membuat mixin untuk menggunakan kembali blok gaya di berbagai selektor.

Contoh SCSS:

@mixin button-style {
  padding: 10px 20px;
  background-color: blue;
  border-radius: 5px;
}

.btn-primary {
  @include button-style;
  color: white;
}

.btn-secondary {
  @include button-style;
  background-color: gray;
  color: white;
}

Gunakan Properti Singkat

CSS menyediakan properti singkat untuk banyak aspek gaya, seperti margin, padding, border, dan background. Penggunaan properti singkat membuat kode Anda lebih ringkas dan mengurangi pengulangan.

Contoh:
```
/* Versi panjang */
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

/* Versi singkat */
margin: 10px;
```

2. CSS Preprocessors: SASS dan LESS

CSS preprocessors seperti SASS dan LESS memperluas kemampuan CSS dengan memungkinkan Anda menggunakan fitur seperti variabel, nesting, mixin, dan lainnya. Alat-alat ini dikompilasi menjadi CSS standar yang dapat diinterpretasikan oleh browser, namun menyediakan sintaks dan kemampuan tambahan selama pengembangan.

SASS (Syntactically Awesome Style Sheets)

SASS adalah salah satu CSS preprocessor paling populer. Ini menawarkan dua opsi sintaks: SCSS (Sassy CSS) dan sintaks SASS asli yang lebih indented. SCSS lebih banyak digunakan karena sepenuhnya kompatibel dengan CSS, yang berarti CSS yang valid juga merupakan SCSS yang valid.

Fitur Utama dari SASS:

Variabel
- SASS memungkinkan Anda mendefinisikan variabel untuk warna, font, ukuran, dan sebagainya, sehingga Anda dapat menggunakannya kembali di seluruh stylesheet.
Contoh:
```
$primary-color: #3498db;

body {
  color: $primary-color;
}
```

Nesting

Di SASS, Anda bisa melakukan nesting pada selektor Anda, memungkinkan pendekatan yang lebih terstruktur dan hierarkis untuk gaya Anda.

Contoh:

nav {
  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
    color: $primary-color;
  }
}

Mixins

Mixins memungkinkan Anda mendefinisikan blok gaya yang dapat digunakan kembali di berbagai tempat.

Contoh:

@mixin rounded-corners($radius: 5px) {
  border-radius: $radius;
}

.box {
  @include rounded-corners(10px);
}

Inheritance/Extends

SASS memungkinkan Anda membagikan satu set properti CSS dari satu selektor ke selektor lainnya dengan menggunakan direktif @extend.

Contoh:

.message {
  border: 1px solid black;
  padding: 10px;
  color: red;
}

.error {
  @extend .message;
  background-color: pink;
}

LESS (Leaner Style Sheets)

LESS adalah preprocessor CSS lain yang populer yang menawarkan fitur-fitur serupa dengan SASS, seperti variabel, nesting, dan mixin, tetapi dengan sintaks yang sedikit berbeda.

Fitur Utama dari LESS:

Variabel Contoh:

@primary-color: #3498db;

body {
  color: @primary-color;
}

Nesting Contoh:

nav {
  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
    color: @primary-color;
  }
}

Mixins

Mixins di LESS mirip dengan SASS mixins, tetapi menggunakan sintaks yang berbeda.

Contoh:

.rounded-corners(@radius: 5px) {
  border-radius: @radius;
}

.box {
  .rounded-corners(10px);
}

3. Framework CSS: Bootstrap dan Tailwind CSS

Framework CSS menyediakan komponen CSS modular yang sudah jadi, membantu Anda membangun website lebih cepat. Framework ini mencakup class yang telah ditentukan, sistem tata letak, dan fungsi utilitas untuk membantu pengembang menghindari penulisan gaya dari awal.

Bootstrap

Bootstrap adalah framework front-end yang komprehensif yang mencakup komponen CSS dan JavaScript untuk membangun website yang responsif. Ini menawarkan komponen yang sudah jadi (seperti navigation bars, tombol, formulir) dan sistem grid untuk menyederhanakan pembuatan tata letak.

Fitur Utama Bootstrap:

Sistem Grid Responsif

Bootstrap menggunakan sistem grid 12 kolom untuk membuat tata letak yang fleksibel dan responsif.

Contoh:

<div class="container">
  <div class="row">
    <div class="col-md-6">Kolom 1</div>
    <div class="col-md-6">Kolom 2</div>
  </div>
</div>

Komponen yang Sudah Jadi
- Bootstrap mencakup komponen siap pakai seperti modals, dropdowns, tooltips, carousels, dll.
Contoh:
```
<button class="btn btn-primary">Tombol Utama</button>
```
Utilitas Responsif
- Anda dapat menyembunyikan, menampilkan, atau menyesuaikan tampilan elemen berdasarkan ukuran layar menggunakan class utilitas.
Contoh:
```
<div class="d-none d-md-block">Hanya terlihat di desktop</div>
```
Tema yang Dapat Disesuaikan
- Bootstrap dapat dikustomisasi melalui SASS atau LESS, memungkinkan pengembang menyesuaikan tema default dengan memodifikasi variabel seperti warna, tipografi, dan jarak.

**Tailwind

CSS**

Tailwind CSS adalah framework utilitas-first yang menyediakan serangkaian besar class utilitas kecil dan dapat digunakan kembali untuk menata elemen Anda langsung di HTML, daripada menulis gaya kustom CSS.

Fitur Utama Tailwind CSS:

Pendekatan Utility-First
- Tailwind mempromosikan penataan dengan class utilitas seperti p-4 untuk padding, text-center untuk memusatkan teks, atau bg-blue-500 untuk latar belakang biru.
Contoh:
```
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">Tombol</button>
```
Varian Responsif dan Status
- Class utilitas Tailwind dapat dimodifikasi untuk diterapkan pada ukuran layar tertentu atau status seperti hover, focus, atau active.
Contoh:
```
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Tombol</button>
```
Kustomisasi
- Tailwind sangat dapat dikustomisasi. Anda dapat mendefinisikan palet warna, satuan jarak, font, dan banyak lagi dengan mengonfigurasi file konfigurasi Tailwind (tailwind.config.js).
Tidak Ada Komponen yang Sudah Jadi
- Tidak seperti Bootstrap, Tailwind tidak menyediakan komponen yang sudah jadi. Sebaliknya, ia memberikan class utilitas tingkat rendah yang memungkinkan fleksibilitas penuh dalam desain.
Berorientasi Kinerja
- Tailwind menggunakan PurgeCSS untuk menghapus gaya yang tidak terpakai dari CSS akhir, menghasilkan ukuran file yang lebih kecil dan optimal.

Praktik Terbaik dalam Penggunaan Framework dan Preprocessor CSS

Kombinasikan Framework dan Gaya Kustom dengan Preprocessor
- Jika Anda menggunakan framework seperti Bootstrap, pertimbangkan menggunakan preprocessor seperti SASS untuk menyesuaikan variabel framework (warna, font, dll.) dan untuk menghindari kode yang berulang. Ini memungkinkan Anda untuk memanfaatkan keuntungan dari keduanya.
Jaga Gaya Tetap Modular
- Atur file CSS atau SCSS Anda ke dalam komponen modular. Misalnya, buat file terpisah untuk tombol, formulir, dan tata letak. Ini membuat gaya Anda lebih mudah dikelola seiring dengan bertumbuhnya proyek Anda.
Contoh Struktur File SCSS:
```
/styles/
  /components/
    _buttons.scss
    _forms.scss
  /layout/
    _grid.scss
    _header.scss
  main.scss
```
Gunakan Class Utilitas untuk Prototipe Cepat
- Jika Anda perlu membangun tata letak atau prototipe dengan cepat, framework seperti Tailwind CSS dapat sangat efektif. Anda dapat menata elemen langsung di HTML, dan kemudian memfaktorkan ulang menjadi gaya yang lebih mudah dipelihara jika diperlukan.
Hapus CSS yang Tidak Digunakan
- Terutama saat menggunakan framework besar seperti Bootstrap, pastikan untuk menghapus class CSS yang tidak terpakai. Alat seperti PurgeCSS dapat membantu Anda memindai proyek untuk gaya yang tidak terpakai dan menghapusnya dari build akhir.

Prinsip DRY dalam CSS membantu mengurangi redundansi dengan menggunakan kembali kode, yang membuat stylesheet lebih mudah dipelihara dan skalabel.
CSS preprocessors seperti SASS dan LESS menyediakan fitur lanjutan seperti variabel, nesting, mixin, dan lainnya, membuat pengembangan CSS lebih cepat dan lebih kuat.
Framework CSS seperti Bootstrap dan Tailwind CSS menyediakan utilitas dan komponen yang telah ditentukan sebelumnya, memungkinkan Anda mempercepat pengembangan dan memastikan desain yang konsisten. Bootstrap menawarkan komponen siap pakai dan sistem grid, sedangkan Tailwind mempromosikan pendekatan utilitas dengan fleksibilitas tinggi dan kustomisasi.

Dengan menggabungkan alat-alat dan praktik terbaik ini, Anda dapat menciptakan desain web yang bersih, efisien, dan responsif yang mudah dipelihara serta diperluas seiring dengan bertumbuhnya proyek Anda.

Tags: #CSSBasics #DasarCSS #ResponsiveDesign #DesainResponsif #CSSSelectors #SelektorCSS #CSSAnimations #AnimasiCSS #HTMLandCSS #HTMLdanCSS #WebDesign #DesainWeb #CSSFlexbox #CSSGrid

Baca dalam Bahasa Indonesia

1. Introduction to CSS

2. CSS Selectors

3. CSS Properties and Values

4. Colors

5. Positioning and Layout

6. Responsive Design

7. Pseudo-classes and Pseudo-elements

8. CSS Specificity and Inheritance

9. CSS Animations and Transitions

10. Best Practices and Tools

Practical Examples

Example 1: Styling a Heading

Example 2: Flexbox Layout

Additional Resources:

1. Introduction to CSS

1. What is CSS?

2. How CSS Works

3. Including CSS in HTML

a. Inline CSS

b. Internal CSS

c. External CSS

Cascading and Priority of CSS

2. CSS Selectors

Basic Selectors

1. Element Selectors

2. Class Selectors

3. ID Selectors

Combinator Selectors

1. Descendant Selector

2. Child Selector

Attribute Selectors

1. Basic Attribute Selector

2. Presence Selector

3. Attribute Value Substring Selectors

Combining Selectors

CSS Specificity

Pseudo-classes and Pseudo-elements

1. Pseudo-classes

2. Pseudo-elements

3. CSS Properties and Values

Text and Font Styling

1. font-family

2. font-size

3. font-weight

4. color

5. text-align

6. line-height

Background Styling

1. background-color

2. background-image

Box Model

1. Content

2. Padding

3. Border

4. Margin

5. box-sizing Property

Width and Height

1. Fixed Units (Pixels and Points)

2. Flexible Units

Min and Max Width/Height

4. CSS Colors

Color Models in CSS

Using Color Models: Practical Considerations

CSS Color Usage Examples

Example 1: Text Color

Example 2: Background Color

Example 3: Transparent Overlay Using RGBA

Example 4: HSL for Saturation and Lightness Adjustments

5. Positioning and Layout

Positioning Elements

1. Static Positioning

2. Relative Positioning

3. Absolute Positioning

4. Fixed Positioning

5. Sticky Positioning

Floating Elements

1. float Property

Flexbox

1. Setting up Flexbox

1. `font-family`

2. `font-size`

3. `font-weight`

4. `color`

5. `text-align`

6. `line-height`

1. `background-color`

2. `background-image`

5. `box-sizing` Property

1. `float` Property

1. Fixed Units: `px`

2. Relative Units: `em`, `rem`

3. Viewport Units: `vw`, `vh`

4. Percentage (`%`)

3. `!important` in Specificity and Inheritance

1. Defining Keyframe Animations with `@keyframes`