h1 {
margin: 0;
padding: 20px 0;
color: # 00539F;
text-shadow: 3px 3px 1px black;
}
You’ve probably noticed that there is a space at the top of the element. This is because browsers apply a certain default style to the <h1> element (among others), even if you haven’t applied CSS at all! This might seem like a bad idea, but we even want an unused web-page to have basic readability. To save space, we override the default style by setting the margin: 0;
Next, I set padding up and down for the title to 20 pixels and made the text title to have the same color as the background color of the HTML element.
A rather interesting property that I used here is text-shadow, which applies a text shadow to the content of the element text. The four values are as follows:
– The first value in pixels sets the horizontal offset of the shadow in the text – how far it moves: a negative value must move it to the left.
– The second value in pixels sets the vertical offset of the shadow in the text – how far they are removed; in this example, a negative value should move it upwards.
– The third value in pixels sets the radius blur of the shadow – a higher value will mean a darker shadow.
– The fourth value sets the base color of the shadow.
Again, try experimenting with different values to see what you can do!
Image centering
I’m g {
display: block;
margin: 0 cars;
}
Finally, we will focus the image to make it look better. We could use the edge trick again: 0 cars as we did earlier for the body, but we have to do something else. The <body> element is block level, which means it takes up space on the page and can have margin and other spacing values applied.
Images, on the other hand, are inline elements, which means they cannot. And so to apply edges to the image, we need to give the image a block-level behavior using display: block;
Don’t worry if you don’t understand display yet: block; and block / inline distinction. You will understand better when you study in-depth CSS. In continuation of the articles on how to create a website, we will try to present to you some general notions about Javascript.
JavaScript is a programming language that adds interactivity to your site (for example: games, responses when buttons are pressed or data is entered in forms, dynamic style, animation). This article helps you get started using this interesting language and gives you an idea of what is possible. JavaScript (“JS” for short) is a fully developed dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity to sites. It was invented by Brendan Eich, co-founder of the Mozilla project, Mozilla Foundation, and Mozilla Corporation.
JavaScript is incredibly versatile. You can start with something small, carousels, image galleries, fluctuating layouts, and button click responses. With more experience, you will be able to create games, 2D and 3D graphics animations, complex database-based applications, and more!