CSS IS USED FOR MANY PURPOSES
You can use cascading style sheets containing css code for many purposes when building layouts and styling colours in elements on the web page. Visit the live Demo site.
BUILDING WEBSITE LAYOUTS
When building a website one of the first stages of using CSS is you need to specify margins, padding, height, width etc. This will ensure everything is laid out nice on your page.
CSS FONT STYLING
Use CSS to style all your fonts. The colour, size, underline, italic, big or small. There are so many options when it comes to styling your text. Even pulling in external web fonts can be achieved by attaching a link in the head area of your web page. Then adding it to style sheets so it can be modified to your liking and needs.
IMAGES AND GRAPHICS
Adding images and manipulating their appearance is no problem with CSS. You can add borders, border radius, margins, padding. In addition to making background images do all kinds of magic.
CREATING CASCADING STYLE SHEETS
To perform this operation you will need at least a plain text editor such as “Notepad” on Windows or other applications such as “Notepad++” or “Dreamweaver” depending on your needs. Just save a plain file with the extension required.
THE STYLE SHEET FILE
Cascading Style Sheets are created with a “.css” extension to specify it’s use and intention to the web browser to render any elements it has selected in the code. Example “my-styles.css”.
HTML LINKING CSS TO YOUR WEB PAGE
The link below is the proper syntax for linking a CSS document to your web page via a CSS folder.
<link rel="stylesheet" type="text/css" href="css/my-styles.css">
Note: The above link goes into thesection of your HTML document.
INLINE STYLES AND EMBEDDED CODE
You can also use CSS inline styles directly in the HTML element and an other option is to put the code straight in thesection. The preferred method is to use a separate cascading style sheet. This will reduce load time and page size. Furthermore it is easier to locate and modify in a separate attached file.
Inline Style Example <div style="margin:10px;">Content goes here</div>
Embedded CSS goes in <style>Code here</style> inside the <head></head>
TARGETING HTML WITH SELECTORS
Once you have your style sheet linked to your web page you can start coding and styling those plain HTML elements. Start by giving your HTML elements “id” and/or “class” names then add those names to your style sheet.
Target a HTML element by naming such as <div id="my-div"></div> for an "id" Also using a "class" name like <div class="my-div"></div>
You can use both “id” and “class” on the same element or just one. Classes you can use as many times as you like on the one page. HTML “id” should only be used once per page.
Using both "id" and "class" <div id="my-div" class="my-div"></div>
HTML CODE EXAMPLE
ADDING THE CODE TO STYLE SHEETS
So you have finally named all the elements that require styling. Not sure, don’t worry there are always a few more adjustments and additions that you will probably make before finishing your page or website. Now we need to add the selectors in the cascading style sheet file. Usually located in a folder you named “css” or “styles” maybe something along those lines.
USING THE CORRECT SYNTAX FOR SELECTORS
To add the code into your style sheet type in the selector you require. The elements you name will require something extra such as a period or hash/pound sign in front. While other selectors will just need to have the name of the element such as a standard anchor, heading or paragraph.
The above images demonstrate how your code should look in your style sheet. It also contains green text displayed here. They are called comments and can be many colours depending on what application you are viewing the code in.
The comments do not have to be there and are mainly used to describe what the code is used for to help any future coders understand what is going on mush easier. They also have no impact on the styling of your web page unless you comment code out. Also for adding size to the CSS file. It is best to remove as much excess white space and comments as possible for faster load time.