Skip to content
Azril Hakim
LinkedInGitHub

CSS

Introduction to CSS

Cascading Style Sheets (CSS) is a stylesheet language used to control the presentation and layout of HTML documents. It allows you to define the visual appearance of your web pages, including colors, fonts, spacing, and more.

Inline vs. Internal vs. External CSS

  • Inline CSS: Inline styles are applied directly to individual HTML elements using the style attribute. While they are useful for quick styling, they can make your HTML code less maintainable when used extensively.

    Example of inline CSS:

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

  • Internal CSS: Internal styles are placed within the <style> element in the document’s <head>. They affect the entire page and are useful for small to medium-sized stylesheets.

    Example of internal CSS:

    <head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>This is a blue paragraph.</p>
</body>

  • External CSS: External styles are stored in separate CSS files (.css) and linked to your HTML document using the <link> element. This is the recommended approach for larger projects, as it keeps your HTML and CSS separate for better maintainability.

    Example of linking an external CSS file:

    <head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Adding CSS Styles to HTML Elements

To apply CSS styles to HTML elements, you need to use selectors and properties. Selectors target specific elements, while properties define the styling rules.

Example of using a selector and property:

/* CSS code in an external file (styles.css) */
p {
  color: green;
  font-size: 16px;
}

CSS Selectors and Properties

  • Selectors: CSS selectors are patterns used to select and style HTML elements. Some common selectors include:
    • Element Selector: Selects elements by their HTML tag name (e.g., p selects all paragraphs).
    • Class Selector: Selects elements with a specific class attribute (e.g., .highlight selects elements with class="highlight").
    • ID Selector: Selects a single element with a specific ID attribute (e.g., #header selects the element with id="header").
    • Descendant Selector: Selects elements that are descendants of a specific element (e.g., ul li selects all list items within unordered lists).
  • Properties: CSS properties define how selected elements should appear. Common properties include:
    • color: Specifies the text color.
    • font-size: Sets the font size.
    • margin, padding: Defines spacing around elements.
    • background-color: Sets the background color.
    • border: Defines borders around elements.

Here’s an example of CSS code that applies styles to various elements:

/* CSS code in an external file (styles.css) */
p {
  color: blue;
  font-size: 16px;
}

.highlight {
  background-color: yellow;
}

#header {
  font-size: 24px;
  margin-bottom: 20px;
}

Remember that CSS is a powerful tool for styling your HTML documents, and understanding how to use it effectively is crucial for creating visually appealing web pages.