1. CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1

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 2

3. CSS syntax CSS is not XML! General syntax: CSS rule Selector { declarations } CSS example P { color: red; text-align: center} CSS, Cascading Style Sheets3

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: …. Example CSS: #special { style rules } Class All elements of the specified class are styled Example HTML: … 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 Sheets4

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) Internal style sheet Applies to a single HTML document Style rules are defines in the head section of the HTML file p : { color: blue; } h1: {color: orange; } Inline styles Applies to a single element … Ties: inline styles override internal styles which overrides external styles Inline > internal > external CSS, Cascading Style Sheets5

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 Sheets6

7. CSS validation W3C has a CSS validator https://jigsaw.w3.org/css-validator/ CSS, Cascading Style Sheets7