What is your favorite snack?
*or find one online!
Most popular snack foods in America: https://www.eatthis.com/most-popular-snack-foods-america/
Objective: |
You will choose a simple website to practice designing as close as you can to the original using what we have learned over the past few weeks in CSS (everything is listed and explained below). Feel free to use your artistic freedom to revamp and improve on anything you see fit on the site!
|
Turn In: |
When you submit your assignment, you must turn in your published code on liveweave or downloaded dreamweaver files to Google Classroom.
|
Tips:
*Need a specific color? Get the code here: color.adobe.com/create/color-wheel
Adding CSS Styles
Cascading Style Sheet lets you specify colors, font families, backgrounds margin widths, alignment and much, much more!
body{ In the body of the web page, this style rule is
margin: 40px; setting the margin, font and font color.
font-family: Arial;
color: blue;
}
To link the CSS style sheet to your htm file
<link href= “webdesign.css” rel= “stylesheet” type= “text/css” />
Apply a Style Using a Class
You can create a CSS class to apply a style rule to specific instances to HTML tags in a page. To apply a style rule to a specific paragraph:
On the htm file you would assign the class (<p class= “introduction”></p>
To the CSS sheet:
p.introduction{
color; blue;
}
Apply a style Using an ID
(An alternative way to class)
On the htm file you would assign the id (<p id= “introduction”></p>
To the CSS sheet:
p#introduction{
color: blue;
}
Styling Text
Change the font size p{
font-size: 16px;
}
Indent Text p{
text-indent: 5px;
}
Change the Color of Text p{
color: blue;
}
Change the Font p{
font-family: Arial;
}
Change the Text Alignment p{
text-align: left; (choices: left, center, right or justify)
}
Change the Text Case p{
text-transform: capitalize; (choices: capitalize, uppercase, lowercase or none)
}
Control Line Spacing p{
line-height: 2.0; (space between lines of text)
}
Control Letter Spacing p{
(Kerning) letter-spacing: 5px;
}
Add Background Colors
p{
background-color: yellow;
}
If you want to add background color behind specific text:
On the htm page, insert <span class= “highlight”></span> around the text that you want to add the background color to.
On the CSS:
span.highlight{
background-color: yellow;
}
Style a Bulleted List
<ul class= “horizontal”> CSS: ul.horizontal{
<li>Home</li> list-style-type: disc; (disc, circle,
<li>Contact</li> } square or none)
</ul>
Adding Images
Image File Formats Jpeg, Gif and Png are the three most popular types used on the web. All three can be compressed, which makes them download quickly to a web server from your computer.
Inserting an Image
HTML enables you to display images as inline elements, which means they appear within the body of the page along with text.
Insert a Photograph or Graphic File On your htm page, type:
<img src= “house.jpg. (OR IMAGE ADDRESS)” >
Specify an Image Size
Since each individual picture requires different sizes so that it isn’t distorted, you could give them each an id which would enable you to adjust the size in your CSS file. It is better to resize an image in an editing program, however, because resizing them in HTML coding can reduce the quality of your image.
<img src= “house.jpg” alt= “house” id= “house”>
CSS: #house{
width: 400px;
height: 100px;
}
Align an Image Horizontally
You can use the CSS float property to control the horizontal positioning of an image on a page. The float property also determines how text wraps around the image. When you float an image to the left, text after it wraps to the right, and vice versa for right alignment.
#house{
float: left:
}
Align an Image Vertically
You can use the vertical-align CSS property to control the vertically positioning of an image on a page relative to the text next to it. Common alignment values are top, middle or bottom.
#house{
vertical-align: top;
}
Center an Image
You can center your image on the page using a <div> tag and the align attribute. Centering an image can give it more emphasis and help it stand out from the text or other page elements.
On the htm file, type:
<div class= “lakehouse”>
<img src= “house.jpg” alt= “house”>
</div>
On the CSS:
.lakehouse{
text-align: center;
}
Add "Padding" Space Around an Item
Most web browsers display only a small amount of space between images and text. You can increase the amount to space or padding to make the page more visually appealing. The padding property can be applied to all sides of an image or to just one side.
#house{
padding: 5px: (Applies padding to all four sides.)
}
#house{
padding-top: 5px; (Applies padding on top)
}
#house{
padding-right: 5px; (Applies padding on right side)
}
#house{
padding-bottom: 5px; (Applies padding to bottom)
}
#house{
padding-left: 5px; Applies padding on left side)
}
Working with Borders
You can use borders to enhance the looks of your web page. You can format the border around each element with style properties. As with the margin and padding styles, you can apply a style to the top, right, bottom or left border or to all four borders at once.
border-top width: thin; (Choices: thin, medium or thick)
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
Set Border Color
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;
Border Design
border-top-style: solid; (Choices: solid, dashed, dotted, double, outset,
border-right-style: solid; inset, groove, ridge and none)
border-bottom-style: solid;
border-left-style: solid;
Creating Rounded Corners (Need to use browser extensions)
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
Applying extensions:
border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
Styles that need extensions
Rounded or elongated corners
Background-size
Table columns
Linear and Radial Gradients
Adjust Margins
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
*These can also be negative!
Cascading Style Sheet lets you specify colors, font families, backgrounds margin widths, alignment and much, much more!
body{ In the body of the web page, this style rule is
margin: 40px; setting the margin, font and font color.
font-family: Arial;
color: blue;
}
To link the CSS style sheet to your htm file
<link href= “webdesign.css” rel= “stylesheet” type= “text/css” />
Apply a Style Using a Class
You can create a CSS class to apply a style rule to specific instances to HTML tags in a page. To apply a style rule to a specific paragraph:
On the htm file you would assign the class (<p class= “introduction”></p>
To the CSS sheet:
p.introduction{
color; blue;
}
Apply a style Using an ID
(An alternative way to class)
On the htm file you would assign the id (<p id= “introduction”></p>
To the CSS sheet:
p#introduction{
color: blue;
}
Styling Text
Change the font size p{
font-size: 16px;
}
Indent Text p{
text-indent: 5px;
}
Change the Color of Text p{
color: blue;
}
Change the Font p{
font-family: Arial;
}
Change the Text Alignment p{
text-align: left; (choices: left, center, right or justify)
}
Change the Text Case p{
text-transform: capitalize; (choices: capitalize, uppercase, lowercase or none)
}
Control Line Spacing p{
line-height: 2.0; (space between lines of text)
}
Control Letter Spacing p{
(Kerning) letter-spacing: 5px;
}
Add Background Colors
p{
background-color: yellow;
}
If you want to add background color behind specific text:
On the htm page, insert <span class= “highlight”></span> around the text that you want to add the background color to.
On the CSS:
span.highlight{
background-color: yellow;
}
Style a Bulleted List
<ul class= “horizontal”> CSS: ul.horizontal{
<li>Home</li> list-style-type: disc; (disc, circle,
<li>Contact</li> } square or none)
</ul>
Adding Images
Image File Formats Jpeg, Gif and Png are the three most popular types used on the web. All three can be compressed, which makes them download quickly to a web server from your computer.
Inserting an Image
HTML enables you to display images as inline elements, which means they appear within the body of the page along with text.
Insert a Photograph or Graphic File On your htm page, type:
<img src= “house.jpg. (OR IMAGE ADDRESS)” >
Specify an Image Size
Since each individual picture requires different sizes so that it isn’t distorted, you could give them each an id which would enable you to adjust the size in your CSS file. It is better to resize an image in an editing program, however, because resizing them in HTML coding can reduce the quality of your image.
<img src= “house.jpg” alt= “house” id= “house”>
CSS: #house{
width: 400px;
height: 100px;
}
Align an Image Horizontally
You can use the CSS float property to control the horizontal positioning of an image on a page. The float property also determines how text wraps around the image. When you float an image to the left, text after it wraps to the right, and vice versa for right alignment.
#house{
float: left:
}
Align an Image Vertically
You can use the vertical-align CSS property to control the vertically positioning of an image on a page relative to the text next to it. Common alignment values are top, middle or bottom.
#house{
vertical-align: top;
}
Center an Image
You can center your image on the page using a <div> tag and the align attribute. Centering an image can give it more emphasis and help it stand out from the text or other page elements.
On the htm file, type:
<div class= “lakehouse”>
<img src= “house.jpg” alt= “house”>
</div>
On the CSS:
.lakehouse{
text-align: center;
}
Add "Padding" Space Around an Item
Most web browsers display only a small amount of space between images and text. You can increase the amount to space or padding to make the page more visually appealing. The padding property can be applied to all sides of an image or to just one side.
#house{
padding: 5px: (Applies padding to all four sides.)
}
#house{
padding-top: 5px; (Applies padding on top)
}
#house{
padding-right: 5px; (Applies padding on right side)
}
#house{
padding-bottom: 5px; (Applies padding to bottom)
}
#house{
padding-left: 5px; Applies padding on left side)
}
Working with Borders
You can use borders to enhance the looks of your web page. You can format the border around each element with style properties. As with the margin and padding styles, you can apply a style to the top, right, bottom or left border or to all four borders at once.
border-top width: thin; (Choices: thin, medium or thick)
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
Set Border Color
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;
Border Design
border-top-style: solid; (Choices: solid, dashed, dotted, double, outset,
border-right-style: solid; inset, groove, ridge and none)
border-bottom-style: solid;
border-left-style: solid;
Creating Rounded Corners (Need to use browser extensions)
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
Applying extensions:
border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
Styles that need extensions
Rounded or elongated corners
Background-size
Table columns
Linear and Radial Gradients
Adjust Margins
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
*These can also be negative!