Understanding CSS part 2
Intro:
This is a part 2, if you want to see part 1 here is the link and come back :). https://medium.com/@mjhorowitz714/understanding-css-part-1-62d6aba3ce42
How to insert your CSS:
There are three ways you can attach CSS to your application. The first is inline CSS, internal CSS, and external CSS.
Inline CSS:
An inline style can be used to target and style a specific element in your HTML. In order to use inline styling, add the “style” attribute to the element.
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>Now, using inline styling is very tedious, because you have to style every element, and if you have an external style sheet, which we will discuss later, it can lead to problems, where your app does not know which style to take.
Internal CSS:
An internal style sheet can be used to style the HTML page, if that page has a unique style that you want for just that page. To use internal styling, you must define those styles within the “<style>” tag. As well as having your “<style>” tag within your “<head>” tags.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>External CSS:
With external CSS style sheet, you can manage and style your whole application in one file, I find this to be the most effective way to style your app. In order to use an external file, you must link the file to your HTML document inside of your “<head>” tag, just like with internal CSS.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>Now just to clarify what we were talking about before, with problems that my occur if you have inline styling and an external, or internal styling. When using multiple style sources, and if you define a style for the same element in all of your stylings, your app will use the last style it reads before rendering, and this can give us some unexpected behavior.
Example:
Let’s just assume for this example we have an external style sheet that is going to be styling a P tag.
// external style sheet
p {
color: blue;}
Now let’s say we also have internal styling as well that is targeting a P tag as well.
// internal style sheet
p {
color: red;}
So if the internal styling comes after our link to our external style sheet like below:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
p {
color: red;
}
</style>
</head>Then this will result in our P tag being the color red, and we can say the same thing in the opposite order as well, if we were to switch the order of our link and style tags, then we willl get a P tag in the color blue.
Resources: https://www.w3schools.com/css/default.asp
