Rules, Selectors, and Properties

CSS controls 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, we 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, you can represent these values 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

A pixel (px) is the smallest visible dot on a screen. The physical size of a pixel varies with a device’s resolution: e.g., 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 ends 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. See 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.

Common CSS Properties

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

Inline Styling

You can apply CSS rules to an element by putting the rule inside the element’s tag in the HTML document. You can do this by applying the style attribute to any HTML tag. The value of that attribute is a list of CSS rules, and those CSS rules will be applied to that element.

Example: Making a Paragraph use Bold Arial Font

The following code:

<p style="font-family: Arial; font-weight: bold;">
    This paragraph has bold text in the Arial font.
</p>

Would produce the following result:

This paragraph has bold text in the Arial font.

Example: Adding a Border to an Image

The following code:

<img alt="NCSU Logo" src="images/ncsu.png" style="border: 3px dashed #000000" />

Would produce the following result:

Note: The semicolon on the last rule in a list of rules is optional.

Inline vs. External Stylesheet

Inline styling does not not allow you to make a change in one file to update the style of an entire website. It’s more common to include external CSS files in your HTML. External files separate content from design and allows consistent styling across multiple pages with minimal effort. However, an attacker (some malicious user, or website) could cause a victim to load some malicious CSS by linking it to a bad external style sheet. Attackers may use malicious CSS to track users or leak data (external JavaScript can be misused in this same way, and that is more likely). For this reason, one should only load stylesheets from trusted sources, especially on public-facing websites.

External Stylesheets

CSS is usually used by creating a stylesheet file and linking your HTML code to that file.

Creating a CSS File:

1. Open a text editor and type/paste the CSS code into a new file.
2. Save the file as style.css
3. Open your index.html file. Paste the following line in the head (between the <head> and </head> tags):

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

4. Save index.html and load it in your browser. You should see your style!

Make sure that you’ve put the tag in the head section of your webpage (not the body section), and that the value of the hrefattribute contains a path to the CSS file you’ve just created.

Stylesheet Syntax

The stylesheet is organized into “blocks” of CSS rules. Each block is composed of a selector, followed by a list of rules enclosed with curly braces ({ and }). A CSS selector is a way of defining the scope of the rules; in other words, a selector defines to which elements the rules will be applied. The example below shows the generic syntax of a stylesheet.

/* this is a block of CSS rules */
selector {
  property: value;
  property: value;
}

/* this is another block */
selector {
  property: value;
  property: value;
}

Note: In CSS, lines that begin with /* and end with */ are comments. Like HTML comments, they are not visible on the webpage; they are only displayed in the code and are meant to add documentation or any other notes to the code.

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: #6F7D1C;
}

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.

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.