Topic 1 - Three Ways to Add Styles!
Inline Styles:
There are a few different ways to add style to you html document. One of the styles is called "Inline Styles." Inline style types are added to the html just like adding an html tag. An example of this would be:
<p style="font-size: 12px; font-weight:bold; font-style:italic; color:red;">
Creating inline CSS tags like in the example will add style and formatation to your line of text within the tag. It will only work with whatever is inside of the tag.
Embedded Styles:
Embedded Styles are placed inside of the head of the HTML document. The main use for these type of styles is to override the CSS document style sheets. It is meant to be used for the page which the Embedded style tags are on. The tags will only affect that page where the style tags are placed on. Here is an example of an Embedded Style Tag:
<head>
<style type="text/css">
h1 {font-size:16px;}
p {color:blue;}
</style>
</head>
Linked Styles:
This type of style is a linked style because of the styles being coded onto a seperate file known as a .css file. This file type will contain all of the coded styles which can be linked to the HTML document by using a line of code in the head of the HTML. You can put this line on multiple pages in your website if you want to use the same styles throughout all of the pages. The line of code which is placed in the head to link the stylesheet is:
<link href="style.css" rel="stylesheet" type="text/css"/>
Topic 2 - Multiple Grouped Selectors
I wanted to write about this one because when I started coding, this was always something which fascinated me about CSS. I think it is neat to see you can group the tags. I am all about organization and to me CSS is a "clean" type of code. So instead of writing multiple tags for every part of the code... you can put them all in one tag and give them all the same style. Here is an example:
Use this:
h1, h2, h3 {color:blue; font-weight:bold;}
Instead of:
h1 {color:blue; font-weight:bold;}
h2 {color:blue; font-weight:bold;}
h3 {color:blue; font-weight:bold;}
Topic 3 - IDs and Classes
IDs and classes can be used to stylize specific areas of the document by using tags inside of the HTML. It can be used in certain tags and then referenced in the CSS for what to stylize.
Classes
A class tag used inside of an html will change whatever the class is attached to. So say you put a class tag inside of the h1 html tag, whatever is inside of the "h1" html tag will be affected by the class tag.Here is an example:
<h1 class="specialtext">The text inside of the h1 tag which includes the class tag.</h1>
IDs
IDs are used to style a certain element inside of the html. They can not be used more than once in a page. For example, if you are stylizing a menu bar and name it "mainmenu" in the tag, you can not have another tag for ID named "mainmenu."
Example of an ID:
<nav id="mainmenu">
<ul>
<li>
<a href="#">
Menu Items listed
</a>
</li>
<li>
<a href="#">
Menu Items listed
</a>
</li>
</ul>
</nav>