COMP 1850 Lesson Three

--- 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; } </style> # COMP 1850 Lesson Three ## Review ==Comments== can be used to document your code, or to temporarily hide elements from view. HTML comments are _multi-line_ ```  ``` <br> HTML5 introduced several new ==semantic== elements, to help us give our documents additional structure and meaning. Those tags are: * header - used near the top of the body to contain your page title and site navigation * footer - used near the bottom of the body to contain additional navigation, copyright, and contact information * main - used to contain the main page content * aside - used to contain secondary content that is related to the main page content. Typically styled as a sidebar * section - used to contain a logical section of content * article - used to surround any self-contained content that could exist outside of the current page. Typically used for content that is distributed independently, like a social media post * nav - used to contain any list of links. May be used in multiple places; the header and footer for example. <br> There are two basic types of ==lists== in HTML: ordered and unordered. For your markup to be valid, only list item elements may appear as direct children of either type of list. For site navigation, i.e. the links that appear at the top of each page we create, an unordered list is typically used. The full markup may look something like the following example: ``` <header> <h1>Page Title</h1> <nav> <ul> <li>Link 1</li> <li>Link 2</li> ... </ul> </nav> </header> ``` The ==links== themselves are created with the anchor tag, an element that has a required "href" attribute to tell the browser where to navigate to: ``` <a href="www.bcit.ca">BCIT Homepage</a> ``` ## Introduction to CSS Now that we are familiar with the basic set of elements needed to markup text, lists, and links, we can start to change how our pages _look_. CSS (Cascading Style Sheets) is the presentation layer of the web. It allows us to change the layout of our pages, add color, style text and other elements, and to a slight degree change how the page _behaves_ CSS is a different language to HTML, and requires a different file extension: .css While technically possible to combine CSS and HTML into a single .html file, we are going to separate the two and place our styles into a .css file. Once you have a .css file ready, it can be loaded into any HTML page using the `link` element: ``` <link rel="stylesheet" href="index.css"></link> ``` Note: the link element can be placed in several places throughout an HTML document, but for the time being we will place them in the `<head>` Now that you a) have a .css file and b) a link tag in your head, load the page in the browser and use the Developer Tools to verify that it is loading correctly (in Chrome you can find this in the 'Sources' pane) ### Structure of a CSS file CSS is made up of ==rules==, and rules are made up of: 1. Selectors 2. Properties 3. Values Here is a generic example: ```css selector { property: value } ``` A ==selector== is how we specify _which_ element(s) we want to style. A ==property== is the aspect of the element we want to change (e.g. the _size_ of some text), and the ==value== is what we want to set the property to. Selectors can be HTML elements, classes (applied to multiple elements whenever common styling is needed), or ids (applied only to a single element for unique styling) ```css in index.css: div { } .special { } #site-title { } in index.html: <div></div> <p class="special"></p> <h1 id="site-title"></h1> ``` Properties only accept certain types of values (some only accept numbers, some only accept quoted strings of text, etc.) and they all have default values! The browser applies its own default styling to all elements, which can be viewed in the Developer Tools (in Chrome you can find this in the 'Elements' pane) ## General Strategy for CSS 1. Identify the elements you need to style 2. Decide on a rule that will apply only to those elements – if you do not have a way of differentiating them from similar elements, look for a parent element or add classes/ids 3. Write a rule with your chosen selector and make sure it does not conflict with other rules, and does not unintentionally change the styling of other elements on the page 4. Refactor your CSS and try to eliminate redundant rules – the fewer rules, the better Note: you can use the Developer Tools to test styles before committing rules to a stylesheet ## Cascade Rules can override other rules – if two rules have the same ==weight==, then whichever is declared last takes precedence ```css p { color: red; } p { color: blue; } ``` The basic set of weights are as follows: 1. Type selectors (e.g., h1) and pseudo-elements (e.g., ::before). __Weight 1__ 2. Class selectors (e.g., .example), attribute selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover). __Weight 10__ 3. ID selectors (e.g., #example). __Weight 100__ Rules with a heigher weight than other rules will take precedence regardless of order. ### The !important declaration When an !important declaration is used after a value, this overrides any other declared values. Although technically !important has nothing to do with specificity, it interacts directly with it. More importantly (no pun intended), using !important is bad practice. It should be avoided because it breaks the natural cascading in your stylesheets, which in turn makes problems harder to fix. ## Multiple Selectors Multiple selectors can be combined together to increase the weight: ``` div.special { } ``` The above rule would only target divs with class "special", and has a weight of _11_ (1 for the element selector + 10 for the class) Additionally, we can create a single rule that targets multiple elements by separating our selectors with commas: ``` h1, h2, p { color: red; } ``` The above rule will change the text color of all h1, h2, and paragraph elements to red. ## Font Properties and Values Fonts have several properties and values that can define their appearance: ### font-size _Changes the size of the font_ _Possible values_: px, em, rem, % __em__ * em is relative to the parent font-size (if current size is 12px, 1em = 12px, 1.5em = 16px) * em can be scaled by zooming the page * em are affected by their parent element's font size e.g. if a page has default 16px size, and a div within the page has 12px size, 1em inside that div equals 12px, NOT 16px __rem__ Similar to em, but always relative to root (html) font-size, and does not inherit from parent elements __px__ Fixed pixel size, e.g. 16px __%__ Font sizes can be declared as a percentage of their parent (or root) font sizes e.g. if a page has default 16px size, and an element is declared 150%, it would end up as 16 * 1.5 = 24px ### font-family _Changes the typeface_ _Possible values_: serif, sans-serif, cursive, Georgia, etc. (these are fallbacks, left to right whichever is available first will be used) ### font-style _Changes the style_ _Possible values_: normal (default), italic, oblique ### font-weight _Changes the weight of the font_ _Possible values_: normal (default), bold, lighter, bolder, 100 - 900 https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight ### text-align _Aligns the text horizontally_ _Possible values_: left (default), center, right ## Colors Colors can be specified in multiple ways: __hex__: e.g. #rrggbb (values of 0-f) __named colors__: red, green, cornflowerblue https://htmlcolorcodes.com/ __rgb__: rgb(rrr ggg bbb) values of 0-255, optionally followed by a slash and value between 0 - 1 for opacity, e.g. rgb(255 0 0 / 0.5); Use the color picker in the developer tools in Chrome! ### color _Changes the color of text elements_ _Possible values_: any of the above color values ### background-color _Adds a background color to any element_ _Possible values_: any of the above color values ## Lists ### list-style _Changes the type of bullet prepended to an li_ _Possible values_: none, for others check developer tools ## Links ### text-decoration _Affects the underline for link color_ _Possible values_: underline, none, dashed ## Block vs Inline Elements Elements are either block or inline, but we can change the type using the 'display' property. Possible values are: block, inline, inline-block, and more (later!) ---  ## Optional Reading Before Next Class - [Basic page layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow) - [CSS Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) - [CSS Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position)