In-Line Styling vs External

In-Line 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:

NCSU Logo

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

Inline vs. External Stylesheet

In-line styling is easy, but 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 force 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 have no impact on the webpage; they are only displayed in the code and are meant to add documentation or any other notes to the code.