CSS Rules, Selectors, and Properties

CSS controls things like how colors, fonts, spacing, and borders look on webpages. Each rule sets a property and a value. Properties are what you want to style (borders, sizes), values are how you want it to look (fonts colors, sizes, positioning).

Colors

Modern computer screens display millions of colors using an additive color system based on Red, Green, and Blue (RGB) light. Rather than naming each of these 16.7 million colors, CSS allows us to specify them with hex codes or RGB values. Every color is a mix of red, green, and blue, defined by an intensity from 0 (no light) to 255 (full intensity). You can use the rgb(R,G,B) format to specify the intensity of each color.

Alternatively, these values are commonly represented in hexadecimal as #rrggbb, where rr, gg, and bb are hex pairs for red, green, and blue respectively. Each color gets a byte (hex pair).

We discuss hexadecimal and bytes in the section Hexadecimal.

Examples:

• #FF0000 = full red (255, 0, 0)
• #CC0000 = Wolfpack red (204, 0, 0)
• #FFFF00 = red + green = yellow (255, 255, 0)
• #000000 = black (0,0,0)
• #FFFFFF = white (255, 255, 255)

For a reference list of named colors and their hex values, see Wikipedia. You can also learn what colors are in both hexadecimal and RGB format by visiting https://rgbcolorpicker.com/.

Pixels

To control layout and sizing, CSS uses pixels (px) as the most basic unit of distance. A pixel is the smallest visible dot on a screen and can vary in size depending on a device’s resolution (e.g., 1280×720 vs. 4096×2160). The physical size of a pixel can vary significantly with a device’s resolution: for instance, a 4K TV (4096×2160 pixels) puts more pixels into the same space than an older 1280×720 screen.

Although different screens may render pixels differently, CSS treats them as consistent units. Pixels are commonly used to set:

• Text size
• Spacing (margins, padding)
• Dimensions of boxes and images

For a more technical reference on measurements in CSS, see the W3C documentation.

CSS Rules

A CSS rule follows this format:

property: value;

Properties are separated from the values by a colon (:), values are separated from each other by a space (), and the rule is finished with a semicolon (;). The example below shows a rule which, if applied to an element, would give the element a 2-pixel-wide solid red border.

border: 2px solid #FF0000;

The property is “border”, and the values are the width, style, and color of the border. To view a list of the most common properties and notes regarding how they are used, view the Property chart at the end of this section.

Selectors vs. Rules: A selector tells CSS which HTML element(s) to style. The rule describes how it should look. Together, they form a complete CSS statement.

CSS Selectors

Type Selector

The type selector targets all elements of a specific HTML tag (e.g., p for all paragraphs, img for all images). Just write the tag name before your CSS rule.

Example: All Paragraphs use Blue Text

<!-- HTML -->
<p>Hello, world.</p>
<p>This is a paragraph.</p>

<!-- CSS -->
p {
  color: #0000FF;
}

Hello, world.

This is a paragraph.

ID Selector

The ID attribute (e.g., id="logo") gives a unique name to a single HTML element. To style it, use the **ID selector** by typing a # followed by the ID name. No two elements on a webpage can have the same ID.

Example: Adding a Background Color to a Table

<!-- HTML -->
<table id="mydata">
  <tr><td>Chrysler</td><td>Odyssey</td></tr>
  <tr><td>Dodge</td><td>Ram</td></tr>
</table>

<!-- CSS -->
#mydata {
  background-color: #00FF00;
}

Class Selector

The class attribute (e.g., class="highlight") assigns an element to a “family” of similar elements. Unlike IDs, a class can be reused multiple times on a single page. To style elements by class, use the **class selector** by typing a period (.) followed by the class name.

Example: Making Certain Elements Bold

<!-- HTML -->
<p>
  This is a <span class="boldtext">paragraph</span>, and it contains a
  <a href="http://ncsu.edu" class="boldtext">link</a>.
</p>

<!-- CSS -->
.boldtext {
  font-weight: bold;
}

This is a paragraph, and it contains a link.

Common CSS Properties

This table lists a few common CSS properties and their syntax. We only describe the ones we use immediately in labs/exams in this class, but there are many more! To learn more, go to the MDN web docs for CSS.

Exercises

1. Add inline styling to this paragraph to make the text Wolfpack red and 18px tall.

<p>My favorite color is Wolfpack red.</p>

2. Here’s an image tag:

<img src="tree.jpg" alt="a tree">

Add inline styling to: (1) Add a 2px solid green border and (2) Set the image’s width to 150px. Find a photo of a tree (or anything you like) and set up a webpage to show the image with your changes.