Page 1 of 2
Designing a style for menus
Posted: Wed Mar 27, 2024 6:23 pm
by ProjectX
Designing a style for menus
You can add style to an element by specifying it in the style element and setting a property for it like this:
type selctor
element {
property: value;
}
Center your h1 element by setting its text-align property to the value center.
<style>
h1 {
text-align: center
}
</style>
Re: Designing a style for menus
Posted: Wed Mar 27, 2024 6:45 pm
by ProjectX
Support regarding editing
We write the selector name which in this case is the name of the element h1
Then we write a {
Then on the following line we add the first property name which in this case is text-align
Then we write a colon and one space
Then we write the value of the property which in this case is center
Then we add a semicolon
Then we write a } on the last line.
Re: Designing a style for menus
Posted: Wed Apr 03, 2024 10:44 pm
by ProjectX
In the previous step, you used a type selector to style the h1 element. Center the h2 and p elements by adding a new type selector for each one to the existing style element.
<style>
h1 {
text-align: center;
}
h2 {
text-align: center;
}
p {
text-align: center;
}
</style>
Re: Designing a style for menus
Posted: Wed Apr 03, 2024 10:58 pm
by ProjectX
Now you need to link the styles.css file so the styles will be applied again. Nest a self-closing link element in the head element. Give it a rel attribute value stylesheet and an href attribute value of styles.css.
<head>
<meta charset="utf-8" />
<title>Cafe Menu</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
Re: Designing a style for menus
Posted: Wed Apr 03, 2024 11:00 pm
by ProjectX
styling of the page to look similar on mobile as it does on a desktop or laptop
For the styling of the page to look similar on mobile as it does on a desktop or laptop, you need to add a meta element with a special content attribute.
Add the following within the head element:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<meta charset="utf-8" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
Re: Designing a style for menus
Posted: Wed Apr 03, 2024 11:02 pm
by ProjectX
Changing the background colour of the webpage
The text is centered again so the link to the CSS file is working. Add another style to the file that changes the background-color property to brown for the body element.
h1, h2, p {
text-align: center;
}
body {
background-color: brown
Re: Designing a style for menus
Posted: Wed Apr 03, 2024 11:18 pm
by ProjectX
Div element inside the body element
The div element is used mainly for design layout purposes unlike the other content elements you have used so far. Add a div element inside the body element and then move all the other elements inside the new div.
Inside the opening div tag, add the id attribute with a value of menu.
<body>
<div id="menu">
<main>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
<section>
<h2>Coffee</h2>
</section>
</main>
</div>
</body>
Re: Designing a style for menus
Posted: Wed Apr 03, 2024 11:23 pm
by ProjectX
Editing the width of the css
The goal now is to make the div not take up the entire width of the page. The CSS width property is perfect for this.
You can use the id selector to target a specific element with an id attribute. An id selector is defined by placing the hash symbol # directly in front of the element's id value. For example, if an element has the id of cat then you would target that element like this:
#cat {
width: 250px;
}
Use the #menu selector to give your element a width of 300px.
body {
background-color: burlywood;
}
#menu {
width: 300px;
{
h1, h2, p {
text-align: center;
}
Re: Designing a style for menus
Posted: Wed Apr 03, 2024 11:29 pm
by ProjectX
Comments in CSS
Comments in CSS look like this:
/* comment here */
In your style sheet, comment out the line containing the background-color property and value, so you can see the effect of only styling the #menu element. This will make the background white again.
/* background-color: burlywood;*/
Re: Designing a style for menus
Posted: Wed Apr 03, 2024 11:32 pm
by ProjectX
Now use the existing #menu selector to set the background color of the div element to be burlywood.
#menu {
width: 300px;
background-color: burlywood;
}