Css is known as being the ultimate styling language. It allows you to do almost anything in combination with other languages. For example, if you were to combine HTML and CSS you would be able to set fonts and font-sizes of your text or maybe even alter link colors. We briefly discussed CSS in our HTML section but that was mainly inline and internal styling. In this tab we're discover even further.
Now you may be wondering how to actually set up a css document. I showed you that HTML starts off the "DOCTYPE html" tag but if you were wondering CSS doesn't require anything. Although you may want to save your file as a CSS file before beginning. In case you may not know how to do that simply add ".css " after the file name.
To begin, we are going to save our file as "style.css". This going to help us in the future as we import the file into our HTML document. Typically you would import your external style sheet so reduce clutter and extensive documents. (It's also healthy to be organized)
You can import your css file with the link as shown:
And that's it! Now you can manipulate your CSS file at anytime and all changes will be made your HTML document.
You can use colors to style every element within a HTML document using CSS. There are about 140 standard color names that you can use to define those elements. This is extremely helpful because it eliminates the need for hexadecimal tags or color codes for short.
Style the background color using:
As you can see I was able to change the background color of the body,heading, and paragraph tags. Remember this works for every element including h1-h6 tags.
You can also set the color of text as shown:
Here I changed all the h1 tags with text inside to be beige and all my paragraphs have green text color.
We can specify border colors on several items. This includes tables, headings, paragraphs, divs, and even section tags.
I defined all h1 tags, tables, and paragraphs with a different border type and color. The first attribute which is in green represents the boldness of the border, the second attribute represents the type of border (dashed or solid... etc.) and the final attribute represents the color of the border line. I even managed to define a div tag. To do so you get the id name, in this case it was "intro" so we put a "#" in front. If this was a class then we would use a "." before the tag.
There's multiple things you can add to your website using css background properties. We have already discussed background color so let's go over a few more.
You may not have known but instead of colors you are able to use pictures as backgrounds as well. You can do so simply by:
This is simple you could just replace the file in the quotations with your file and now you have your own background image.
There may be instances where the picture size will fall short of the screen size and the website will try to make up for it by repeating the image across the screen. By default the image will repeat both horizontally and vertically to compensate. But there are ways to either choose to just repeat vertically or to only repeat horizontally or to not repeat at all.
We cam also specify positioning of background images for example if you want it centered of wrapped with text.
There several border styles and values you can use to define border:
You may also style individual parts of the border , as shown here:
It is possible to create border styles as well for example you can use a combination with other properties such as the background property.
Padding is used to create space around an element's content. You can add space above the object , below the object , or even around the object.
You can use the height and width properties to define sizing of elements.
Again here you may also see that percentages and pixels are interchangable. Although, using percentages are much more efficent when defining objects for several screen sizes.
You can define text with several properties and attributes, inclduing: colors, text alignment, fonts, letter spacing and much more.
You may not be aware but there several ways of styling links and not just the basic blue color and underline.
Positioning is also a key property when it comes to developing websites. There are 5 position types:
The float property is also used for positioning on webpages it includes left, (floats left of the container) and right, (floats right of the container)
The final thing I want to go over is styling forms, after all you need something appealing to get users to contact you.
That's all for the CSS chapter, I hope this has introduced you to a lot more. Now you can make your HTML look even better!