In this section, we will learn what the CSS is and how to use it in an HTML document.
CSS in HTML: What is CSS? What Does CSS Stands For?(Cascading Style Sheet)
CSS stands for Cascading Style Sheet. In a simple term, it’s a styling language we use to change the style of elements used in an HTML document.
For example, you might have text content in your document and want to change the font-size, font-style, make text bold, you might want to change the background color, change the color of the text itself, set a border around the content etc. all of these changes can be done using CSS.
Using CSS, we can even create animations and make HTML elements responsive when users start to interact with them!
There is a lot you can do with CSS, but in short, if you want to make your pure HTML document to look great at the end, you need to mix it with CSS.
HTML Without CSS
Alright, before we get into any more details relate to CSS, first let’s see a bunch of websites before and after using CSS to really see what will happen when you involve this language to your HTML documents.
Amazon without CSS
Amazon with CSS
Facebook without CSS
Facebook with CSS
Google without CSS
Google with CSS
Instagram without CSS
Instagram with CSS
Twitter without CSS
Twitter with CSS
Yahoo without CSS
Yahoo with CSS
Basics of CSS
Alright, now that we saw how CSS can change the appearance of a website, it’s time to see how we can bring CSS into an HTML document. So in this section, we will show you the methods we can use to import CSS source codes into our HTML documents.
CSS How to Use?
In short, there are 3 methods we use to bring CSS into an HTML document and style an HTML element as a result. These methods are:
- HTML <style> Tag
- HTML <link> Tag
- HTML style Attribute
CSS in HTML: <style> Tag (AKA Internal CSS)
Using the HTML <style> tag, we can write CSS codes directly within the body of an HTML document.
Basically, the body of this tag is the place we put CSS codes and browsers read the codes within this body and apply them to the elements of the HTML document.
Note: this element has an attribute called `type` and we need to put the value `text/css` on it. This attribute and its value tell browsers what type of code we’re putting within the body of the element. So then, browsers are able to interpret the content correctly by reading the value of the type attribute.
Also, we put the <style> attribute within the body of the <head> element on top of a page. This is to let browsers find the CSS source code as soon as possible and start the process of styling HTML elements in the page.
Let’s see how this is done.
Example: adding CSS to HTML with <style> tag
See the Pen adding CSS to HTML with <style> tag by Omid Dehghan (@odehghan) on CodePen.
In this simple example, we’ve used the CSS, accessed the only <p> element of the document, and changed its text color into red. As you can see, the source code is written within the body of the <style> element.
CSS in HTML: <link> Tag (AKA External CSS)
The second method of bringing CSS into an HTML document is by using the <link> element.
We use this method when the actual source code is written in another independent file and now want to invoke the file into an HTML document.
Now to do that, the <link> element has an attribute called `href` and we set the value of the target CSS file as the argument of this attribute.
Notes:
- The <link> element is better to be placed in the body of the <head> element so that browsers can download the CSS file as soon as possible and start to use the codes to style the HTML elements in the page.
- This element has two attributes called `rel` and `type`. The `type` attribute works the same as the `type` attribute of the <style> element. We put the value `text/css` for this attribute so that browsers know what type of content is being downloaded. Also, the `rel` attribute specifies the relation between the HTML document and the file that is being loaded onto the page. The value we set for this attribute is “stylesheet” which means the target file contains codes that we want to use to style the HTML elements of this current document.
Example: adding CSS to HTML with <link> tag
See the Pen adding CSS to HTML with <link> tag by Omid Dehghan (@odehghan) on CodePen.
CSS in HTML: style Attribute (AKA inline CSS)
The third method of using CSS in HTML is by using the style attribute, which is known as inline CSS.
It is called inline CSS because using this attribute we specifically focus on one HTML element at a time!
For example, if in an HTML document there are two <p> elements and we want to change the color of those elements into red, then using this method we can call the style attribute on each element and write the necessary CSS code for each one of them.
Example: inline CSS
See the Pen inline CSS by Omid Dehghan (@odehghan) on CodePen.
Note: as you might’ve noticed, using style attribute brings lots of duplicate code and the maintenance can soon become a nightmare! So it is suggested to use the other two methods we’ve seen above instead of focusing on the use of inline CSS using the style attribute!
How to Learn CSS?
Our suggestion is to follow this course chapter by chapter from top to bottom. We’ve tried to explain CSS in an easy to learn methods starting from the very basic concepts and continued to bring move advanced materials as you progress along the way. So the suggestion is to follow the structure we’ve provided.
But if you’re already familiar with the CSS and just looking for a few concepts in this language, then feel free to explore this course the way you would like. We’ve tried to make chapters to be independent from each other as much as possible.
