## Lecture 1 (13:00) - Intro to CSS ### Style Rules - CSS associates rules with HTML elements - These rules govern how content of specified elements should be displayed - Selector - Indicates the element(s) the rule applies on - Declaration - Indicates how said elements should be formatted #### Example 1 ```css p { font-family: Arial; } ``` - `p` here is the selector - it indicates all `

` elements should be selected. - `{ font-family: Arial; }` is the declaration - indicating that all selected elements should be styled in the font family of Arial. #### Example 2 ```css h1, h2, h3 { font-family: Arial; color: yellow; } ``` - Selector: `h1, h2, h3` are selected - Declaration: `font-family: Arial; color: yellow;`. All text will be yellow Arial text. ### Using External CSS - In the `` of the HTML page, we can link a CSS file for the browser to use for the current page. It takes 3 attributes: - **href** - path to CSS file - **type** - the type of document being linked (`text/css`) - **rel** - relationship to the HTML files (`stylesheet`) #### Example ```html Using External CSS ``` - The `` element links a **stylesheet** of type **"text/css"** at location **"src/styles/style.css"**, relative to the HTML file. ### Using Internal CSS - We can also include CSS directly in the HTML file using the ` ``` ### Internal Vs External CSS - When building a website with more than one page, external CSS should be used. - Allows all pages to be similar & familiar. - Avoids redundant code. - Abstracts content from style. - Allows entire site to be updated from a single file. - CSS can be cached. - Internal CSS is, in the majority of cases, bad practice. Under certain circumstances such as the following, it may be useful. - Single page sites (still bad practice) - One page requires additional / special rules ### CSS Selectors | Selector | Matches | Example | |-|-|-| | Universal | All Elements | * { } | | Type | Element Names | h1, h2 { } | | Class | Class Names | h1.titlebar { } | | ID | ID Attr. Value | \#introduction | | Child | Direct Child Element | li>a { } | | Descendant | (Nested) Child Element | p a { } | | Adjacent Sibling | Direct Adjacent Element | h1+p { } | | General Sibling | Non-Direct Adjacent Element | h1~p { } | ### Cascading - If two or more rules apply to the same element we must be careful to ensure which rule will take precedence - Last Rule - Specificity - Important #### Last Rule - If two selectors are identical, the last one will take precedence. ##### Example ```css h1 { font-family: Arial; } i { color: green; } p { font-size: 75%; } i { color: blue; } ``` In this example, `i` would be coloured blue, since it is the last selector of `i` to appear in the stylesheet. #### Specificity - If one selector is more specific than the others, the more specific rule will take precedence over more general ones. ##### Example ```css * { color: blue; } p { color: red } p#intro { color: green; } ``` In this example, `p#intro` text would be coloured green, even though `*` (all text) is coloured blue, and `p` is coloured red. This is due to `p#intro` being a smaller scope than the rest. #### Important - Adding `!important` after a property value will ensure that it is used over other values, even if it should be considered less specific, or not the last. ### Inheritance - Certain properties will be inherited by most child elements to minimise redundant code and simplify stylesheets. - `font-family` assigned at the `` of an element will ensure any `

` elements have the same font family, unless specified otherwise. - Other properties such as `border` or `background-color` are not inherited by default, but can be forced to do so by using a property value of `inherit`. - `padding` is not inherited by default, but we can force this by typing `padding: inherit;`. ### CSS and Browsers - Some browsers may not have the same CSS rules, and there are certain quirks between them. - ex. Firefox does not have the same scrollbar rule as chromium / IE based browsers. Chromium browsers use `::-webkit` CSS code, which Firefox does not have, instead opting for just a `scrollbar-width` and `scrollbar-color` element. - and can both help to develop and debug these quirks. ### Defining Colour (Color) #### RGB(A) - We can specify an RGB(A) value with a function: - `rgba(102, 205, 170, 0.2)`, where the values correspond to Red, Green, Blue and Alpha (transparency). - All values are decimal converted to 8 bit binary positive integers, ranging from 0 to 255. #### HSLA - We can define colour by using HSLA too: - `hsla(159.612, 51%, 60%, 0.2)`, where the values correspond to Hue, Saturation, Lightness and Alpha #### Hex Codes - We can specify hexadecimal RGB codes this way, using 2 characters for each channel. - `#66CDAA32`, where `#RRGGBBAA` is used for RGBA, or `#RRGGBB` for RGB, we just convert from the decimal format of `rgba()`, to hexadecimal. - All values are 2-bit hex values converted to 8-bit binary positive integers, ranging from 0 to 255. - `#66CDAA32` - `rgba(102, 205, 170, 0.2)` - `hsla(159.612, 51%, 60%, 0.2)` #### Colour Names - In CSS, there are 140 hard coded colour names that can be found in several places. - [MDN HTML Colours](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#color_keywords) ### CSS Property Overview #### Color - This property is used to change the foreground colour (text) inside an element #### Background-color - This property changes the background colour inside the box. If unset, this is set to transparent by default, using the browsers colour.