Usually it is best practice to create separate .css file(s) that holds the bulk (if not all) of your CSS coding.
It's good practice to create a DIRECTORY (called CSS) for them in your working directory and then you have to
link to it on EVERY WEB PAGE that will be using it...
in the <head> section you have to add the <link> element
<link rel="stylesheet" type="text/css" href="css/MyStyles.css">
Note...for example...
D:/Websites/Dingbats - is where all your .html files are
D:/Websites/Dingbats/Images - is where all your images go
D:/Websites/Dingbats/CSS - is where all your CSS files go
Note...
You choose any filename.css that suits you...eg... MyStyles.css
Class names can be whatever you want...eg...myclH1...Gary...abcde...but should really make sense
ID's can also be whatever you want to call them.
When you reference a CLASS it must start with a dot (.)
When you reference an ID it must start with a hash (#)
When you reference a TAG it must NOT start with a dot or #
Use a CLASS when you want to consistently style multiple elements throughout the page/site.
Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style.
Use the ID when you have a single element on the page that will take the style.
Example of what could be in a MyStyles.css file
/* Styles sheet */
.myclH1 {
color:red;
font-family: "Times New Roman", Times, serif;
}
.myclH2 {
color:blue;
font-style: italic;
}
So in the HTML file you would have <h1 class="myclH1"> OR <h2 class="myclH2">
#myIDH1 {
color:red;
font-family: "Times New Roman", Times, serif;
}
#myclH2 {
color:blue;
font-style: italic;
}
So in the HTML file you would have <h1 id="myIDH1"> OR <h2 id="myIDH2">
H1 {
color:red;
font-family: "Times New Roman", Times, serif;
}
H2 {
color:blue;
font-style: italic;
}
So in the HTML file you would have <h1> OR <h2>
Usually it is best practice to create separate .css file(s) but sometimes it is necessary to
create a STYLE area at the top (in the <head> section) so you can add styling commands
just for use on this one web page.
Note...
Class names can be whatever you want...eg...myclH1...Gary...abcde...but should really make sense
ID's can also be whatever you want to call them.
When you reference a CLASS it must start with a dot (.)
When you reference an ID it must start with a hash (#)
When you reference a TAG it must NOT start with a dot or #
Use a CLASS when you want to consistently style multiple elements throughout the page/site.
Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style.
Use the ID when you have a single element on the page that will take the style.
Example of what could be in your STYLE area
<style>
.myclH1 {
color:red;
font-family: "Times New Roman", Times, serif;
}
.myclH2 {
color:blue;
font-style: italic;
}
So in the HTML file you would have <h1 class="myclH1"> OR <h2 class="myclH2">
#myIDH1 {
color:red;
font-family: "Times New Roman", Times, serif;
}
#myclH2 {
color:blue;
font-style: italic;
}
So in the HTML file you would have <h1 id="myIDH1"> OR <h2 id="myIDH2">
H1 {
color:red;
font-family: "Times New Roman", Times, serif;
}
H2 {
color:blue;
font-style: italic;
}
So in the HTML file you would have <h1> OR <h2>
</style>
Sometimes it is necessary to create a STYLE within the body of your web page code in order
to add styling commands for a specific TAG (element) on a web page.
Example of how you would create an inline style
<H1 style="color: red; font-family: "Times New Roman", Times, serif;">
<H2 style="color: red; font-style: italic;">
When using CSS there is an order to how they are used
External Sheets are picked up first
Internal Styling on your .html file overrides that
Inline styling added to your elements override both of the above
***************************************
To have more than one tag or class or id use commas to separate
h1, h2, h3 {color: blue;}
.myClass1, .myClass2, .myClass3 {color: blue;}
#myID1, #myID2, #myID3 {color:blue;}
To mix them together
h1, #myID2, #myID3 {color:blue;}
If you only want, for example, to change the tag h1 but ONLY if it
has a class called myClass2 associated with it.
By this I mean in the .html file you may have
<h1 class="myClass2">Header 1 text</h1>
you can say
h1.myClass2 {color:blue;}
you could also use a comma to say, for example
h1.myClass2, h1.myClass3#myID2 {color:blue;}
which would mean it would change the color of ALL h1 tags with a class=myClass2
AND it would ALSO change ALL h1 tags that has a class=myClass3 AND an ID=myID2
Although, to be honest, you should ONLY have 1 id on your page as
they should be unique
you could also use a space to say, for example
div.myClass2 h1 {color:blue;}
which would mean it would change the color of ALL h1 tags that has a parent
<div class=myClass2>
eg
<div class="myClass2">
<h1>Some text</h1>
</div>
you could also target the content of an attribute, for example
a[href="http://www.googgle.com"] {color:blue;}
which would mean it would change the color of all <a> tags that has a value
of "http://www.google.com" in its href attribute.
<a href="http://www.google.com">google search</a>
****************************************