Adding Background Color , Size and FontStyle With CSS
What is CSS
Css stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. It can control the layout of multiple web pages all at once. External stylesheets are stored in CSS files. Cascading --> because it flows down and not up on your page its important to start from your first element . I like to start my CSS from the Body element and then cascade down from there . Style puts the visual of your ideas into realization.
So let’s show some examples of the way it works .
I want to add a different font to my (h1) tag that I will create.
I then want to select a font I like using google font , there are so many to choose from . I searched through google fonts copy the link of the font I wanted to use copied that link on to my index.html file , in the body of my head tags .
I decided I wanted to use two different font style types, I did the same thing as before I copied the two links for those fonts.
Once that’s done I create an h1, h2, and h3 tags starting from line 16 inside my main body type in anything you like this is just a demo here .
In your style.CSS folder separate from your index file.
The google font also supplies the code for the font style name , I copied the code and create my h1 in my styling index starting line 1 h1{ inside here start adding the style elements } you have to start by using curly braces ,to target the element you want to style , in this example I want to style my H1 element. between the braces paste the google code for the font style you selected on , on line one h1 {} curly braces open curly curly and the code goes bet the curly’s starting on line 2 . you can see it more clearly on line 7 you can add width , if you want a sold font cursive, the color how large you want that font to appear on the page .
I wanted to change the font size for line 3 . this will effect the changes in the H1 tag only in the index page. I wanted to align the text in the center line 4 .
I did the same steps as in the h1 for the h2 I just didn’t use a text shadow here , just added a different color , and font style .
In my h3 tag again same steps but wanted to add a shadow behind the text
these are just some of the many things you can do with CSS , to make your Websites, Games, Blogs come to life .
The Result … the background color was changed four different style fonts were used , shadow was added to two of the fonts behind the text to make it pop as well as a “glow”effect which is really simply using a lighter color for shadow and a darker color in the front to make it appear to have a glow these features which works the same way as a shadow you just have to choose a color lighter than your main color on the font adjust the size and of course select a background color to make it pop on the page .
These are the resources I used for this post as well as my imagination and my love for css and always wanting to explore what I can create with it .
resources https://www.w3schools.com/css/default.asp
https://fonts.google.com/
