Web fonts with @font-face - CSS Video Tutorial | LinkedIn Learning, formerly Lynda.com

<!DOCTYPE html> <html lang="en"> <head> <meta name="pageKey" content="d_learning_course_video_guest">  <meta name="linkedin:pageTag" content="locked_video"> <meta name="locale" content="en_US"> <meta id="config" data-app-version="2.0.2217" data-call-tree-id="AAYn3DLPy7bpTEBine8LiA==" data-multiproduct-name="learning-guest-frontend" data-service-name="learning-guest-frontend" data-browser-id="afa341b5-9d4a-449c-8832-d5ef2a369b38" data-enable-page-view-heartbeat-tracking data-page-instance="urn:li:page:learning_course_video_guest;iNqHsg8vSj26dqibjqkqRg==" data-disable-jsbeacon-pagekey-suffix="false" data-member-id="0"> <link rel="canonical" href="https://www.linkedin.com/learning/css-essential-training-22688362/web-fonts-with-font-face">     <link rel="manifest" href="/homepage-guest/manifest.json" crossorigin="use-credentials">  <script> function getDfd() {let yFn,nFn;const p=new Promise(function(y, n){yFn=y;nFn=n;});p.resolve=yFn;p.reject=nFn;return p;} window.lazyloader = getDfd(); window.tracking = getDfd(); window.impressionTracking = getDfd(); window.ingraphTracking = getDfd(); window.appDetection = getDfd(); window.pemTracking = getDfd(); </script>  <link rel="icon" href="https://static.licdn.com/aero-v1/sc/h/444zstxv7s91nepfm5et6ofge"> <title>Web fonts with @font-face - CSS Video Tutorial | LinkedIn Learning, formerly Lynda.com</title> <meta name="robots" content="noarchive, max-image-preview:large"> <meta name="description" content="Learn how to use web fonts to expand your typography options using @font-face."> <meta property="og:site_name" content="LinkedIn"> <meta name="twitter:site" content="@LI_Learning"> <meta name="twitter:card" content="summary"> <meta name="litmsProfileName" content="learning-guest-frontend"> <meta property="og:title" content="Web fonts with @font-face - CSS Video Tutorial | LinkedIn Learning, formerly Lynda.com"> <meta name="twitter:title" content="Web fonts with @font-face - CSS Video Tutorial | LinkedIn Learning, formerly Lynda.com"> <meta property="og:description" content="Learn how to use web fonts to expand your typography options using @font-face."> <meta name="twitter:description" content="Learn how to use web fonts to expand your typography options using @font-face."> <meta property="og:image" content="https://media.licdn.com/dms/image/v2/D560DAQFbwOobZ3xBZg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1691438871844?e=2147483647&v=beta&t=klsoR7dlyYB5m4UfG6pT9o2eu4xK-9agetTIp67MNtQ"> <meta name="twitter:image" content="https://media.licdn.com/dms/image/v2/D560DAQFbwOobZ3xBZg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1691438871844?e=2147483647&v=beta&t=klsoR7dlyYB5m4UfG6pT9o2eu4xK-9agetTIp67MNtQ">  <meta property="og:url" content="https://www.linkedin.com/learning/css-essential-training-22688362/web-fonts-with-font-face"> <meta property="og:type" content="website"> <meta name="clientSideIngraphs" content="1" data-gauge-metric-endpoint="/learning-guest/api/ingraphs/gauge" data-counter-metric-endpoint="/learning-guest/api/ingraphs/counter"> <link rel="stylesheet" href="https://static.licdn.com/aero-v1/sc/h/b2sn84ibusnmmqygar9zphel"> <script type="application/ld+json"> {"@context":"http://schema.org/","@type":"VideoObject","name":"Web fonts with @font-face - CSS Essential Training","author":{"@type":"Person","name":"Christina Truong","url":"https://www.linkedin.com/learning/instructors/christina-truong"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/D560DAQFbwOobZ3xBZg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1691438871844?e=2147483647&v=beta&t=klsoR7dlyYB5m4UfG6pT9o2eu4xK-9agetTIp67MNtQ","description":"Explore the concepts that form the foundation of CSS. Learn how to select content, style text, manage layouts, and more as you work on a series of real-world projects.","duration":"PT2M31S","datePublished":"2023-08-09","uploadDate":"2023-08-09","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-essential-training-22688362/web-fonts-with-font-face"} </script>  </head> <body dir="ltr">   <a href="#main-content" class="skip-link btn-md btn-primary absolute z-11 -top-[100vh] focus:top-0"> Skip to main content </a> <header class="header base-detail-page__header px-mobile-container-padding bg-color-background-container global-alert-offset sticky-header"> <nav class="nav pt-1.5 pb-2 flex items-center justify-between relative flex-nowrap babymamabear:py-1.5 nav--minified-mobile " aria-label="Primary"> <a href="https://www.linkedin.com/learning/?trk=learning-course_nav-header-logo" class="nav__logo-link link-no-visited-state z-1 mr-auto min-h-[52px] flex items-center babybear:z-0 hover:no-underline focus:no-underline active:no-underline babymamabear:mr-3" data-tracking-control-name="learning-course_nav-header-logo" data-tracking-will-navigate> <div class="learning-logo"> <icon class="learning-logo__inbug onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4zqr0f9jf98vi2nkijyc3bex2"></icon> <span class="learning-logo__text" aria-hidden="true">Learning</span> <span class="sr-only">LinkedIn Learning</span> </div> </a> <section class="search-bar relative flex flex-grow h-[40px] bg-cool-gray-20 min-w-0 max-w-full mx-4 rounded-sm babymamabear:mx-0 babymamabear:mb-1.5 babymamabear:bg-color-transparent babymamabear:w-full babymamabear:flex babymamabear:flex-wrap search-bar--minified-mobile" data-current-search-type="LEARNING"> <button class="search-bar__placeholder papabear:hidden text-input w-full mt-1.5 !pl-[14px] border-1 border-solid border-color-border-faint rounded-[2px] h-[40px] max-h-[40px] flex items-center overflow-hidden cursor-text" data-tracking-control-name="learning-course_search-switcher-opener"> <icon class="text-color-icon w-3 h-3 mr-1" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/397vrsk6op88l4981ji1xe1qt"></icon> <div class="search-bar__full-placeholder font-sans text-md text-color-text max-w-[calc(100%-40px)] text-left whitespace-nowrap overflow-hidden text-ellipsis">  Search skills, subjects, or software  </div> <span class="sr-only">Expand search</span> </button> <div class="switcher-tabs__trigger-and-tabs babymamabear:flex"> <button aria-expanded="false" class="switcher-tabs__placeholder flex !h-full !py-0 !pl-2 !pr-1.5 border-r-1 border-solid border-r-color-border-faint babymamabear:hidden tab-md papabear:tab-vertical papabear:justify-start cursor-pointer" data-tracking-control-name="learning-course_switcher-tabs-placeholder" aria-describedby="switcher-description"> <span class="switcher-tabs__placeholder-text m-auto"></span> <icon class="switcher-tabs__caret-down-filled onload pointer-events-none block my-auto min-h-[24px] min-w-[24px] h-[24px] babymamabear:hidden" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/7asbl4deqijhoy3z2ivveispv"></icon> </button> <div id="switcher-description" class="hidden">This button displays the currently selected search type. When expanded it provides a list of search options that will switch the search inputs to match the current selection. </div>  <div class="switcher-tabs hidden z-[1] w-auto min-w-[160px] mb-1.5 py-1 absolute top-[48px] left-0 border-solid border-1 border-color-border-faint papabear:container-raised babymamabear:static babymamabear:w-[100vw] babymamabear:h-[48px] babymamabear:p-0 overflow-y-hidden overflow-x-auto md:overflow-x-hidden"> <ul class="switcher-tabs__list flex flex-1 items-stretch papabear:flex-col" role="tablist"> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="jobs-search-panel" aria-selected="false" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer " data-switcher-type="JOBS" data-tracking-control-name="learning-course_switcher-tabs-jobs-search-switcher" id="job-switcher-tab" role="tab"> Jobs </button> </li> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="people-search-panel" aria-selected="false" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer " data-switcher-type="PEOPLE" data-tracking-control-name="learning-course_switcher-tabs-people-search-switcher" id="people-switcher-tab" role="tab"> People </button> </li> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="learning-search-panel" aria-selected="true" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer tab-selected" data-switcher-type="LEARNING" data-tracking-control-name="learning-course_switcher-tabs-learning-search-switcher" id="learning-switcher-tab" role="tab"> Learning </button> </li> </ul> <button aria-label="Close" class="switcher-tabs__cancel-btn papabear:hidden block w-6 h-6 m-auto text-color-text-low-emphasis" data-tracking-control-name="learning-course_switcher-tabs-cancel-search-switcher" type="button"> <icon class="switcher-tabs__cancel-icon block w-3 h-3 m-auto onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </div> </div> <section class="base-search-bar w-full h-full" data-searchbar-type="PEOPLE" aria-labelledby="people-switcher-tab" id="people-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/pub/dir" data-tracking-control-name="learning-course_people-search-bar_base-search-bar-form"> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="First Name" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_people-search-bar_first-name_dismissable-input" maxlength="500" name="firstName" placeholder="First Name" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_people-search-bar_first-name_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="Last Name" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_people-search-bar_last-name_dismissable-input" maxlength="500" name="lastName" placeholder="Last Name" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_people-search-bar_last-name_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input name="trk" value="learning-course_people-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Search" data-tracking-control-name="learning-course_people-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section> <section class="base-search-bar w-full h-full" data-searchbar-type="JOBS" aria-labelledby="job-switcher-tab" id="jobs-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/jobs/search" data-tracking-control-name="learning-course_jobs-search-bar_base-search-bar-form"> <code id="i18n_aria_live_text_no-suggestions" style="display: none"></code> <code id="i18n_aria_live_text_one-suggestion" style="display: none"></code> <code id="i18n_aria_live_text_multiple-suggestions" style="display: none"></code> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 typeahead-input keywords-typeahead-input text-input"> <input aria-autocomplete="list" aria-controls="job-search-bar-keywords-typeahead-list" aria-haspopup="listbox" aria-label="Search job titles or companies" autocomplete="off" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_dismissable-input" id="job-search-bar-keywords" maxlength="500" name="keywords" placeholder="Search job titles or companies" role="combobox" type="search">  <div class="typeahead-input__dropdown container-lined absolute top-[calc(100%+3px)] left-0 w-full rounded-b-md rounded-t-none z-[10] overflow-hidden max-w-none babybear:min-w-full babybear:bottom-0 babybear:overflow-y-auto"> <template class="typeahead-item-template"> <li class="typeahead-input__dropdown-item py-1.5 px-2 hover:cursor-pointer hover:bg-color-surface-new-hover hover:border-y-2 hover:border-solid hover:border-color-container-primary" role="option"> <span class="typeahead-input__dropdown-text font-sans text-sm font-bold text-color-text"></span> </li> </template> <ul class="typeahead-input__dropdown-list w-full" id="job-search-bar-keywords-typeahead-list" role="listbox"></ul> </div>  <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section>  <code id="i18n_aria_live_text_no-suggestions" style="display: none"></code> <code id="i18n_aria_live_text_one-suggestion" style="display: none"></code> <code id="i18n_aria_live_text_multiple-suggestions" style="display: none"></code> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 typeahead-input location-typeahead-input"> <input aria-autocomplete="list" aria-controls="job-search-bar-location-typeahead-list" aria-haspopup="listbox" aria-label="Location" autocomplete="off" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_dismissable-input" id="job-search-bar-location" maxlength="500" name="location" placeholder="Location" role="combobox" value="Hong Kong" type="search">  <div class="typeahead-input__dropdown container-lined absolute top-[calc(100%+3px)] left-0 w-full rounded-b-md rounded-t-none z-[10] overflow-hidden max-w-none babybear:min-w-full babybear:bottom-0 babybear:overflow-y-auto"> <template class="typeahead-item-template"> <li class="typeahead-input__dropdown-item py-1.5 px-2 hover:cursor-pointer hover:bg-color-surface-new-hover hover:border-y-2 hover:border-solid hover:border-color-container-primary" role="option"> <span class="typeahead-input__dropdown-text font-sans text-sm font-bold text-color-text"></span> </li> </template> <ul class="typeahead-input__dropdown-list w-full" id="job-search-bar-location-typeahead-list" role="listbox"></ul> </div>  <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input name="geoId" value="102817007" type="hidden"> <input name="trk" value="learning-course_jobs-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Search" data-tracking-control-name="learning-course_jobs-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section> <section class="base-search-bar w-full h-full" data-searchbar-type="LEARNING" aria-labelledby="learning-switcher-tab" id="learning-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/learning/search" data-tracking-control-name="learning-course_learning-search-bar_base-search-bar-form"> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="Search skills, subjects, or software" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_learning-search-bar_keywords_dismissable-input" maxlength="500" name="keywords" placeholder="Search skills, subjects, or software" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_learning-search-bar_keywords_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input class="nav__search-uoo" name="upsellOrderOrigin" type="hidden"> <input name="trk" value="learning-course_learning-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Search" data-tracking-control-name="learning-course_learning-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section>  <div aria-live="polite" class="search-bar__live-text sr-only" role="status"></div> </section>  <div class="nav__cta-container order-3 flex gap-x-1 justify-end min-w-[100px] flex-nowrap flex-shrink-0 babybear:flex-wrap flex-2 babymamabear:min-w-[50px] "> <a class="nav__button-tertiary btn-md btn-tertiary" href="http://www.linkedin.com/learning/subscription/products?courseSlug=css-essential-training-22688362&destRedirectURL=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-essential-training-22688362%2Fweb-fonts-with-font-face&trk=learning-course_nav-header-join&upsellTrk=lil_upsell_nav_subscription&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcss-essential-training-22688362%3Ftrk%3Dlearning-course_tocItem" data-tracking-control-name="lil_upsell_nav_subscription" data-tracking-impression-name="lil_upsell_nav_subscription" data-test-live-nav-primary-cta data-tracking-will-navigate> Start free trial </a> <a class="nav__button-secondary btn-md btn-secondary-emphasis" href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-essential-training-22688362%3Ftrk%3Dlearning-course_tocItem%26trk%3Dlearning-course_tocItem&fromSignIn=true&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcss-essential-training-22688362%3Ftrk%3Dlearning-course_tocItem&trk=learning-course_nav-header-signin" data-tracking-control-name="learning-course_nav-header-signin" data-tracking-will-navigate> Sign in </a> <a aria-label="Sign in" class="nav__link-person papabear:hidden mamabear:hidden" data-tracking-control-name="learning-course_nav-header-signin" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-essential-training-22688362%3Ftrk%3Dlearning-course_tocItem%26trk%3Dlearning-course_tocItem&fromSignIn=true&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcss-essential-training-22688362%3Ftrk%3Dlearning-course_tocItem&trk=learning-course_nav-header-signin"> <img class="inline-block relative rounded-[50%] w-4 h-4 bg-color-entity-ghost-background" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt> </a> </div>   </nav> </header>  <div class="cta-banner "> <div class="enterprise-nav"> <div class="enterprise-nav__content-wrapper"> <p id="enterprise-nav-solutions" class="enterprise-nav__content" tabindex="-1"> Solutions for: </p> <a href="https://learning.linkedin.com/for-entire-companies?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-business" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-business">Business</a> <a href="https://learning.linkedin.com/for-higher-education?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-education" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-education">Higher Education</a> <a href="https://learning.linkedin.com/for-governments?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-government" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-government">Government</a> <a href="/learning/subscription/teams?veh=lil_upx&src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-buy" class="enterprise-nav__content" data-test-live-enterprise-upsell="true" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" data-tracking-impression-name="lil_upsell_learning-course_enterprise-nav_teambuy" id="business-nav-buy">Buy for my team</a> </div> </div>   </div> <main class="main papabear:flex papabear:w-content-max-w papabear:mx-auto papabear:pt-desktop-content-top-margin mamabear:pt-desktop-content-top-margin " id="main-content" role="main"> <section class="core-rail mx-auto papabear:w-core-rail-width mamabear:max-w-[790px] babybear:max-w-[790px]"> <p class="pre-headline"> From the course: <a href="https://www.linkedin.com/learning/css-essential-training-22688362?trk=course_title" data-tracking-control-name="course_title" data-tracking-will-navigate="true" class="from-the-course__link">CSS Essential Training</a> </p> <section class="top-card"> <section class="top-card-layout container-lined overflow-hidden babybear:rounded-[0px]"> <section class="top-card__video-wrapper"> <div class="top-card__video"> <div class="hero-upsell"> <div class="hero-upsell__text-wrap"> <h3 class="hero-upsell__headline"> <icon class="lock-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/2k4trx87nbhljt0s01sd4q7qi"></icon> Unlock the full course today </h3> <h4 class="hero-upsell__subheadline"> Join today to access over 24,100 courses taught by industry experts. </h4> </div> </div> <img class="top-card__video-image" data-delayed-url="https://media.licdn.com/dms/image/v2/D560DAQFbwOobZ3xBZg/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1691438871844?e=2147483647&v=beta&t=klsoR7dlyYB5m4UfG6pT9o2eu4xK-9agetTIp67MNtQ" alt="Web fonts with @font-face">  </div> </section> <div class="top-card-layout__card relative p-2 papabear:p-details-container-padding"> <div class="top-card-layout__entity-info-container flex flex-wrap papabear:flex-nowrap"> <div class="top-card-layout__entity-info flex-grow flex-shrink-0 basis-0 babybear:flex-none babybear:w-full babybear:flex-none babybear:w-full"> <h1 class="top-card-layout__title font-sans text-lg papabear:text-xl font-bold leading-open text-color-text mb-0"> Web fonts with @font-face - <a href="https://www.linkedin.com/learning/topics/css-2?trk=video_title_to_software_topic" data-tracking-will-navigate="true" data-tracking-control-name="video_title_to_software_topic">CSS</a> Tutorial </h1> <h2 class="top-card-layout__headline break-words font-sans text-md leading-open text-color-text"> From the course: <a href="https://www.linkedin.com/learning/css-essential-training-22688362?trk=course_title" data-tracking-control-name="course_title" data-tracking-will-navigate="true" class="from-the-course__link">CSS Essential Training</a> </h2>   <div class="top-card-layout__cta-container flex flex-wrap mt-0.5 papabear:mt-0 ml-[-12px]"> <a href="http://www.linkedin.com/learning/subscription/products?courseSlug=css-essential-training-22688362&destRedirectURL=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-essential-training-22688362%2Fweb-fonts-with-font-face&trk=course_info&upsellTrk=lil_upsell_course_info_subscription" data-tracking-control-name="lil_upsell_course_info_subscription" data-tracking-impression-name="lil_upsell_course_info_subscription" data-litms-tracking-control-name="lil_upsell_course_info_subscription" data-tracking-will-navigate class="top-card__upsell-link top-card-layout__cta mt-2 ml-1.5 h-auto babybear:flex-auto top-card-layout__cta--primary btn-md btn-primary" data-test-live-course-sub-upsell> Start my 1-month free trial </a> <a class="buy-for-your-team-cta__link top-card-layout__cta mt-2 ml-1.5 h-auto babybear:flex-auto top-card-layout__cta--secondary btn-md btn-secondary" href="/learning/subscription/teams?veh=lil_upx&src=li-lil-upsell&trk=learning-course_buy-for-your-team-cta" data-tracking-control-name="learning-course_buy-for-your-team-cta" data-tracking-impression-name="lil_upsell_learning-course_buy-for-your-team-cta_teambuy" data-test-live-buy-for-your-team-upsell data-tracking-will-navigate> Buy for my team </a> </div> </div>  </div>   </div> </section> </section> <div class="details mx-details-container-padding"> <div class="tabs content-tabs" data-tab-id="course-content-tabs"> <ul class="tabs__list" role="tablist">  <li class="tab flex ml-3 first-of-type:ml-0" role="presentation"> <button aria-selected="true" class="tab-button tab-md tab-selected" data-tracking-control-name="transcripts-tab" data-id="tab__button" role="tab" id="content-tabs__transcripts-btn"> Transcripts </button> </li> <li class="tab flex ml-3 first-of-type:ml-0" role="presentation"> <button aria-selected="false" class="tab-button tab-md " data-tracking-control-name="files-tab" data-id="tab__button" role="tab" tabindex="-1" id="content-tabs__files-btn" data-test-live-exercise-files-tab> Exercise Files </button> </li> <li class="tab flex ml-3 first-of-type:ml-0" role="presentation"> <button aria-selected="false" class="tab-button tab-md " data-tracking-control-name="offline-tab" data-id="tab__button" role="tab" tabindex="-1" id="content-tabs__offline-btn" data-test-live-offline-tab> View Offline </button> </li> </ul>  <div class="tab__panel" tabindex="0" role="tabpanel"> <section class="core-section-container my-3 transcripts">  <h2 class="core-section-container__title section-title"> Web fonts with @font-face </h2>  <div class="core-section-container__content break-words"> <div class="transcripts__copy"> <span class="transcripts__quotation">“</span> <p> - Typography is an important part of web design and in the past, the options of available fonts were limited to a small selection of web-safe fonts. However, with the introduction of the CSS @font-face rule, our options have expanded to include web fonts. This means that instead of relying on fonts installed on a user's computer, font files can now be downloaded along with your website just like any other resource, such as images or PDFs. Web fonts are added using the @font-face rule. The syntax looks similar to the CSS declarations we've been writing so far, but we're not selecting or applying styles to any elements. Instead, we're writing instructions. Let's take a closer look at each part. Start the declaration with @font-face and the curly brackets. This must be declared in your style sheet before you can use your font, then add font-family. In this context, it's used to define the name of the font family. You can… </p> </div> </div> </section> </div> <div class="tab__panel" tabindex="0" role="tabpanel" hidden> <section class="core-section-container my-3 exercise-files" data-test-live-files-panel>  <h2 class="core-section-container__title section-title"> Practice while you learn with exercise files </h2>  <div class="core-section-container__content break-words"> <p class="exercise-files__description"> Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing. </p> <ul class="exercise-files__list"> <li class="exercise-files__file"> <a href="http://www.linkedin.com/learning/subscription/products?courseSlug=css-essential-training-22688362&destRedirectURL=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-essential-training-22688362%2Fweb-fonts-with-font-face&trk=exercise_file&upsellTrk=lil_upsell_exercise_file_subscription" data-tracking-control-name="lil_upsell_exercise_file_subscription" data-tracking-impression-name="lil_upsell_exercise_file_subscription" data-litms-tracking-control-name="lil_upsell_exercise_file_subscription" data-tracking-will-navigate class="exercise-files__file-upsell-link" data-test-live-files-sub-upsell> <span class="exercise-files__lock-icon-container"> <span class="a11y-text"> Exercise File: Subscribe to access. </span> <icon class="exercise-files__lock-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/2k4trx87nbhljt0s01sd4q7qi"></icon> </span> <span class="exercise-files__file-name"> Ex_Files_CSS_EssT.zip </span> </a> </li> </ul> <div class="footer-upsell-link"> <span class="footer-upsell-link__description"> Download the exercise files for this course. </span> <a href="http://www.linkedin.com/learning/subscription/products?courseSlug=css-essential-training-22688362&destRedirectURL=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-essential-training-22688362%2Fweb-fonts-with-font-face&trk=exercise_file&upsellTrk=lil_upsell_exercise_file_subscription" data-tracking-control-name="lil_upsell_exercise_file_subscription" data-tracking-impression-name="lil_upsell_exercise_file_subscription" data-litms-tracking-control-name="lil_upsell_exercise_file_subscription" data-tracking-will-navigate class="exercise-files__upsell-link" data-test-live-files-footer-sub-upsell> Get started with a free trial today. </a> </div> </div> </section> </div> <div class="tab__panel" tabindex="0" role="tabpanel" hidden> <section class="core-section-container my-3 offline">  <h2 class="core-section-container__title section-title"> Download courses and learn on the go </h2>  <div class="core-section-container__content break-words"> <p class="offline__description"> Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app. </p> <div class="offline__link-container"> <a class="offline__link" href="https://itunes.apple.com/app/apple-store/id1084807225?ls=1&pt=10746&mt=8&ct=learning_course_tab_viewoffline&trk=apple_app_store" data-tracking-control-name="apple_app_store" data-tracking-will-navigate rel="noopener noreferrer" target="_blank"> <img alt="Download on the App Store" class="offline__image" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/emczv26hz24woii2j4aleyry"> </a> <a class="offline__link" href="https://play.google.com/store/apps/details?id=com.linkedin.android.learning&referrer=utm_source%3Dlinkedinlearning%26utm_medium%3DmobileWeb%26utm_campaign%3Dlearning_guest&ct=learning_course_tab_viewoffline&trk=google_play_store" data-tracking-control-name="google_play_store" data-tracking-will-navigate rel="noopener noreferrer" target="_blank"> <img alt="Get it on Google Play" class="offline__image" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/535kqf5rsexfx0lucb3t6palb"> </a> </div> <div class="footer-upsell-link"> <span class="footer-upsell-link__description"> Watch this course anytime, anywhere. </span> <a href="http://www.linkedin.com/learning/subscription/products?courseSlug=css-essential-training-22688362&destRedirectURL=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-essential-training-22688362%2Fweb-fonts-with-font-face&trk=offline_viewing&upsellTrk=lil_upsell_offline_viewing_subscription" data-tracking-control-name="lil_upsell_offline_viewing_subscription" data-tracking-impression-name="lil_upsell_offline_viewing_subscription" data-litms-tracking-control-name="lil_upsell_offline_viewing_subscription" data-tracking-will-navigate class="offline__upsell-link" data-test-live-offline-footer-sub-upsell> Get started with a free trial today. </a> </div> </div> </section> </div> </div> </div> </section> <section class="right-rail papabear:w-right-rail-width papabear:ml-column-gutter mamabear:max-w-[790px] mamabear:px-mobile-container-padding babybear:max-w-[790px] babybear:px-mobile-container-padding"> <section class="table-of-contents mb-4"> <h2 class="table-of-contents__header"> Contents </h2> <ul class="table-of-contents__list"> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Introduction <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Introduction <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/getting-started-with-css?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Getting started with CSS </div> <div class="table-of-contents__item-duration"> 43s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/what-you-should-know?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> What you should know </div> <div class="table-of-contents__item-duration"> 26s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/how-to-complete-the-exercises?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> How to complete the exercises </div> <div class="table-of-contents__item-duration"> 1m 29s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 1. Getting Started <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 1. Getting Started <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/html-and-css?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> HTML and CSS </div> <div class="table-of-contents__item-duration"> 1m 10s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/working-with-website-files?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Working with website files </div> <div class="table-of-contents__item-duration"> 3m 25s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/writing-code-with-a-text-editor?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Writing code with a text editor </div> <div class="table-of-contents__item-duration"> 3m 40s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/customizing-your-text-editor?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Customizing your text editor </div> <div class="table-of-contents__item-duration"> 3m 29s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-overview-and-setup?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Overview and setup </div> <div class="table-of-contents__item-duration"> 7m 46s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/where-to-find-images?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Where to find images </div> <div class="table-of-contents__item-duration"> 2m 52s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/optimizing-images-for-the-web?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Optimizing images for the web </div> <div class="table-of-contents__item-duration"> 3m 41s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/relative-and-absolute-paths?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Relative and absolute paths </div> <div class="table-of-contents__item-duration"> 2m 43s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-adding-images-and-icons?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Adding images and icons </div> <div class="table-of-contents__item-duration"> 7m 13s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/referencing-css?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Referencing CSS </div> <div class="table-of-contents__item-duration"> 2m 44s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-creating-a-css-file?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Creating a CSS file </div> <div class="table-of-contents__item-duration"> 3m 4s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 2. CSS Core Concepts <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 2. CSS Core Concepts <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/css-specifications-and-the-w3c?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> CSS specifications and the W3C </div> <div class="table-of-contents__item-duration"> 3m 12s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/css-syntax-and-terminology?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> CSS syntax and terminology </div> <div class="table-of-contents__item-duration"> 4m 2s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/css-values-and-units?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> CSS values and units </div> <div class="table-of-contents__item-duration"> 3m 33s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/the-color-property-and-values?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> The color property and values </div> <div class="table-of-contents__item-duration"> 4m 31s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/creating-a-color-palette?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Creating a color palette </div> <div class="table-of-contents__item-duration"> 1m 52s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/type-and-universal-selectors?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Type and universal selectors </div> <div class="table-of-contents__item-duration"> 3m 16s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/id-selectors?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> ID selectors </div> <div class="table-of-contents__item-duration"> 2m 34s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/class-selectors?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Class selectors </div> <div class="table-of-contents__item-duration"> 3m 17s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/descendant-combinators-and-selector-lists?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Descendant combinators and selector lists </div> <div class="table-of-contents__item-duration"> 2m 56s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/the-background-property?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> The background property </div> <div class="table-of-contents__item-duration"> 4m 39s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-prepping-the-css-file?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Prepping the CSS file </div> <div class="table-of-contents__item-duration"> 4m 5s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-adding-background-styles?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Adding background styles </div> <div class="table-of-contents__item-duration"> 7m 39s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/pseudo-classes-and-pseudo-elements?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Pseudo-classes and pseudo-elements </div> <div class="table-of-contents__item-duration"> 4m 30s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/inheritance-and-the-cascade?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Inheritance and the cascade </div> <div class="table-of-contents__item-duration"> 2m 20s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/specificity?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Specificity </div> <div class="table-of-contents__item-duration"> 3m 45s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-styling-links?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Styling links </div> <div class="table-of-contents__item-duration"> 5m 23s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 3. The CSS Box Model <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 3. The CSS Box Model <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/intro-to-the-css-box-model?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Intro to the CSS box model </div> <div class="table-of-contents__item-duration"> 58s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/the-box-model-properties?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> The box model properties </div> <div class="table-of-contents__item-duration"> 3m 44s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/box-sizing-and-the-box-model-fix?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Box-sizing and the box model fix </div> <div class="table-of-contents__item-duration"> 4m 23s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/inline-block-and-display?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Inline, block, and display </div> <div class="table-of-contents__item-duration"> 4m 39s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-footer-styles-and-icons?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Footer styles and icons </div> <div class="table-of-contents__item-duration"> 4m 4s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/debugging-with-developer-tools?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Debugging with developer tools </div> <div class="table-of-contents__item-duration"> 5m 6s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/managing-box-model-quirks?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Managing box model quirks </div> <div class="table-of-contents__item-duration"> 4m 2s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-background-image-update?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Background image update </div> <div class="table-of-contents__item-duration"> 3m 23s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/using-negative-margin-values?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Using negative margin values </div> <div class="table-of-contents__item-duration"> 2m 42s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/center-aligning-with-margin?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Center aligning with margin </div> <div class="table-of-contents__item-duration"> 3m 42s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-adding-content-wrappers?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Adding content wrappers </div> <div class="table-of-contents__item-duration"> 4m 44s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-adding-a-header-image?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Adding a header image </div> <div class="table-of-contents__item-duration"> 5m 56s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 4. Layouts: Float and Position <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 4. Layouts: Float and Position <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/intro-to-css-layout?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Intro to CSS Layout </div> <div class="table-of-contents__item-duration"> 1m </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/layouts-with-the-float-property?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Layouts with the float property </div> <div class="table-of-contents__item-duration"> 3m 50s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/clearing-floats?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Clearing floats </div> <div class="table-of-contents__item-duration"> 3m 23s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-float-images-and-text?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Float images and text </div> <div class="table-of-contents__item-duration"> 6m 47s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/the-position-property?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> The position property </div> <div class="table-of-contents__item-duration"> 5m 12s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/position-and-z-index?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Position and z-index </div> <div class="table-of-contents__item-duration"> 4m 11s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-fixed-positioning?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Fixed positioning </div> <div class="table-of-contents__item-duration"> 3m 21s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 5. Layouts: Flexbox and Grid <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 5. Layouts: Flexbox and Grid <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/intro-to-grid-and-flexbox?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Intro to Grid and Flexbox </div> <div class="table-of-contents__item-duration"> 59s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/intro-to-flexbox?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Intro to Flexbox </div> <div class="table-of-contents__item-duration"> 2m 25s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/flexbox-orientation-and-ordering?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Flexbox: Orientation and ordering </div> <div class="table-of-contents__item-duration"> 3m 1s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/sizing-with-flex-properties?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Sizing with flex properties </div> <div class="table-of-contents__item-duration"> 2m 29s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/flexbox-exercise?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Flexbox exercise </div> <div class="table-of-contents__item-duration"> 3m 51s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-sticky-footer-with-flexbox?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Sticky footer with flexbox </div> <div class="table-of-contents__item-duration"> 5m 39s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/aligning-flex-items?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Aligning flex items </div> <div class="table-of-contents__item-duration"> 3m 20s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-aligning-elements-with-flexbox?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Aligning elements with Flexbox </div> <div class="table-of-contents__item-duration"> 3m 41s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/intro-to-css-grid?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Intro to CSS Grid </div> <div class="table-of-contents__item-duration"> 2m 23s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/the-explicit-grid?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> The explicit grid </div> <div class="table-of-contents__item-duration"> 3m 59s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/the-implicit-grid?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> The implicit grid </div> <div class="table-of-contents__item-duration"> 2m 58s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/adding-gutters-with-the-gap-property?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Adding gutters with the gap property </div> <div class="table-of-contents__item-duration"> 1m 21s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-adding-columns-with-grid?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Adding columns with Grid </div> <div class="table-of-contents__item-duration"> 8m 15s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button show-more-less__button--hide" aria-expanded="true" data-tracking-control-name="learning-course_toc-section_show_more"> 6. Typography <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button " aria-expanded="true" data-tracking-control-name="learning-course_toc-section_show_more"> 6. Typography <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list " data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/typography-for-the-web?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Typography for the web </div> <div class="table-of-contents__item-duration"> 3m 11s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/changing-fonts-with-font-family?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Changing fonts with font-family </div> <div class="table-of-contents__item-duration"> 2m 59s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/font-weight-and-font-style?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> font-weight and font-style </div> <div class="table-of-contents__item-duration"> 3m 3s </div> </div> </a> </li> <li class="toc-item toc-item--active"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/web-fonts-with-font-face?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="true"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Web fonts with @font-face </div> <div class="table-of-contents__item-duration"> 2m 31s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/web-fonts-with-google-fonts?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Web fonts with Google Fonts </div> <div class="table-of-contents__item-duration"> 3m 18s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-google-fonts?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Google Fonts </div> <div class="table-of-contents__item-duration"> 4m 5s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/the-font-size-property?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> The font-size property </div> <div class="table-of-contents__item-duration"> 4m 6s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/font-size-and-accessibility?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Font-size and accessibility </div> <div class="table-of-contents__item-duration"> 6m 39s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/text-align-and-text-transform?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Text-align and text-transform </div> <div class="table-of-contents__item-duration"> 3m 26s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/line-height-and-letter-spacing?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Line-height and letter-spacing </div> <div class="table-of-contents__item-duration"> 3m 22s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-typography-styles?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Typography styles </div> <div class="table-of-contents__item-duration"> 6m 56s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-buttons-and-spacing?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Buttons and spacing </div> <div class="table-of-contents__item-duration"> 9m 23s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 7. Layouts: Fluid and Responsive <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 7. Layouts: Fluid and Responsive <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/intro-to-responsive-design?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Intro to responsive design </div> <div class="table-of-contents__item-duration"> 1m 29s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/intro-to-media-queries?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Intro to media queries </div> <div class="table-of-contents__item-duration"> 4m 32s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/breakpoints-and-media-queries?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Breakpoints and media queries </div> <div class="table-of-contents__item-duration"> 3m 32s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/fluid-layouts?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Fluid layouts </div> <div class="table-of-contents__item-duration"> 2m 36s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/the-viewport-meta-tag?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> The viewport meta tag </div> <div class="table-of-contents__item-duration"> 1m 53s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/testing-responsive-layouts?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Testing responsive layouts </div> <div class="table-of-contents__item-duration"> 3m 1s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-breakpoints?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Breakpoints </div> <div class="table-of-contents__item-duration"> 3m 38s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-media-queries-part-1?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Media queries: Part 1 </div> <div class="table-of-contents__item-duration"> 12m 26s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-media-queries-part-2?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Media queries: Part 2 </div> <div class="table-of-contents__item-duration"> 8m 26s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/project-media-queries-part-3?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Project: Media queries: Part 3 </div> <div class="table-of-contents__item-duration"> 6m 17s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Conclusion <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Conclusion <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-essential-training-22688362/continuing-beyond-the-essentials-with-css?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Continuing beyond the essentials with CSS </div> <div class="table-of-contents__item-duration"> 42s </div> </div> </a> </li> </ul>  </div> </li> </ul> </section> </section> </main> <div class="pre-footer "> <section class="core-section-container my-3 price-disclaimer">    <div class="core-section-container__content break-words"> <p class="price-disclaimer__copy"> <sup class="price-disclaimer__copy--sup">*</sup>Price may change based on profile and billing country information entered during Sign In or Registration </p> </div> </section> <section class="tw-linkster bg-cool-gray-20 browse-map" data-impression-id="learning-course_linkster" data-js-module-id="linkster"> <div class="max-w-screen-content-max-w w-full flex justify-between my-0 mx-auto mamabear:px-3 babybear:px-2 babybear:flex-col"> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Explore Business Topics </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/business-analysis-and-strategy?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Business Analysis and Strategy </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/business-software-and-tools?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Business Software and Tools </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/career-development-5?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Career Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/customer-service-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Customer Service </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/diversity-equity-and-inclusion-dei?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Diversity, Equity, and Inclusion (DEI) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/finance-and-accounting?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Finance and Accounting </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/human-resources-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Human Resources </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/leadership-and-management?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Leadership and Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/marketing-2?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Marketing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/professional-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Professional Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/project-management?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Project Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/sales-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Sales </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/small-business-and-entrepreneurship?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Small Business and Entrepreneurship </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/training-and-education?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Training and Education </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="See all business courses" href="https://www.linkedin.com/learning/topics/business?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> See all </a> </div> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Explore Creative Topics </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/aec?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> AEC </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/animation-and-illustration?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Animation and Illustration </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/audio-and-music?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Audio and Music </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/graphic-design?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Graphic Design </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/motion-graphics-and-vfx?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Motion Graphics and VFX </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/photography-2?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Photography </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/product-and-manufacturing?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Product and Manufacturing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/user-experience?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> User Experience </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/2015-54?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Video </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/visualization-and-real-time?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Visualization and Real-Time </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/web-design?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Web Design </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="See all creative courses" href="https://www.linkedin.com/learning/topics/creative?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> See all </a> </div> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Explore Technology Topics </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/artificial-intelligence?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Artificial Intelligence (AI) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/cloud-computing-5?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Cloud Computing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/security-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Cybersecurity </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/data-science?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Data Science </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/database-management?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Database Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/devops?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> DevOps </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/hardware?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Hardware </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/it-help-desk-5?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> IT Help Desk </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/mobile-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Mobile Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/network-and-system-administration?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Network and System Administration </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/software-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Software Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/web-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Web Development </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="See all technology courses" href="https://www.linkedin.com/learning/topics/technology?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> See all </a> </div> </div> </section> </div> <footer class="li-footer bg-transparent w-full "> <ul class="li-footer__list flex flex-wrap flex-row items-start justify-start w-full h-auto min-h-[50px] my-[0px] mx-auto py-3 px-2 papabear:w-[1128px] papabear:p-0"> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <span class="sr-only">LinkedIn</span> <icon class="li-footer__copy-logo text-color-logo-brand-alt inline-block self-center h-[14px] w-[56px] mr-1" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/e12h2cd8ac580qen9qdd0qks8"></icon> <span class="li-footer__copy-text flex items-center">© 2024</span> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://about.linkedin.com?trk=d_learning_course_video_guest_footer-about" data-tracking-control-name="d_learning_course_video_guest_footer-about" data-tracking-will-navigate> About </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/accessibility?trk=d_learning_course_video_guest_footer-accessibility" data-tracking-control-name="d_learning_course_video_guest_footer-accessibility" data-tracking-will-navigate> Accessibility </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/user-agreement?trk=d_learning_course_video_guest_footer-user-agreement" data-tracking-control-name="d_learning_course_video_guest_footer-user-agreement" data-tracking-will-navigate> User Agreement </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/privacy-policy?trk=d_learning_course_video_guest_footer-privacy-policy" data-tracking-control-name="d_learning_course_video_guest_footer-privacy-policy" data-tracking-will-navigate> Privacy Policy </a> </li>  <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/cookie-policy?trk=d_learning_course_video_guest_footer-cookie-policy" data-tracking-control-name="d_learning_course_video_guest_footer-cookie-policy" data-tracking-will-navigate> Cookie Policy </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/copyright-policy?trk=d_learning_course_video_guest_footer-copyright-policy" data-tracking-control-name="d_learning_course_video_guest_footer-copyright-policy" data-tracking-will-navigate> Copyright Policy </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://brand.linkedin.com/policies?trk=d_learning_course_video_guest_footer-brand-policy" data-tracking-control-name="d_learning_course_video_guest_footer-brand-policy" data-tracking-will-navigate> Brand Policy </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/psettings/guest-controls?trk=d_learning_course_video_guest_footer-guest-controls" data-tracking-control-name="d_learning_course_video_guest_footer-guest-controls" data-tracking-will-navigate> Guest Controls </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/professional-community-policies?trk=d_learning_course_video_guest_footer-community-guide" data-tracking-control-name="d_learning_course_video_guest_footer-community-guide" data-tracking-will-navigate> Community Guidelines </a> </li>  <li class="li-footer__item font-sans text-xs text-color-text-low-emphasis flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <div class="collapsible-dropdown collapsible-dropdown--footer collapsible-dropdown--up flex items-center relative hyphens-auto language-selector z-2">  <ul class="collapsible-dropdown__list hidden container-raised absolute w-auto overflow-y-auto flex-col items-stretch z-1 bottom-[100%] top-auto" role="menu" tabindex="-1"> <li class="language-selector__item" role="presentation">  <button aria-label="العربية (Arabic)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ar_AE" data-locale="ar_AE" role="menuitem" lang="ar_AE"> العربية (Arabic) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="বাংলা (Bangla)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-bn_IN" data-locale="bn_IN" role="menuitem" lang="bn_IN"> বাংলা (Bangla) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Čeština (Czech)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-cs_CZ" data-locale="cs_CZ" role="menuitem" lang="cs_CZ"> Čeština (Czech) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Dansk (Danish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-da_DK" data-locale="da_DK" role="menuitem" lang="da_DK"> Dansk (Danish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Deutsch (German)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-de_DE" data-locale="de_DE" role="menuitem" lang="de_DE"> Deutsch (German) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Ελληνικά (Greek)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-el_GR" data-locale="el_GR" role="menuitem" lang="el_GR"> Ελληνικά (Greek) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="English (English) selected" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link--selected" data-tracking-control-name="language-selector-en_US" data-locale="en_US" role="menuitem" lang="en_US"> <strong>English (English)</strong> </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Español (Spanish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-es_ES" data-locale="es_ES" role="menuitem" lang="es_ES"> Español (Spanish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="فارسی (Persian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fa_IR" data-locale="fa_IR" role="menuitem" lang="fa_IR"> فارسی (Persian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Suomi (Finnish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fi_FI" data-locale="fi_FI" role="menuitem" lang="fi_FI"> Suomi (Finnish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Français (French)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fr_FR" data-locale="fr_FR" role="menuitem" lang="fr_FR"> Français (French) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="हिंदी (Hindi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-hi_IN" data-locale="hi_IN" role="menuitem" lang="hi_IN"> हिंदी (Hindi) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Magyar (Hungarian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-hu_HU" data-locale="hu_HU" role="menuitem" lang="hu_HU"> Magyar (Hungarian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Bahasa Indonesia (Indonesian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-in_ID" data-locale="in_ID" role="menuitem" lang="in_ID"> Bahasa Indonesia (Indonesian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Italiano (Italian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-it_IT" data-locale="it_IT" role="menuitem" lang="it_IT"> Italiano (Italian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="עברית (Hebrew)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-iw_IL" data-locale="iw_IL" role="menuitem" lang="iw_IL"> עברית (Hebrew) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="日本語 (Japanese)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ja_JP" data-locale="ja_JP" role="menuitem" lang="ja_JP"> 日本語 (Japanese) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="한국어 (Korean)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ko_KR" data-locale="ko_KR" role="menuitem" lang="ko_KR"> 한국어 (Korean) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="मराठी (Marathi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-mr_IN" data-locale="mr_IN" role="menuitem" lang="mr_IN"> मराठी (Marathi) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Bahasa Malaysia (Malay)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ms_MY" data-locale="ms_MY" role="menuitem" lang="ms_MY"> Bahasa Malaysia (Malay) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Nederlands (Dutch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-nl_NL" data-locale="nl_NL" role="menuitem" lang="nl_NL"> Nederlands (Dutch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Norsk (Norwegian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-no_NO" data-locale="no_NO" role="menuitem" lang="no_NO"> Norsk (Norwegian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="ਪੰਜਾਬੀ (Punjabi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pa_IN" data-locale="pa_IN" role="menuitem" lang="pa_IN"> ਪੰਜਾਬੀ (Punjabi) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Polski (Polish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pl_PL" data-locale="pl_PL" role="menuitem" lang="pl_PL"> Polski (Polish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Português (Portuguese)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pt_BR" data-locale="pt_BR" role="menuitem" lang="pt_BR"> Português (Portuguese) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Română (Romanian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ro_RO" data-locale="ro_RO" role="menuitem" lang="ro_RO"> Română (Romanian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Русский (Russian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ru_RU" data-locale="ru_RU" role="menuitem" lang="ru_RU"> Русский (Russian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Svenska (Swedish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-sv_SE" data-locale="sv_SE" role="menuitem" lang="sv_SE"> Svenska (Swedish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="తెలుగు (Telugu)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-te_IN" data-locale="te_IN" role="menuitem" lang="te_IN"> తెలుగు (Telugu) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="ภาษาไทย (Thai)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-th_TH" data-locale="th_TH" role="menuitem" lang="th_TH"> ภาษาไทย (Thai) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Tagalog (Tagalog)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-tl_PH" data-locale="tl_PH" role="menuitem" lang="tl_PH"> Tagalog (Tagalog) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Türkçe (Turkish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-tr_TR" data-locale="tr_TR" role="menuitem" lang="tr_TR"> Türkçe (Turkish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Українська (Ukrainian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-uk_UA" data-locale="uk_UA" role="menuitem" lang="uk_UA"> Українська (Ukrainian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Tiếng Việt (Vietnamese)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-vi_VN" data-locale="vi_VN" role="menuitem" lang="vi_VN"> Tiếng Việt (Vietnamese) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="简体中文 (Chinese (Simplified))" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-zh_CN" data-locale="zh_CN" role="menuitem" lang="zh_CN"> 简体中文 (Chinese (Simplified)) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="正體中文 (Chinese (Traditional))" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-zh_TW" data-locale="zh_TW" role="menuitem" lang="zh_TW"> 正體中文 (Chinese (Traditional)) </button> </li>  </ul> <button class="language-selector__button select-none relative pr-2 font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover hover:cursor-pointer focus:text-color-link-focus focus:outline-dotted focus:outline-1" aria-expanded="false" data-tracking-control-name="footer-lang-dropdown_trigger"> <span class="language-selector__label-text mr-0.5 break-words"> Language </span> <icon class="language-selector__label-chevron w-2 h-2 absolute top-0 right-0" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> </div> </li> </ul>  </footer> <script src="https://static.licdn.com/aero-v1/sc/h/eh08muqvrde4h3hc6koyij5ti" async></script>  <script src="https://static.licdn.com/aero-v1/sc/h/ek2tdg64hm7rdsrulg3lyo2vc" async defer></script> <script data-delayed-url="https://static.licdn.com/aero-v1/sc/h/81wy0f4hfrhoilx9eqdwg202z" data-module-id="media-player"></script> <code id="trackingData" style="display: none"></code> <code id="alcOnlyData" style="display: none"></code> </body> </html>

CINXE.COM

Web fonts with @font-face - CSS Video Tutorial | LinkedIn Learning, formerly Lynda.com