CSS Notes

on
Index

  1. What is CSS?
  2. Basics selector in CSS 
  3. Combination selector in CSS
  4. Advanced Selector in CSS

Introduction to CSS

What is CSS?

CSS, which stands for Cascading Style Sheet, is a stylesheet language used to describe the look and formatting of a document written in HTML (Hypertext Markup Language). While HTML provides the structure and content of a web page, CSS allows you to control the presentation, including layout, colors, fonts, and spacing.

Think of CSS as the designer of your website. It defines how your web content should be displayed, ensuring it's not just functional but also aesthetically pleasing.

Styling with CSS

CSS enables web developers and designers to apply styles to HTML elements. These styles can range from simple changes, like changing the font size, to complex layouts and animations. CSS empowers you to create visually engaging web pages that resonate with your target audience.

Properties and Values

CSS consists of a wide array of properties and values that can be applied to HTML elements. Some common properties include:

  • color: Sets the text color.
  • font-family: Specifies the font used for text.
  • margin: Controls the spacing around an element.
  • padding: Determines the space between an element's content and its border.

Values are assigned to properties to define the specific styling. For example:

p {
  color: blue;
  font-family: Arial, sans-serif;
  margin: 10px;
  padding: 20px;
}

In this example, the CSS rule targets all <p> elements and applies a blue color, Arial or sans-serif font, 10px margin, and 20px padding.

CSS Inclusion

CSS can be included in your web project in several ways, depending on your needs and the level of organization you desire.

1. Inline CSS

Inline CSS is added directly to individual HTML elements using the style attribute. While this method provides the most specific control over styling, it is not recommended for large-scale projects due to its lack of reusability and maintainability.

<p style="color: red; font-size: 16px;">This is some text with inline CSS.</p>

2. Internal CSS

Internal CSS is placed within the <style> element in the <head> section of an HTML document. This method allows you to define styles that apply to a single HTML page. While more organized than inline CSS, it is still limited in terms of reusability across multiple pages.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This is some text with internal CSS.</p>
</body>
</html>

3. External CSS

External CSS is the most recommended and efficient method for styling web pages. In this approach, CSS rules are defined in separate .css files and linked to HTML documents using the <link> element. This promotes reusability and easier maintenance across multiple pages.

styles.css:

/* styles.css */
p {
  color: purple;
  font-size: 20px;
}

index.html:

html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>This is some text with external CSS.</p>
</body>
</html>

4. Comments in CSS

Just like in HTML and other programming languages, you can add comments in CSS to provide explanations or reminders within your code. CSS comments are not displayed on the web page but are useful for documenting your styles.

/* This is a CSS comment */
p {
  color: orange; /* This sets the text color to orange */
  font-size: 24px;
}

Basic CSS Selectors

1. Type Selector

The Type Selector, also known as the Element Selector, is the most straightforward way to select HTML elements based on their tag names. For instance, if you want to style all <p> elements on your web page, you can use the type selector as follows:

p {
  /* Your styles here */
}

This selector will apply the specified styles to all <p> elements throughout your HTML document.

2. Class Selector

The Class Selector allows you to select elements by their class attribute. Classes are reusable, making them a versatile choice for styling multiple elements. To apply styles to elements with a specific class, use a period (.) followed by the class name:

.button {
  /* Your styles here */
}

In your HTML, apply the class to elements like this:

<button class="button">Click me</button>

3. ID Selector

The ID Selector targets a single, unique HTML element using its id attribute. Unlike classes, IDs should be unique within a web page. To style an element by its ID, use a hash (#) followed by the ID name:

#header {
  /* Your styles here */
}

In your HTML, define the ID for an element like this:

<div id="header">
  <!-- Header content here -->
</div>

4. Universal Selector

The Universal Selector is a less common but powerful selector that selects all elements on a web page. It's denoted by an asterisk (*):

* {
  /* Your styles here */
}

Use this selector sparingly, as it can have unintended consequences if not applied carefully.

Combination Selectors

Combination selectors allow you to target elements based on various conditions, providing even more precision in your styling.

1. Descendant Selector

The Descendant Selector selects elements that are descendants of a specified element. It uses a whitespace character to separate the parent and descendant elements:

ul li {
  /* Your styles here */
}

In this example, the styles will be applied to all <li> elements that are descendants of a <ul> element.

2. Child Selector

The Child Selector targets elements that are direct children of a specified element. It uses the greater-than sign (>) to separate the parent and child elements:

ul > li {
  /* Your styles here */
}

With this selector, only the <li> elements that are immediate children of a <ul> element will be styled.

3. Adjacent Sibling Selector

The Adjacent Sibling Selector selects elements that are immediately preceded by a specified element. It uses the plus sign (+) to denote the relationship:

h2 + p {
  /* Your styles here */
}

This selector will apply styles to <p> elements that directly follow <h2> elements.

4. General Sibling Selector

The General Sibling Selector targets elements that share the same parent and come after a specified element. It uses the tilde sign (~) to indicate the relationship:

h2 ~ p {
  /* Your styles here */
}

All <p> elements that follow any <h2> elements within the same parent will receive the specified styles.

Combination Selector

Group Selector

Let's begin with the Group Selector, a straightforward yet powerful way to apply styles to multiple elements at once. By separating selectors with commas, you can target multiple elements and define shared styles for them. For example:

h1, h2, h3 {
  color: #333;
  font-family: Arial, sans-serif;
}

In this example, the styles defined within the curly braces apply to all <h1>, <h2>, and <h3> elements on the web page. Group selectors are efficient for simplifying your CSS code and ensuring uniformity in styling across different elements.

Descendant Selector

The Descendant Selector enables you to target elements that are descendants of a specific parent element. This selector uses a space to separate the parent and descendant elements in the hierarchy. For instance:

ul li {
  list-style-type: square;
}

In this case, the style is applied to all <li> elements that are descendants of a <ul> (unordered list) element. Descendant selectors are valuable for styling nested elements, like the list items within a navigation menu.

Child Selector

The Child Selector is similar to the descendant selector, but it's more specific. It selects elements that are direct children of a specified parent element, ignoring any deeper descendants. To use the child selector, you employ the greater-than sign (>) between the parent and child elements. Here's an example:

ul > li {
  font-weight: bold;
}

In this scenario, the style is applied only to <li> elements that are direct children of a <ul> element. Child selectors are particularly useful for targeting elements within a specific structural context.

Advanced CSS Selectors:

Attribute Selector

The Attribute Selector allows you to target HTML elements with specific attributes or attribute values. It is denoted by square brackets, and you can use it to apply styles selectively. For example:

input[type="text"] {
  border: 1px solid #ccc;
}

In this case, the style is applied only to <input> elements with the attribute type set to "text". Attribute selectors are handy when you want to style elements based on their attributes.

Pseudo-Class Selector

Pseudo-classes are selectors that define special states or behaviors for elements that cannot be targeted using simple selectors. Some common pseudo-classes include :hover for mouseover effects and :nth-child() to select elements based on their position in a list. Here are a couple of examples:

a:hover {
  color: #FF5733;
}

li:nth-child(odd) {
  background-color: #EDEDED;
}

The first example changes the color of links when hovered over, while the second highlights odd-numbered list items. Pseudo-classes open up possibilities for creating interactive and dynamic web designs.

Pseudo-Element Selector

Pseudo-elements allow you to style specific parts of an element, such as the first line of a paragraph (::first-line) or the first letter of a heading (::first-letter). They are represented by double colons (::) and are applied to elements without the need for additional HTML markup. Here are some examples:

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

h1::first-letter {
  font-size: 2em;
  color: #4CAF50;
}

Pseudo-elements offer a level of control and creativity that goes beyond basic styling.

Adjacent Sibling Selector

The Adjacent Sibling Selector targets an element that is immediately preceded by another specific element. It uses the plus sign (+) to denote the relationship. For example:

h2 + p {
  font-style: italic;
}

This selector applies the style to <p> elements that directly follow <h2> elements.

General Sibling Selector

The General Sibling Selector targets elements that share the same parent and come after a specified element. It uses the tilde sign (~) to indicate the relationship. Here's an example:

h2 ~ p {
  margin-left: 20px;
}

This selector applies the style to all <p> elements that follow any <h2> elements within the same parent.

Class Selector with Specific Element

The Class Selector is used to target elements with a specific class, but you can also narrow it down further by specifying the element type. For instance:

button.primary {
  background-color: #3498db;
  color: #fff;
}

This selector applies styles only to <button> elements with the class "primary."

Attribute Selector with Specific Element

You can combine an Attribute Selector with a specific element to target elements with a certain attribute and value. For example:

input[type="checkbox"] {
  appearance: none;
}

This selector targets <input> elements with the attribute type set to "checkbox."

Descendant Selector with Specific Element

The Descendant Selector allows you to target elements that are descendants of a specific parent element. When combined with a specific element, it becomes even more precise. For instance:

header a {
  font-weight: bold;
}

This selector styles <a> elements that are descendants of a <header> element.

CSS Measurement Units:

Pixel (px)

Pixel (px) is the most common CSS measurement unit, and it represents a single dot on a screen. It provides a fixed and precise measurement, making it suitable for defining exact sizes and dimensions for elements.

p {
  font-size: 16px;
  padding: 10px;
}

In this example, the font size of <p> elements is set to 16 pixels, and there's a 10-pixel padding applied to them. Pixels are ideal for ensuring consistency and pixel-perfect designs.

Em

Em is a relative CSS measurement unit that's based on the font size of the nearest parent element. It's excellent for creating scalable and flexible designs that adapt to changes in font size.

p {
  font-size: 1.2em;
  margin: 0.5em;
}

Here, the font size and margin for <p> elements are defined in em units. When the font size of the parent changes, the sizes of these elements adjust accordingly.

Rem

Rem stands for "root em" and is also a relative unit, but it's based on the font size of the root element (usually the <html> element). This makes it ideal for creating layouts that scale consistently across the entire page.

body {
  font-size: 16px;
}

p {
  font-size: 1.2rem;
  margin: 0.5rem;
}

In this example, the font size for the entire document is set to 16 pixels, and the font size and margin for <p> elements are specified in rem units. Rem units offer predictable and scalable designs.

Percentage (%)

Percentage is a versatile unit that allows you to define sizes and spacing relative to the parent element. It's widely used for creating responsive and adaptable designs.

div {
  width: 50%;
  padding: 5%;
}

Here, a <div> element has its width and padding defined in percentages. This ensures that the element's size adapts to its parent container.

Viewport Units (vw and vh)

Viewport units, represented by vw (viewport width) and vh (viewport height), are relative units that refer to a percentage of the viewport's width and height, respectively. They are valuable for creating responsive designs that adapt to different screen sizes.

header {
  font-size: 5vw;
}

section {
  height: 50vh;
}

In this example, the font size of the <header> element is set to 5% of the viewport's width, and the <section> element's height is set to 50% of the viewport's height.

Vmin and Vmax

Vmin represents the smaller of the viewport's width and height, while Vmax represents the larger of the two. These units are useful for creating designs that scale proportionally based on the viewport's dimensions.

div {
  width: 50vmin;
  height: 30vmax;
}

In this case, a <div> element's width is set to 50% of the smaller of the viewport's width and height, and its height is set to 30% of the larger of the two.

Inches, Centimeters, and Millimeters

Physical units like inches, centimeters, and millimeters are primarily used in print stylesheets or for situations where precise physical measurements are needed.

p {
  width: 3in;
  margin-top: 2cm;
  padding-left: 10mm;
}

In this example, the width of <p> elements is set to 3 inches, the top margin is 2 centimeters, and the left padding is 10 millimeters. These units are essential for ensuring accurate print layouts.

Points (pt) and Picas (pc)

Points (pt) are used in typography and print design, where 1 point is equal to 1/72nd of an inch. Picas (pc) are related to points, with 1 pica being equal to 12 points.

body {
  font-size: 18pt;
}

p {
  font-size: 1.5pc;
}

Here, the font size for the entire document is set to 18 points, and the font size for <p> elements is specified in picas. Points and picas provide precise control over typography and layout in print-oriented designs.

Comments

Post a Comment