Welcome to part five of the Dharma Yoga website series. In this video, we're going to start styling the main website CSS. This will be one of two videos focusing on the full-width CSS, while the last video will cover CSS for responsiveness and media queries. Let's open up the style.css document that you downloaded in the starter files. I'll keep index.html open so we can reference and style elements from the HTML. The first style we'll give is for the HTML document itself. This is called a reset style, which resets the default margin and padding. The reset style is important to ensure consistent styling across different web browsers and to eliminate any unwanted styles. Let's set the margin, border, and padding to zero: margin: 0; border: 0; padding: 0. Moving on to the body section, let's style the body element. We'll give it a background color. In this case, the background color is a off-white or yellowish color: background-color: #FEFBEF. Next, let's set the font family for the body. We're going to use the "Quicksand" font from Fonts. If the web browser doesn't recognize "Quicksand", it will fallback to a sans-serif font. Let's set the font family: font-family: "Quicksand", sans-serif. We'll also set the font size for the body. Let's set it to 18 pixels: font-size: 18px. Moving on to the heading one (h1) element, let's style it. We'll set the font family to "Shadows Into Light Two", and add a cursive style. We'll also align the heading one element to the center: font-family: "Shadows Into Light Two", cursive; text-align: center. Let's also set the font size for the heading one element. We'll use a percentage value for this example. Let's set it to 175%: font-size: 175%. Next, let's set the text color for the heading one element. We'll use a hex value for the...
Award-winning PDF software
Video instructions and help with filling out and completing Form 5495 Sites
