COMP 1850 Lesson Five

--- tags: COMP-1850 --- <style> .markdown-body h1:first-of-type { margin-top: 24px; } .markdown-body h1 { margin-top: 64px; } .markdown-body h1 + h2 { margin-top: 32px; } .markdown-body h2 { margin-top: 48px; } .markdown-body h3 { color: cornflowerblue; } .exercise { font-size: 150%; font-weight: bold; color: rgb(227,112,183); } .note { color: red; font-weight: bold; } #mq { padding: 20px; background-color: red; } @media screen and (width >= 500px) { #mq { background-color: green; color: white; } } </style> # COMP 1850 Lesson Five ## Review ### Box Model All HTML elements are rendered as a box, and each box is made up of (in order, inside to out): 1. Content - the text, image, etc. that shows up on the page 2. Padding - surrounds the content, takes background color and increases the size of the element 3. Border - surrounds the padding 4. Margin - surrounds the border, does not take background color and pushes other elements further away ### Dimensions Element sizes can be specified using a variety of CSS properties: - `width` (fixed/flexible) - `min-width` (flexible) - `max-width` (flexible) - `height` (fixed/flexible) - `min-height` (flexible) - `max-height` (flexible) ### Positioning In addition to the normal browser layout flow (block-level elements stack vertically, inline-level elements stack horizontally), elements can be _positioned_. `position: relative` keeps an element in the normal flow, but allows us to offset it relative to where it was initially placed, using one or more values of `top`, `right`, `bottom`, and `left`. `position: absolute` removes an element from the normal flow, and allows us to offset it relative to the closest positioned ancestor element, or the body, using one or more values of `top`, `right`, `bottom`, and `left`. `position: fixed` works similarly to position absolute, offset using one or more values of `top`, `right`, `bottom`, and `left`, but prevents the element from scrolling. `position: sticky` is a hybrid of relative and fixed – positioned relatively until a specified scroll point is reached, at which point it becomes fixed ## Responsive Web Design Responsive Web Design is a set of techniques used to ensure that web pages are readable and usable on any device size. A key principle of Responsive Web Design is using _flexible_ dimensions and layouts (e.g. `max-width: 400px`) rather than _fixed_ dimensions and layouts. In the past, the suggested approach was to use [floats](https://developer.mozilla.org/en-US/docs/Web/CSS/float) to enable layouts that adapt to different device sizes, however we now have more modern and convenient layout methods ([CSS Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) and [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)) that will be discussed in future lessons of this course. ### Media Queries [Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) allow us to apply CSS rules only for a specific _type_ of device, _width_ of device, or many other possible conditions. Typically these are used to declare different sets of rules for mobile and desktop devices, using a block similar to the examples below: ```css @media screen and (width >= 320px) { /* rules declared inside this block are only applied to devices with a screen greater than or equal to 320px wide */ } @media screen and (320px >= width <= 1000px) { /* rules declared inside this block are only applied to tablet-sized devices */ } @media screen and (width <= 1000px) { /* rules declared inside this block are applied to mobile and tablet-sized devices */ } ``` <div id="mq">Try me: I am red on mobile, green on desktop</div> <br> <span class="note">Note: generally speaking, a _mobile-first_ approach is recommended, where normal CSS rules are intended for mobile-sized devices, and media query overrides are added only for larger devices.</span> Other common example uses of media are included below: ```css! @media screen and (pointer: fine) { /* rules declared inside this block are only applied to devices that use a so-called 'accurate' pointing device (e.g. mouse, stylus) */ } @media screen and (orientation: landscape) { /* rules declared inside this block are only applied to mobile devices in landscape mode */ } @media print { /* rules declared inside this block are only applied when a page is printed */ } ``` ## CSS Advanced Selectors In addition to the basic selectors discussed in previous weeks (element, class, and id), CSS provides several advanced selectors that allow you to target specific types of elements, relationships between elements, or attribute values. ### Attribute Selector Allows you to target only elements that have a given value for a particular attribute: ```css! a[href="https://www.bcit.ca"] { /* targets only links pointing to BCIT */ } p[class^="bg"] { /* targets paragraphs with class starting with 'bg' */ } div[class$="large"] { /* targets divs with class ending with 'large' */ } div[class*="special"] { /* targets divs with class containing 'special' */ } ``` ### Child Combinator ```css! div > p { /* targets only paragraphs inside divs */ } div > .special { /* targets only elements with class 'special' inside divs */ } ``` ### Sibling Combinator ```css! div ~ p { /* targets paragraphs that come after a div, and share a parent element */ } ``` ### Adjacent Sibling Combinator ```css! div + p { /* targets the first paragraph that comes after a div, and shares a parent element */ } ``` ### Pseudo-Classes Allows you to target a particular _state_ or _type_ of a given element: ```css! a:hover { /* only applies when links are hovered over */ } button:hover { /* only applies when button elements are hovered over */ } p:first-child { /* targets an element that is both a) a paragraph element and b) the first child of its parent */ } p:last-child { /* targets an element that is both a) a paragraph element and b) the last child of its parent */ } p:nth-child(n) { /* targets an element that is both a) a paragraph element and b) the nth child of its parent, where n is a number */ } span:first-of-type { /* targets the first span element found inside a parent element */ } span:last-of-type { /* targets the last span element found inside a parent element */ } span:nth-of-type(n) { /* targets the nth span element found inside a parent element, where n is a number */ } :root { /* targets the 'root' element, typically <html> */ } div:empty { /* targets divs with no child elements */ } p:not(.special) { /* targets paragraphs that do not have class="special" */ } ``` ---  ---