Home HTML CSS JavaScript


Let's Begin

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.


Importing External Style Sheets

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:


importing css tutorial

And that's it! Now you can manipulate your CSS file at anytime and all changes will be made your HTML document.


Colors


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.


Background Colors

Style the background color using:

backgroundcolor tutorial

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.


Text Colors


You can also set the color of text as shown:

text color tutorial

Here I changed all the h1 tags with text inside to be beige and all my paragraphs have green text color.


Border Colors

We can specify border colors on several items. This includes tables, headings, paragraphs, divs, and even section tags.


For example:

border colors tutorial

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.


Backgrounds

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.


Background Images

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:


background images tutorial

This is simple you could just replace the file in the quotations with your file and now you have your own background image.


Background Repeating

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.


background repeat tutorial

Background Positioning

We cam also specify positioning of background images for example if you want it centered of wrapped with text.


background position tutorial

Borders

There several border styles and values you can use to define border:


For example:


borders tutorials

You may also style individual parts of the border , as shown here:


individual border sides

It is possible to create border styles as well for example you can use a combination with other properties such as the background property.


For example:


styling borders tutorial

Padding

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.


padding tutorials

Height and Width

You can use the height and width properties to define sizing of elements.


height and width tutorial

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.


Text

You can define text with several properties and attributes, inclduing: colors, text alignment, fonts, letter spacing and much more.


text tutorial

Links

You may not be aware but there several ways of styling links and not just the basic blue color and underline.

For example:


Links Tutorial

Positioning

Positioning is also a key property when it comes to developing websites. There are 5 position types:


Positioning Tutorials

Floating

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)


Float Tutorial

Forms

The final thing I want to go over is styling forms, after all you need something appealing to get users to contact you.


Forms Tutorial

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!