CSS, Cascading Style Sheets 1

CSSCascading Style Sheets

A very brief introduction

2

• CSS stands for Cascading Style Sheets• CSS is a stylesheet language that describes the presentation of an

HTML (or XML) document.• CSS describes how HTML elements are to be displayed on screen,

paper, or in other media• CSS saves a lot of work. It can control the layout of multiple Web

pages all at once• External Style Sheets are stored in CSS files

CSS, Cascading Style Sheets

CSS, Cascading Style Sheets 3

CSS syntax

• CSS is not XML!• General syntax: CSS rule• Selector { declarations }

• CSS example• P { color: red; text-align: center}

CSS, Cascading Style Sheets 4

CSS selectors: What should be styled …• Elements

• The specified kind of HTML element is styled

• Example: p { style rules } • all p (paragraph) elements are styled

• ID• The element with the specified ID

attribute is styled• ID should be unique within a web page

• Only on element is styled• example HTML:

• <p id=“special”>….</p>• Example CSS: #special { style rules }

• Class• All elements of the specified class are

styled• Example HTML:

• <p class=“red”>…</p>• <h1 class=“red”> … </h1>

• Example css: .red { color : red }

• Grouping• Example css: p.red { color : red }• Only p elements with class=“red” are

styled

• Ties• ID > group > class > element

CSS, Cascading Style Sheets 5

Three ways to insert CSS

• External style sheet• Applies to all HTML document linking to the style file• Style rules are defined in a separate file, like mystyles.css• HTML documents refer to the style file (head section of the document)

• <link rel=“stylesheet” type=“text/css” href=“mystyles.css” />

• Internal style sheet• Applies to a single HTML document• Style rules are defines in the head section of the HTML file• <style> p : { color: blue; } h1: {color: orange; } </style>

• Inline styles• Applies to a single element• <h1 style=“color: pink; font-size : large;”>…</h1>

• Ties: inline styles override internal styles which overrides external styles• Inline > internal > external

CSS, Cascading Style Sheets 6

HTML elements: div + span

• HTML elements div (block level) and span (inline) does not have a visual appearance• Unless they are styled

• Div and span are used for styling• And for JavaScript …

• Div can be used to style a block• Span can be used to style elements inline.

CSS, Cascading Style Sheets 7

CSS validation

• W3C has a CSS validator• https://jigsaw.w3.org/css-validator/