Chapter 4: Pacific Trails Resort Case Study

In this tutorial, we take the existing Pacific Trails Resort website and update it using an external CSS stylesheet to configure colors, text, and layout styling. We'll create a new folder for Chapter 4, copy the existing site files, and build a pacific.css stylesheet. You'll learn how to: Use CSS selectors for body, header, nav, H1/H2, DT, and class elements Apply colors using hexadecimal codes Add comments and use Emmet shortcuts for faster coding Link an external CSS file to multiple HTML pages Test your CSS with the W3C validator Inspect and adjust the box model in the browser By the end of this tutorial, you'll see how a few lines of CSS can completely transform the look of your web pages while keeping them consistent and maintainable. RESOURCES: Emmet Cheat Sheet: https://docs.emmet.io/cheat-sheet/ w3c CSS Validator: http://jigsaw.w3.org/css-validator/validator CSS Syntax: https://www.w3schools.com/Css/css_syntax.asp CSS Hex Colors: https://www.w3schools.com/css/css_colors_hex.asp Firefox Developer Tools: https://developer.mozilla.org/en-US/docs/Tools 0:00 – Introduction: Overview of creating a new Pacific Trails Resort website with external CSS 1:05 – Setting Up Chapter 4 Folder: Creating chapter4 and copying pacific folder 2:15 – Renaming the Folder: Changing pacific to ch4pacific 3:05 – Creating the CSS File: Adding pacific.css and CSS basics overview 5:00 – Adding Body Styles: Using Emmet for background color and text color 7:10 – Styling the Header: Adding header background and text colors 8:50 – Styling Navigation (nav): Configuring nav background color 10:05 – Styling H2 and DT Elements: Applying text colors with CSS 11:25 – Creating a Class Selector: Adding .resort class styling 12:30 – Validating CSS: Using W3C CSS Validator 13:30 – Linking CSS to Index Page: Connecting pacific.css to index.html 15:20 – Applying Styles to Specific Text: Using span.resort for Pacific Trails Resort 16:50 – Linking CSS to Yurts Page: Connecting stylesheet to yurts.html 18:00 – Adding H1 Styles and Collapsing Margin: Removing default bottom margin 19:20 – Inspecting Styles in Browser: Using developer tools to check box model