Till now we have our two html pages "index.html", "mission.html" which describes the structure of the content in your files. When the browser displays your HTML, it uses its own built-in default style to present this structure.
How to create your own style to present the structure: That’s where CSS(Cascading Style Sheets) comes in. CSS gives you a way to describe how your content should be presented. Let’s get our feet wet by creating some CSS that makes the Starbuzz page look a little more presentable.
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
Insert the <style> element in the head of your index.html and save it.
How to create your own style to present the structure: That’s where CSS(Cascading Style Sheets) comes in. CSS gives you a way to describe how your content should be presented. Let’s get our feet wet by creating some CSS that makes the Starbuzz page look a little more presentable.
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
Insert the <style> element in the head of your index.html and save it.
Open the index.html in the browser.
Wow, it looks pretty cool!
Congratulation you have created your own style for presenting!
What actually we have done:
<head>
<title>Starbuzz Coffee</title>
<style type=”text/css”>
</style>
</head>
- <style> tag is placed inside the head
- <style> tag requires an attribute, called type which tells the browser the kind of style you’re using. Because you are using CSS, you need to specify the “text/css” type.
- you define the styles in between the <style> and </style> for the page.
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
- body means all the CSS between the “{” and “}” applies to content within the HTML <body> element.
- background-color: #d2b48c; Sets the background color to a tan color(#d2b48c hex code).
- margin-left: 20%; Sets the left margins to take up 20% of the page.
- margin-right: 20%; Sets the right margins to take up 20% of the page.
- border: 1px dotted gray; Defines a border around the body that is dotted and the color gray.
- padding: 10px 10px 10px 10px; Creates some padding around the body of the page.
- font-family: sans-serif; Defines the font to use for text.
No comments:
Post a Comment