Page 1 of 1
Starting off CSS
Posted: Fri Mar 22, 2024 12:54 am
by ProjectX
head element within the html element
Add a head element within the html element, so you can add a title element. The title element's text should be Cafe Menu.
<head><title>Cafe Menu</title></head>
Re: Starting off CSS
Posted: Fri Mar 22, 2024 12:57 am
by ProjectX
Nesting a meta element with an attribute
The title is one of several elements that provide extra information not visible on the web page, but it is useful for search engines or how the page gets displayed.
Inside the head element, nest a meta element with an attribute named charset set to the value utf-8 to tell the browser how to encode characters for the page. Note that meta elements are self-closing.
<head>
<title>Cafe Menu</title>
<meta Charset="utf-8">
</head>
Re: Starting off CSS
Posted: Fri Mar 22, 2024 1:00 am
by ProjectX
Add a body element below the head element.
To prepare to create some actual content, add a body element below the head element.
<head>
<meta charset="utf-8"/>
<title>Cafe Menu</title>
</head>
<body></body>
Re: Starting off CSS
Posted: Fri Mar 22, 2024 1:02 am
by ProjectX
Main element within the existing body element
It's time to add some menu content. Add a main element within the existing body element. It will eventually contain pricing information about coffee and desserts offered by the cafe.
<body>
<main></main>
</body>
Re: Starting off CSS
Posted: Fri Mar 22, 2024 1:04 am
by ProjectX
Adding a main header -
Add an h1 element within your main element.
The name of the cafe is CAMPER CAFE. Add an h1 element within your main element. Give it the name of the cafe in capitalized letters to make it stand out.
<main>
<h1>CAMPER CAFE</h1>
</main>
Adding a Sub-header under the main header
To let visitors know the cafe was founded in 2020, add a p element below the h1 element with the text Est. 2020.
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
Re: Starting off CSS
Posted: Wed Mar 27, 2024 6:24 pm
by ProjectX
Adding a Menu to your webpage.
Adding two sections to a menu
There will be two sections on the menu, one for coffees and one for desserts. Add a section element within the main element so you have a place to put all the coffees available.
<main>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
<section></section>
</main>
Adding style and content to the menu
Up until now, you have been limited regarding the presentation and appearance of the content you create. To start taking control, add a style element within the head element.
<head>
<meta charset="utf-8" />
<title>Cafe Menu</title>
<style></style>
</head>
<body>
<main>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
<section>
<h2>Coffee</h2>
</section>
</main>
</body>