Are you

Types of CSS (Cascading Style Sheet)

The Cascading Style Sheet (CSS) is used to style web pages that contain HTML elements. It controls the background color, font-size, font-family, color, and other properties of web page elements. CSS is divided into three types, as shown below:

  1. Inline CSS
  2. Internal or Embedded CSS
  3. External CSS

Inline CSS

Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute. This strategy negates some of the benefits of style sheets, therefore it's best to use it sparingly.

Example

<!DOCTYPE>
<html>
<body>
<p style = "color:#009900; font-size:50px;font-style:italic; text-align:center;"> This is Paragraph one.</p>
</body>
</html>

Output
.

Internal CSS

This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file. It is defined between the starting and the ending of <head> section of the HTML page inside the <style>tag.

Example

<!DOCTYPE>
<html>
<head>
<style>
.class_name {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p class = "class_name"> This is Paragraph one.</p>
</body>
</html>

Output
.

External CSS

The external style sheet is generally used when you want to make changes on multiple pages. It is ideal for this condition because it facilitates you to change the look of the entire web site by changing just one file.

It uses the tag on every pages and the tag should be put inside the head section.

Example

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Any text editor can be used to create the external style sheet, but it must be saved with the .css extension. HTML components should not be present in this file.

Let's look at the "mystyle.css" style sheet file as an example.

Filename: mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
.class_name {
color: red;
}

Notes:It's important to note that there should be no space between the property value and the unit. Consider the following scenario: Margin-left:20px should be used instead of margin-left:20 px.


Filename: mypage.html
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1> Write Your First CSS Example</h1>
<p class = "class_name"> This is Paragraph one.</p>
</body>
</html>

Notes: All of the files mentioned before (mystyle.css and mypage.html) are saved in the same directory. Refer to this article if you saved them in a different folder.


Output

.

The main difference between inline CSS, internal CSS and external CSS is that inline CSS and internal CSS are processed faster as it only requires the browser to download 1 file while using external CSS will require downloading HTML and CSS files separately.

Even if inline css and internal css are in the same file as the style you want to apply, when you use inline css, the style will only apply to the element it is in, however if you use internal, you can call class name anywhere(each and every element you want) on the page you want to apply style without repeating the same code as you can do when using inline css.

If you use external css, it will be much easier for you to apply the style to the element you want to follow the same properties, because you will only include the css file in html file you want as we did using this line (<link rel="stylesheet" type="text/css" href="mystyle.css">) in above example, and call the class name anywhere you want to apply the style defined.

Next

Courses