CSS
The main thing to understand when implementing Cascading Style Sheets into html is that while html is mainly content, css is the design behind the content. With css you can designate colors, fonts, backgrounds, positioning, and a myriad of other attributes of each tag in html. You can also set up classes and ids that allow specific attributes to be applied to set areas of code.As html has tags, css has selectors (and html tags themselves fall under this category). A selector such as the html tag body will be chosen and properties, such as color, or font, can then be assigned values.
When using css, there are three different locations that they can be applied. The first is the most common, an external document. It will then be called in the head of an html document. If the css document was titled styles.css, the code within the head tag would appear as:
<link rel="stylesheet" type="text/css" href="styles.css" />
The main thing to notice in this line of code is href and the file it is pointing to. The other attributes aren’t important to understand, though they are necessary in the code. Everything in the attached document will then apply to all the html code.
There is also the possibility to create internal styles in the head of an html document itself. It would appear as <style type="text/css"> and </style> after the styles have been designated. These styles will also override anything in an external sheet that would be applied to the same tag/class etc.
The third and last option is an inline style, written inside a tag in an html document. It would simply appear as style=" " with attributes and values between quotation marks. This inline style would then override all internal and external styles for that tag.
Each page on this site will define the code for an external style sheet, though the layout can be changed to fit internal or inline styles. Defining the value of red, on the color property for the h1 selector would then appear so:
h1 {
color: red;
}