January 30, 2024 by admin

HTML/CSS Reference for DMET 155/355

CSS

CSS, or Cascading Styles Sheets, is a way to style and present HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document.

Styles have a format of ‘property: value’ and most properties can be applied to most HTML tags.

Applying CSS

There are three ways to apply CSS to HTML: Inline, internal, and external.

Inline

Inline styles are plonked straight into the HTML tags using the style attribute.

They look something like this:

<p style="color: red">text</p>

This will make that specific paragraph red.

But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible.

External

External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like:

p {
    color: red;
}

a {
    color: blue;
}

If this file is saved as “style.css” in a folder called “css” in the same directory as your HTML page then it can be linked to in the HTML like this:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Example</title>
    <link rel="stylesheet" href="css/style.css">
...

Apply!

To get the most from this guide, it would be a good idea to try out the code as we go along, so start a fresh new file with your text-editor and save the blank document as “style.css” in the same directory as your HTML file.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29