Part 3 of Dilesh Zingare’s beginner restaurant-website project series moves from the HTML-based page to CSS styling. The tutorial introduces selectors and properties such as color, background-color, text-align, padding, text-decoration and font-family; despite the series title, this is not a page styled with HTML alone. Read Part 3.
What Part 3 adds to the project
HTML provides the page structure; CSS controls its presentation. In this installment, the restaurant webpage gets styling through rules that target elements such as body and header. A selector identifies what to style, and declarations specify property/value pairs—for example, a color or background color.
As an Amazon Associate I earn from qualifying purchases.
The tutorial keeps the CSS in the HTML file, a convenient arrangement for a small one-page exercise. The same rules can instead live in a separate stylesheet. MDN describes external, internal and inline CSS as the three common ways to apply styles, and identifies external stylesheets as the most common and useful approach. MDN’s CSS getting-started guide explains the options.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Choose where the CSS belongs
| Approach | How it is applied | Useful when |
|---|---|---|
| Internal stylesheet | Rules go inside a <style> element in the document’s <head>. |
You want a small exercise’s HTML and CSS together, or cannot modify external files. |
| External stylesheet | A <link rel="stylesheet" href="styles.css"> element in the document head connects a separate file. |
You want to reuse styles across pages or keep structure and styling in separate files. If the stylesheet is in a subdirectory, adjust the href path. |
| Inline style | CSS is written on an individual HTML element. | You need a style attached directly to one element; for a site-wide design, it is less convenient to maintain than a stylesheet. |
Read a CSS rule
A basic rule has a selector followed by a block of declarations. For example, this illustrative rule targets the page body and sets two properties:
#1 Best Overall
body {
color: #222;
background-color: #fff;
}body is the selector. Inside the braces, each declaration pairs a property with a value: color sets text color, while background-color sets the background color. The Part 3 tutorial also introduces text-align for horizontal text alignment, padding for space inside an element, text-decoration for text decoration, and font-family for the typeface.
Use a background image URL correctly
A CSS background image can refer to a file in your project with a relative URL, or to an image at an absolute URL. For example, a local image could be written as:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
header {
background-image: url("images/background.jpg");
}The path is relative to the stylesheet’s location. If the CSS is inside a subdirectory, the relative path may need to change. CSS also supports data URLs, which embed image data and include their own media-type syntax. A data URL is not a fixed prefix to place in front of an ordinary web address. See MDN on CSS URL values, the url() function and background-image.
Use standard properties for alignment
For horizontal alignment of text, use text-align, such as text-align: center;. The tutorial mentions this property; its separate example also includes text-position. Do not rely on text-position as a standard CSS property for the alignment shown there. Use the property that expresses the intended effect.
Rank #3
Continue from the tutorial
This is a beginner project lesson rather than a complete reference to CSS. The tutorial links to a GitHub project reference, but the repository contents are not independently confirmed here. Treat the code and examples as a starting point: add rules incrementally, save the file, and check the rendered page in a browser to see how each property changes the presentation.
Quick Recap
Best Value
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
