---

CSS Tutorial for beginners - Integrate CSS with HTML

Have you ever wondered, how those attractive HTML websites are created even when HTML itself doesn't have any styling properties? The answer is, use CSS with HTML. We embed CSS code within HTML that give style to HTML elements. Therefore, we have created this CSS tutorial that covers all the basics to advance concepts of CSS. This tutorial is suitable for beginners as the language is very simple with specific CSS examples for each concept. Let's start!

---

What does CSS stand for?

CSS stands for Cascading Style Sheets. In CSS full form, 'Cascading' is a very important word. If you don't understand the concept of cascading then it may happen that CSS applied to an element doesn't work. According to developer.mozilla.org, 'Cascading' is a mechanism of selecting which CSS rule to apply to an element. Suppose you have defined two rules for the same element. Now, the cascading algorithm will choose only one and apply it to the element. For example:

---

In the example above, notice that we have applied two different colors to the same heading. However, the blue color is selected by the CSS Cascade algorithm. It means that the order of CSS Styles is important in case of a conflict. In this case, the property which was written later or that comes last, wins the race and gets applied.

However, the cascading algorithm is not limited to only order of appearance. There are some more rules that we will cover later in this CSS tutorial, as you won't be able to understand them right now.

The 'Style Sheets' is pretty easy to understand, we create different sheets with styling properties and use them on the website. You can create multiple Style Sheets, there is no limitation.

Now we have understood the meaning of CSS, let's see some samples of CSS properties.

---

CSS Sample design: Things to do with CSS

CSS is a bag of beautiful properties and features. There are so many amazing properties like shadows, round corners, gradients, CSS animation, flexbox, etc. that enhance the whole website's design.

let's see some examples of CSS designs:

CSS Shadows

The CSS Shadow effect gives the HTML element a floating look. If done properly, this small feature can make websites look very attractive.

CSS Shadows Example:

---

CSS Gradient

A gradient is a combination of two or more colors. In gradients, one color smoothly fades into another color, and so on.

CSS Gradient Example:

---

CSS Button Hover

CSS Button hover property is very popular. By CSS hover property, we can change the style of any HTML element when the cursor hovers over it.

CSS Button Hover Example:

---

CSS Animation

CSS Animation is a way to add animated effects to HTML elements.

CSS Animation Example:

---

Why to use CSS?

Let's see some more important aspects of why CSS is essential for a website. We have already told you many applications and features of CSS, but these points will further clarify your doubts about CSS:

• CSS saves time: It saves a lot of time as one Style Sheet can be used on multiple pages. There is no need to write the same CSS Style Sheet on all the pages. A single file can be used in all those pages where the same styling of web pages is required. This also decreases the page loading time as file transfer size gets reduced because of the reusing of code.
• Multiple Device Compatibility: CSS can optimize the same webpage to adapt different viewports(screens). It makes a webpage compatible and readable in all the devices like laptops, tablets, mobiles, etc. which have different screen sizes.
• Improves HTML Functionality: CSS has a large number of attributes as compared to HTML which only provides a limited number of styling attributes.
• Pages load faster: When we use the same Style Sheet in multiple webpages then, the loading of the pages gets faster because of reusing of the code.
• Responsive layout: It can optimize a webpage to fit various screen sizes very easily. Different devices have different screen sizes and CSS features allow the programmer to make their website responsive to these devices. The responsive nature of CSS makes a webpage compatible and readable in different screen sizes with ease.
• Global web standards: The web standards are now depreciating the use of basic HTML styling attributes and it is being recommended to use CSS.

---

Integrate CSS with HTML

CSS is different than HTML. One is a markup language and the other is a style sheet. So, how to integrate CSS with HTML?

HTML has a tag called <style> tag. It is a paired tag, i.e. one opening and one closing tag, ex. <style>CSS code</style>. This tag embeds CSS into HTML, it is a dedicated tag for adding CSS. So, we write all the CSS within <style> tag. On the other hand, CSS code written outside <style> tag is just plain text for browser.

There are different ways to embed CSS with HTML according to the type of CSS. Yes, CSS has types also. But no worries, these are very simple concepts, we will get back to it later in the tutorial. Let's see our first example of CSS:

First CSS example:

Output

Explanation-

In the example above, the <style> tag is used to embed CSS within HTML. All the CSS should be inside <style> tag. The selectors for a particular tag are used to give style to it. For example, h1 { } and p { } selectors are used for heading and paragraph respectively. Let’s see the CSS properties used:

• Color: Specifies the text color of the heading and the paragraph.
• Background-color: Defines the background color of the heading.
• Padding: Specifies Padding inside an element. Padding is the space between the HTML element's boundary and its content.

You can try our Online editor and can do changes accordingly.

In this tutorial, till now we have given you a brief introduction to CSS. In the next CSS tutorial we will learn about CSS Syntax.

---

---