CS1115/CS5002

Web Development 1

Dr Derek Bridge

School of Computer Science & Information Technology

University College Cork

Cascading StyleSheets (CSS)

CSS terminology

p {
    color: red;
}

header {
    color: white;
    background-color: black;
}

Colours in CSS

Class exercise

What colours are these?

  1. rgb(0, 255, 0)
  2. rgb(255, 255, 255)
  3. rgb(0, 0, 0)
  4. rgb(255, 255, 0)
  5. rgb(255, 250, 0)
  6. rgb(169, 169, 169)
  7. rgb(211, 211, 211)

CSS comments

Adding CSS styles to your web pages

External stylesheets

More on external stylesheets

Embedded stylesheets: the <style> element

Inline styles: the style attribute

The power of separating structure (HTML) and presentation (CSS)

The hierarchical structure of HTML documents

<!DOCTYPE html>
<html>
    <head>
        <title>A simple document</title>
    </head>
    <body>
        <p>
            Some words.
        </p>
        <p>
            More words 
            <em>and emphasised words</em>
            and final words.
        </p>
    </body>
</html>
The HTML node has head and body nodes as its children. The head node has a title node as its child. The title node has a text node as its child. The body node here has two p nodes as children. The first p node has a text node as its child. The second p has three children: a text node, an em node and another text node. The em node has a text node as its child.

Inheritance in CSS

Blocking inheritance

Not everything is inherited