{"id":3714,"date":"2023-07-18T00:32:36","date_gmt":"2023-07-18T00:32:36","guid":{"rendered":"https:\/\/nmi.cool\/advweb\/?page_id=3714"},"modified":"2025-06-19T19:43:07","modified_gmt":"2025-06-19T19:43:07","slug":"course-notes-lists-links-fonts","status":"publish","type":"page","link":"https:\/\/nmi.cool\/advweb\/unit-one-html-css\/week-one\/course-notes-lists-links-fonts\/","title":{"rendered":"Course Notes: Lists, Links, &amp; Fonts"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>LIST STYLING<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">List CSS<\/h4>\n\n\n\n<p><strong>line-height<\/strong>: controls the spacing between lines, keeping uniform spacing between the list items<\/p>\n\n\n\n<p><strong>list-style-type<\/strong>: sets the type of bullet (none, square, circle, roman numeral, etc)<\/p>\n\n\n\n<p><strong>list-style-position<\/strong>: sets whether the bullets appear inside the list items, or outside (default) before the start of each item<\/p>\n\n\n\n<p><strong>list-style-image<\/strong>:&nbsp; allows you to use a custom image for the bullet point, limited on controlling the position and size \u00e0 use background-image in the css of your list instead, set list-style-type to \u201cnone\u201d, set the background image to your img url, set the background size to approximately 1.6 rem and adjust as needed, then set background-repeat to no-repeat<\/p>\n\n\n\n<p>Controlling list counting (attributes):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>Start=<\/code>&nbsp;allows you to start the list counting with a number other than 1<\/li>\n\n\n\n<li><code>Reverse=<\/code>&nbsp;starts the list counting down instead of up<\/li>\n\n\n\n<li><code>Value=<\/code>&nbsp;allows you to set your list items to specific numerical values, add to the specific &lt;li&gt; element<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>LINK STYLING<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Link states<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>:link<\/code>&nbsp;link (unvisited)<\/li>\n\n\n\n<li><code>:visited<\/code>&nbsp;link (visited)<\/li>\n\n\n\n<li><code>:hover<\/code>&nbsp;a link that\u2019s hovered over<\/li>\n\n\n\n<li><code>:active<\/code>a link that\u2019s currently being activated\/clicked on<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Default style of a link:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>underlined, blue (unvisited)<\/li>\n\n\n\n<li>underlined, purple (visited)<\/li>\n\n\n\n<li>hovering changes the mouse to a hand icon<\/li>\n\n\n\n<li>users know and expect this link behavior, don\u2019t stray too far away from this style<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Link CSS<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>text-decoration<\/strong>&nbsp;\u201cnone\u201d gets rid of the default underline<\/li>\n\n\n\n<li><strong>border-bottom<\/strong>&nbsp;is preferred over the default text-decoration line because there\u2019s more line styling options, plus the line is lower so it doesn\u2019t cut across the tails of letters such as \u201cg\u201d and \u201cy\u201d<\/li>\n\n\n\n<li>define different colors for a:link and a:vistited so that they are distinct<\/li>\n\n\n\n<li>give&nbsp;<code>a:focus<\/code>&nbsp;and&nbsp;<code>a:hover<\/code>&nbsp;a background color to make the link stand out when hovered over<\/li>\n\n\n\n<li>use&nbsp;<code>a:active<\/code>&nbsp;to invert the color scheme of the link as it\u2019s being clicked on, makes it clear that something is happening<\/li>\n\n\n\n<li>adding padding to your link makes it stand out from the rest of the text it\u2019s nestled in without it being highlighted in an obnoxious way<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>WEB FONTS<\/strong><\/h2>\n\n\n\n<p><strong>font-family<\/strong>: the font applied to your text, include multiple font family names (browser runs down the list of family names until it finds one available to use)<\/p>\n\n\n\n<p>Web safe fonts: the fonts that are ~generally~ available across all systems, very limited<\/p>\n\n\n\n<p>Fonts are usually not free, meaning you\u2019ll have to pay for fonts that aren\u2019t the basic web-safe fonts. Thankfully Google Fonts has tons of free fonts to choose from!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Google Fonts<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the Google Font Page<\/a><\/li>\n\n\n\n<li>Select a font you like with the plus sign icon and then click on the bar at the bottom of the screen that pops up to see details.<\/li>\n\n\n\n<li>You should see tabs in which to customize &amp; embed. Customize the font styles you\u2019ll want to use (keeping in mind the more font variations you choose the longer your page will take to load).<\/li>\n\n\n\n<li>Then take the&nbsp;<code>&lt;link&gt;<\/code>&nbsp;code and enter it into the &lt;head&gt; of your document.<\/li>\n\n\n\n<li>Specify the font-family in your CSS with the CSS rules they give you as well.<\/li>\n<\/ol>\n\n\n\n<p>To specify font files to be downloaded along with your website as it\u2019s accessed&nbsp;<em>add to the top of your css file<\/em>:<\/p>\n\n\n\n<p><code>@font-face {<br>font-family: \u201cmyFont\u201d<br>src: url(\u201curl\u201d)<br>}<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LIST STYLING List CSS line-height: controls the spacing between lines, keeping uniform spacing between the list items list-style-type: sets the type of bullet (none, square, circle, roman numeral, etc) list-style-position: sets whether the bullets appear inside the list items, or outside (default) before the start of each item list-style-image:&nbsp; allows you to use a custom &hellip; <a href=\"https:\/\/nmi.cool\/advweb\/unit-one-html-css\/week-one\/course-notes-lists-links-fonts\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Course Notes: Lists, Links, &amp; Fonts<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3682,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3714","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/comments?post=3714"}],"version-history":[{"count":2,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3714\/revisions"}],"predecessor-version":[{"id":4289,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3714\/revisions\/4289"}],"up":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3682"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/media?parent=3714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}