Introduction to CSS
Now the problem really comes along when we start messing around with the layout using just HTML because as we have said in order to change our layout for our web site so that we can have text and images that exist side by side. At this point we have to use tables. And the problem with tables is that they are wordy. We have to write a lot of code in order to do something very simple which is displaying that image next to your h1 and your paragraphs, having it on the same horizontal level.
Moreover, If you started getting into more complex table layouts you had to embed tables within tables in order to get more columns and more rows and more flexible layout and the whole thing just became this horrible mess. So that is why we are going to have started using something called Cascading Style Sheets. After using CSS , Our websites will be more powerful for layout. As you can understand that we have used a couple of times layout. Because only purpose of CSS is that style our Mark-up Language in our web page.
Adding CSS in our HTML Document
CSS can be added to HTML documents in 3 ways:
- Inline: By using the style attribute inside HTML elements
- Internal : By using a <style>…</style> element in the <head>…</head> element
- External: By using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files. However, We will try to cover 3 of them.
Inline CSS
This kind of style is specified within an HTML tag using the style attribute. Additively, Inline CSS is used to apply so specific or unique style for element which would be heading , paragraph something like that. Let me show you how we implement to inline CSS in Web Pages
As you can see from screenshot which is at above, There are body element, heading element and paragraph elements. By using inline CSS in body of HTML elements, We have changed some properties such as color, background-color and font-size. You might be wonder how could I know different properties. I highly recommend you to read Documentation of CSS properties. That is How you can figure it out.
However, there is disadvantage to use inline CSS. As we have mentioned that Inline CSS is used to apply so unique style for element. What if we would be able to style repeatedly HTML elements. You would think that I can put style attribute for each repeatedly HTML element. But, It is really painful and is getting more complicated to style and when you have big project there is no way to control your stylish of web page. At this point Internal CSS becomes our Web Developer life.
Internal CSS
An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head>…</head> element tags of our HTML page, within a <style>…</style> element. By using Internal CSS we will set background color of our <body>…</body> element , the text color of all the <h1>…</h1> elements and the text color of all the <p>…</p> elements on our page .
As you can see from screenshot which is at above, There are head and body element.(You should be familiar boilerplate of HTML) In the body section there are heading element ,paragraph elements and list element. By using Internal CSS in head section of HTML document , We have changed some properties such as color, background-color and font-size and other properties. You might be able to think that Why Do we prefer to use Internal CSS instead of Inline CSS. The key is that We would have tons of repeatedly HTML elements and Anyone does not want to style one by one. In order to fully understand try it out one project by yourself and make practise regarding topic.
However, There is a disadvantage of Internal CSS as well. We have mentioned that We implement Internal CSS style for a single HTML page. What if we have Web Site project and web site consist of multiple pages? You might be think copy and paste <style>…</style> into every each HTML page. Of course you could do this way but it does not recommended by Web Developers. Okay than, How do we manage to implement CSS to another HTML pages. At this point , External CSS becomes our developer life.
External CSS
An external style sheet is used to define the style for many HTML pages. In order to use an external style sheet, we must add a link to it in the <head>…</head> section of each HTML page.
CSS property written in a separate file with .css extension. Also CSS should be linked to the HTML documents using <link> tag. This means that for each selected element from developer , style can be set only once and that will be applied across HTML pages. From left side as you can see that we linked our External CSS index.html and contact.html
- rel attribute specifies the relationship between the current document and the linked document. And it is required attribute for link element.
- href attribute is used to specify the location of the external style sheet file.
The result of linked external CSS to our different html pages is provide beautiful website.
In the following articles, we will take look more closer to CSS properties. Moreover. Articles is going to based on real projects. Thanks for reading my article.
Resources: https://www.w3schools.com/html/html_css.asp, https://developer.mozilla.org/en-US/docs/Web/CSS, https://devdocs.io/css/
