Lesson 11: CSS Internal

Internal CSS is still declared in the HTML page like inline, but instead of declaring the style attribute inside the element tag, we declare the properties and values inside a style element tag in the head section of the HTML document. Example:

• We must declare the element that we want the CSS to change. We state the element by using a selector.
• We use selectors to select the HTML elements that we want to style.
• Unlike inline CSS, we don’t have to define the selector with the anchor brackets.

To declare an internal HTML with one style property:

• State the selector and declare the property and value inside the curly braces.
• Add a semi colon to the end of the declaration.

To declare an internal HTML document with multiple style properties, separate each property and value with a semi colon and declare each property and value on a new line.

Rule:

• Separate each property and value with a semi colon.
• Declare each property and value on a new line.

• As shown above, you can use a selector to declare a HTML element uniquely. But what if you wanted to change all the h1 elements to be red?
• This is where a CSS class would be introduced.
• CSS classes are CSS rules that apply to all instances that are declared.
• A class is created like a selector, but you add a dot before the name of the class.

Example:

<style>.myClass{ Color : red; }</style>

• Classes can be called in the style, but they must be declared inside the HTML section.
• Classes can be defined using the HTML element followed by the class keyword or the can be defined using the div tag.

Example: