Analyze and Implement Stylings
Inline Styling
Inline styling is a CSS styling type that is defined with the style attribute. Each value is separated from the next by a semicolon. This type of styling is considered inline because it is always placed inside the opening tag of an element. It is also considered element level styling. Has the highest precedence of any styling type. <p style="font-weight: bold; color:red;">Some Content</p>
Internal Styling
Internal styling - is styling that is considered to be page level styling.
It is always defined by using the <style></style> element in the head of the document.
All CSS rules should be placed between those two tags.
It has the second highest precedence only overriding external styling.
Example
<!doctype html>
<html>
<head>
<style>
//Internal styling
P { color:blue; }
</style>
</head>
<body>
</body>
</html>
External Styling
External styling - it is considered site level styling. This styling is the separation of HTML and CSS. External styling is best practice when using CSS.
It is always defined by using the <link> tag to point to an external file of some kind. The "rel" attribute defines the relationship between the HTML file and the external file. Additionally, the "href" attribute points to the location of the external file. In this case, the link tag will be placed in the head of the document.
Example
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
CSS Precedence
The term precedence is defined as being more important than someone or something else.
In HTML & CSS, stylings do have precedence over one another.
Below is a list of order of precedence:
1. Inline Styling - has the most precedence and it will overwrite any conflict with any other style always.
2. Internal styling - has the second most precedence and can overwrite external styling but not inline styling.
3. External styling - has no precedence and cannot overwrite any other styling type.
As mentioned earlier, external styling is best practice when styling a website. In private industry, you should always use external styling, and should never comingle two or three of the different styles. However, for the purpose of a industry certification exam, you can use one or all three styling types at once.
Resolving CSS Conflicts with Precedence
The code below is a basic example of a conflict between inline styling and internal styling. Notice how the paragraph element has inline styling trying to set the font size of that paragraph to 10 pixels in size. However, the internal styling is also trying to set the paragraphs to a font size of 14 pixels. Will the paragraph element make the font size 10 pixels or 14 pixels? The paragraph element will make the font size 10 pixels because inline styling overrides internal styling due to its precedence.
