5.1 Introduction to CSS & Basic Styling

  1. What is CSS?

    • Definition and Importance of CSS: CSS stands for Cascading Style Sheets. It is used to control the visual presentation of HTML elements. While HTML focuses on the structure and content, CSS handles how elements look on screen, in print, or other media formats.

    • Separation of Structure and Styling: By separating HTML and CSS, developers can maintain cleaner code, reuse styles across multiple pages, and enhance the overall flexibility of a website’s design.

  2. Three Ways to Insert CSS

    • Inline CSS: Styles are applied directly to HTML elements using the style attribute.

      // inline style color
<h1 style="color: blue;">This is a heading</h1>

      • Pros: Quick to apply for small styling changes.

      • Cons: Doesn't separate content from style, making it difficult to maintain.

  • Internal CSS: Styles are defined in the <head> section of the HTML document using the <style> tag.

     // CSS internal style color
 <style>
  h1 {
    color: blue;
  }
</style>

    • Pros: Keeps styling in one document, better for single-page websites.

    • Cons: Less efficient for larger websites.

  • External CSS: Styles are placed in a separate .css file and linked to the HTML document.

    // external style color
<link rel="stylesheet" href="styles.css">

    • Pros: Best for larger websites with multiple pages, allows for consistency and easier maintenance.

    • Cons: Requires managing multiple files.

  1. CSS Syntax

  • A CSS rule consists of a selector, followed by declarations in braces {}. Each declaration includes a property and a value, separated by a colon.

    // CSS 
selector {
  property: value;
}

    Example:

    h1 {
  color: blue;
  font-size: 24px;
}

  1. Basic Selectors

  • Type Selectors: Selects HTML elements by tag name.

    h1 {
  color: blue;
}

  • ID Selectors: Selects elements by their ID attribute, using the # symbol.

    #header {
  background-color: gray;
}

  • Class Selectors: Selects elements by their class attribute, using the . symbol.

    .paragraph {
  font-size: 16px;
}

  1. CSS Colors

  • Color Formats:

    • Predefined color names: CSS has over 140 predefined color names like red, blue, green, etc.

    • RGB (Red, Green, Blue): Uses numerical values to define a color.

      color: rgb(255, 0, 0); /* Red */

    • HEX (Hexadecimal): Uses hexadecimal values.

      color: #ff0000; /* Red */

    • HSL (Hue, Saturation, Lightness): Defines colors based on hue, saturation, and lightness.

      color: hsl(0, 100%, 50%); /* Red */

Advanced Selectors:

  1. Descendant Selector: Selects elements that are nested (descendants) within a specific element. This can target elements at any level inside the specified parent.

    div p {
  color: red;
}

    • In the above example, all <p> elements inside any <div> will be selected, regardless of how deeply nested they are.

  2. Child Selector (>): Selects only the direct children of a specified element. This is stricter than the descendant selector.

    div > p {
  color: green;
}

    • This will only select <p> elements that are directly inside a <div>. It will not select nested <p> elements that are deeper in the hierarchy.

  3. Adjacent Sibling Selector (+): Selects the element that is immediately next to (adjacent to) a specified element.

    h1 + p {
  color: orange;
}

    • This selects the first <p> element that comes immediately after an <h1> element, ignoring all other <p> elements not adjacent to an <h1>.

  4. General Sibling Selector (~): Selects all elements that are siblings of a specified element (not necessarily adjacent but still at the same level).

    h1 ~ p {
  color: purple;
}

    • This will select all <p> elements that are siblings of an <h1>, regardless of whether they are adjacent or further down the sibling list.

Pseudo-Classes:

Pseudo-classes are used to define a special state of an element, such as when it is hovered over or focused. They are preceded by a : in CSS.

  1. :hover: Selects an element when the user hovers their mouse over it.

    a:hover {
  color: red;
}

  2. :nth-child(n): Selects the nth child of a parent element. You can replace n with a number, odd, or even.

    li:nth-child(2) {
  font-weight: bold;
}

    • This selects the second <li> child of any parent element.

  3. :first-child: Selects the first child of a parent element.

    p:first-child {
  font-style: italic;
}

  4. :last-child: Selects the last child of a parent element.

    p:last-child {
  margin-bottom: 20px;
}

  5. :focus: Selects an element when it has focus, such as when a user clicks on a form input field.

    input:focus {
  border-color: blue;
}

  6. :not(selector): Selects all elements except the ones matching the specified selector.

    p:not(.highlight) {
  color: gray;
}

Pseudo-Elements:

Pseudo-elements allow you to style specific parts of an element, such as its first letter or line. They are preceded by :: in CSS.

  1. ::before: Inserts content before an element's actual content.

    h2::before {
  content: "► ";
  color: red;
}

    • This would insert a red arrow symbol before every <h2> element.

  2. ::after: Inserts content after an element's actual content.

    h2::after {
  content: " ▼";
  color: blue;
}

    • This would insert a blue down arrow after every <h2> element.

  3. ::first-letter: Selects the first letter of a text block and applies styling to it.

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

  4. ::first-line: Selects the first line of text in a block element.

    p::first-line {
  font-weight: bold;
}

Attribute Selectors:

Attribute selectors target elements based on their attributes and values.

  1. Basic Attribute Selector ([attribute]): Selects elements with a specific attribute, regardless of the attribute's value.

    [type] {
  border: 1px solid black;
}

    • This selects all elements with a type attribute (e.g., <input> elements).

  2. Attribute Value Selector ([attribute="value"]): Selects elements with a specific attribute and exact value.

    [type="text"] {
  background-color: yellow;
}

    • This will target only <input> elements where type="text".

  3. Attribute Value Contains Selector ([attribute*="value"]): Selects elements whose attribute value contains a specific substring.

    [class*="box"] {
  border: 2px solid blue;
}

    • This would select any element with a class name that contains the word "box" (e.g., box-container, box-item).

  4. Attribute Value Starts With Selector ([attribute^="value"]): Selects elements whose attribute value starts with a specific substring.

    [href^="https"] {
  color: green;
}

    • This selects all links (<a>) whose href attribute starts with "https".

  5. Attribute Value Ends With Selector ([attribute$="value"]): Selects elements whose attribute value ends with a specific substring.

    [href$=".pdf"] {
  color: red;
}

    • This would select all links (<a>) whose href attribute ends with ".pdf", often used to highlight links to PDF files.

Summary Table of Selectors

Selector Type
Example
Description

Class Selector

.example-class

Selects elements with the specified class.

ID Selector

#example-id

Selects the element with the specified ID.

Type Selector

p

Selects all <p> elements.

Descendant

div p

Selects <p> elements inside <div>.

Child

div > p

Selects direct child <p> elements of <div>.

Adjacent Sibling

h1 + p

Selects <p> elements immediately after <h1>.

General Sibling

h1 ~ p

Selects all sibling <p> elements after <h1>.

Pseudo-Class

a:hover

Selects <a> elements when hovered.

Pseudo-Element

p::first-letter

Selects the first letter of each <p>.

Attribute Selector

[type="text"]

Selects inputs with type="text".

These selectors enable powerful and precise control over the styling of HTML elements, allowing you to apply styles based on their relationships, attributes, and states.

PreviousLecture_5_Introduction to CSS & Basic StylingNext5.2 Student Activity

Last updated