I like to get another explaination onto this. I did follow the lessons here and I did Google it but still failed to understand the next things. Because the explainations here W3 school and SoloLearn are to difficultto understand for me and sometiimes someone else explaining can help:
linking h1 to style ?
How it work what to use?
Like in Visual code studio
what to use ?
.h1
#h1
h1
linken html to css style sheet?
div? all kinds what are the diffrends what comes first what comes last?
Reference the element that you would like to manipulate directly by using its’ tag (i.e. h1 {}). The # is used to reference any id attributes, while the . is used to reference class attribute.
/* A CSS reference to the class="header" in my HTML file */
.header {
grid-area: header;
background-color: #B1A296;
padding: 30px;
text-align: center;
font-size: 23px;
}
if u use
h1{ u will add style on all h1 tags on page }
i case if u have id or class h1…
in your css u select only that h1 wiht id name #headTitle {} with class is same class=“className” in css use .className{} if u wanna clean html code u will not use id or class name insted if u have h1 insade div with class name or id name u will select that h1 with .classNameOfDiv h1 {} same is with id ony use # insted . shortly
FCC doesn’t offer much explanation about the entirety of the subject. It offers “what you need to know” and the rest is up to the student.
To answer your question, you need to know why CSS exist and why it became this way.
HTML were intended to be a text based data sharing language. For example, if I want to share my thoughts on a book. You will write them in a <p> tag one after another and it will stack vertically looking like a long stack of paragraphs. There is very little styling available, hence we have <h1> to <h6> tags, <br>or <hr> to make that presentation much more bearable.
When I first encounter web technology CSS wasn’t even a thing. As time passes, information became more sophisticated and the need to organize these information in a neater fashion is necessary. For instance, I would like to place more emphasis on this sentence. It can be done. Or putting together 2 paragraphs side by side for comparison. It can be done.
There are fours ways to communicate with your HTML page in how you want to present your information.
Inline Styling - The initial method used to add CSS into an HTML page is to directly add it into the element itself. Element meaning <p>, <h1>, <div>, <span>, <body>, etc by adding attribute keyword style follow by the properties you wish to change. The beauty of web technology is that you don’t have to install anything and it will work, because everything is built-in to the browser.
.
For example, instead of using <p> by itself, we can write… <p style="font-size:10pt;">Hello World</p>
And it will change the font size of that one paragraph to 10 point in size. No installation needed. If you know the simple basic HTML syntax, copy and paste this into your web page will work.
.
If I want this done to multiple <p> tags, you will have to repeat this process for every single paragraph tags in the page! Of course, this will become really tedious and hard to maintain.
.
This is easily recognize and became a major issue. This brings us to having attributes id and class which allows HTML page to reference a piece of CSS that is written elsewhere. Elsewhere meaning, it could be in the same HTML file, or another folder, or across the internet.
Internal Styling - Is CSS insertion method that allows you to write CSS in a separate location other than inside your element (inline styling). To accomplish this, you place your CSS code within <style> tag. Anything that goes in it will be recognized as CSS.
. Why are we doing this? As web pages became more sophisticated and the data presented became more complex. HTML offers very little in terms of presentation. By adding inline styling, we are able to present more complex information in a more intuitive way. However, it is hard to maintain and difficult to add or subtract.
.
It is then agreed by the developers that HTML and CSS should be separated. HTML is solely for structuring the data while CSS is solely for presenting the data.
.
Instead of writing this… <p style="font-size:10pt;">Paragraph 1</p> <p style="font-size:20pt;">Paragraph 2</p> <p style="font-size:10pt;">Paragraph 3</p>
.
We separate HTML from CSS and it became this… <style> #p1 { font-size:10pt; } #p2 { font-size:20pt; } #p3 { font-size:10pt; } </style>
. <p id="p1">Paragraph 1</p> <p id="p2">Paragraph 2</p> <p id="p3">Paragraph 3</p>
.
It is now easier to read because they are all in once place. It is still hard to maintain because the attribute id are unique identifiers, you can only have 1 in the entire page. Meaning if my element <p id="p1"> uses the id of “p1”, you cannot use that p1 on another paragraph tag.
. Attribute class solves this problem by allowing you group common styling under one specific name. Instead of writing a bunch of id styling. We now use… <style> .pSize10 { font-size:10pt; } .pSize20 { font-size:20pt; } </style>
. <p id="pSize10">Paragraph 1</p> <p id="pSize20">Paragraph 2</p> <p id="pSize10">Paragraph 3</p>
.
As you can see now, we have reduce the code even further. We have solved the problem of maintainability, scalability and readability. This example isn’t very good, because I am only using one styling property to illustrate the point. If you have a webpage with 6-7 properties across 20 elements, you will see that it will become very clutter.
. <p style="font-size:10pt; font-weight:300; letter-spacing:2px; margin:10px 20px; padding:10px; border:2px solid black;">
.
Finally we can take this one step further by incorporating re-usability by allowing multiple web pages to share ONE CSS styling.
External Styling - The ability to share one CSS styling across multiple HTML page. Internal styling have solved a lot of the maintenance issues. But websites are continuous expanding throughout the 90s. People have figured that it isn’t enough to simply present information. It needed to be structure in a way that is easily navigated, separating topic by topic, subject by subject to make the information more concise.
.
Multiple pages are created to present complex subject such as science, books, poems, songs, pretty much anything you can think of can be separated into different pages. The issues become, how can we have consistent look and feel when navigating multiple pages.
.
Solution, External Styling by placing all our internal CSS into a file and let the HTML file reference the CSS file within the folder system by using <link> tag follow by the file path to the CSS. Instead of writing, copy and paste hundreds of lines of CSS from one file to the next. We only write this…
. <link rel="stylesheet" type="text/css" href="myWebStyle.css">
Where we tell our HTML file that the CSS is within the current file system under the name “myWebStyle.css”
.
If my CSS file contains a class name “redBackground”, I can write this line to any of my file that have a reference to my CSS file. <p class="redBackground"> and the background will become red.
.
In conclusion, we came from a long history of development from adding style Inline to Internal Styling by separating HTML from CSS to making our CSS much more re-usable by placing them externally so that other pages can use them.
.
But technology doesn’t stop there. Maintainability, scalability, readability, re-usability are now solved with the three methods of CSS distribution. Internet is a place of free-speech literally, as long as you have something to share, you can put them up on the internet. Censorship wasn’t even a thing back then.
.
Instead of keeping all the information to ourselves, we gave this ability to the rest of the world, this brings us to the revolutionary Web2.0 where anybody that has a computer can place their content online. Blogs, YouTube, Facebook, basically the entire social media came from this.
.
This brings us to the last method of CSS distribution, CDN (Content Delivery Network) where you can take someone else’s CSS(library) and use it for yourself.
CDN (Content Delivery Network) - Referencing someone’s CSS(Library) and use it for yourself.
Unlike external styling where you reference your file system. In CDN, you reference an HTTP address within the “href” attribute.
. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
.
Yes it looks complicated. But this is all you need to do.
WIth that inserted, you can use all the classes within the library as long as you know what the classes are and how to use them.
But this is all you need to do.