Now that we’ve explored some CSS basics let’s start adding more rules and information to our style.css file to make our example look better. Let’s start by making the text look better.
First, find the font from Google Fonts that you saved to a safe place. Adds the <link> element somewhere inside the head element in the index.html file (again, anywhere between the <head> and </head> tags).
–font-family means only the fonts you want to use for your text.
This rule first sets a global base font and font size for the entire page (since <html> is the parent of the entire page, and all the elements inside it inherit the same font-size and font-family):
html {
font-size: 10px; / * px means ‘pixels’: the base font size is now 10 pixels high * /
font-family: placeholder: This should be the result taken from Google fonts
}
In a CSS document, anything written between / * and * / is a CSS comment, which the browser ignores when rendering the code. This is a place to write useful notes about what you are doing. You will now set the font size for elements that contain text inside HTML body (<h1>, <li>, and <p>). We will also centralize the title text and set the height of the line and the space between letters for body content to make it easier to read. You can change these px values depending on how you want your design to look.
boxes:
One thing you’ll notice when writing CSS is that much of it concerns boxes – setting the size, color, position, etc. Most of the HTML elements on your page can be thought of as boxes placed on top of each other.
It is not surprising that the CSS app is mainly based on the box model. Each of the blocks that take up space on your page has properties such as:
– Padding, the space around the content (for example, around the text of the paragraph)
– Border, the solid line that is just outside the padding
– Margin, the space outside the element.
In this section, we also use:
– width (of an element)
– background-color, the color behind the content of an item and the padding
– color, the color of the content of an element (usually the text)
– text-shadow: Sets a shadow of the text inside an element
– display: Sets how an item is displayed
1. Change the color of the page
html {
background-color: # 00539F;
}
This rule sets a background color for the entire page. Change the color code above into whatever color you choose when planning your site.
2. Body creation
body {
width: 600px;
margin: 0 cars;
background-color: # FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
Now for the <body> element. There are quite a lot of statements here, so let’s go through one at a time:
– width: 600px; – it forces the body to always have a width of 600px.
– margin: 0 cars; – When you set two values to a property as a margin or padding, the first value affects the top and bottom of the element (making it 0 in this case), and the second value the left and right (here, auto is a value special that divides the equally available horizontal space between left and right)
– background-color: # FF9500; – as before, it sets the background color of the element.
– padding: 0 20px 20px 20px; – we have four values set for padding, to make more space around our content. This time we will not set the padding above the body, but we will set 20 pixels left, bottom and right. The set values are up, right, down, and left in this order.
– border: 5px solid black; – it sets a solid 5-pixel black border for all sides of the body element.