Some more CSS Notes as I continue on my third project in the Web-Dev Basics Series.
Background Images
added in CSS and not in HTML.
background-image: url("images/galaxy.png");
Some websites to download images: unsplash.com
Google Fonts
custom fonts that can be added to your project. Select the font and its weight. Multiple weights can be selected. Copy the links and paste them in the HTML file within the <head> tag.
Buttons don't inherit font properties. If the font is set to body tag, inherit value can be used to set it to buttons.
font-family: inherit;
Font-Face
Another way to get custom stylish fonts and they are added to CSS as below:
@font-face {
src: url("fontName.ttf");
font-family: "font-family"
}
h1 {
font-family: fontName
}
Span Tag
<span> tag is inline. If you want to give styling to a certain text within a heading or a paragraph, this tag can be used. Set a class to the tag and apply style.
Using ID in CSS
You use ID if the element is unique and will be used once compared to a class. Only use this when you know the style does not need to be applied anywhere else.
Animated Images
Similar to gifs, animated images for the web are in the webp format. Both gif and webp formats can be used in CSS to set animated backgrounds. The animated images can be found at giphy.com
Text Shadow
It's a good way to show 3d effects or if the color of the background and text on top is the same, it can be used to highlight the text via blurr effect.
text-shadow: offset-right ;offset-down ;blur; color
text-shadow: 5px 5px 1px black;
Negative values will display results in the opposite directions.
I have not uploaded the space exploration site to Github, but this looks as below:
