DEV Community

loading...
Cover image for What Is CSS? – Learn CSS in 10 minutes

What Is CSS? – Learn CSS in 10 minutes

stackfindover profile image Stackfindover ・3 min read

Hello friends, today we will learn What is CSS, What is the full form of CSS, What is the type of CSS style. Answers to all such questions about CSS and much other useful information, Hope this information will work for you.

What is CSS in HTML

CSS is a language that allows us to give an attractive appearance to an HTML document. As we have known in our previous article (What is HTML) and what does it work for, where we shape a webpage with HTML, with CSS we give that page an attractive look.

We need a text editor (such as Notepad, Sublime, Visual Code Studio, etc.) to write CSS and the changes made in the webpage are visible on the web browser.

The full name of CSS is cascading style sheet, and it was developed by W3C in 1996. Which is used to beautify documents written in a markup language, including layout, colors, and fonts, etc. CSS can also be used with any type of XML documents, including XML, SVG, and XUL.

Types of CSS

Inline Styles Sheet

In the example below, we can see that, in the body tag, the style attribute is defined. Next, the property and value are defined in the style attribute. This is called an inline style sheet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Demo</title>
</head>
<body style="background-color: green;">
    <h1>This is Inline CSS Demo</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Property:background-color:
Value: green

Internal Style Sheet

In the example below, we can see that the <style> tag is defined in the head section in the internal style sheet. Then using selectors, we define the styles. In this, HTML and CSS code are defined in a single document This is called the Internal style sheet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal Style Sheet</title>
    <style>h1 { color:red; }</style>
</head>
<body>
    <h1>This is Internal Style Sheet</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

As we read above what is an Inline Style Sheet and Internal Style Sheet, now we will know about the External Style Sheet, so let us start.

External Style Sheet

In the External Style Sheet as the name itself suggests, an external file will be used it. In the context of the External Style Sheet, the CSS code is written in another file and along with that, we have to link it to the head tag of the HTML file.

As we know in our previous article (What is HTML), any HTML file is saved with a .html extension, similarly, we have to save CSS file with .css extension it is called External Style Sheet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal Style Sheet</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>This is Internal Style Sheet</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

href=”” Inside brackets, we have to give the path (location) of our CSS file (in the example above, CSS is the name of a folder and style.css is the name of the file).

External style.css demo

body { background-color: green; }
h1 { color:red; }
Enter fullscreen mode Exit fullscreen mode

Read Full Article

Discussion (0)

pic
Editor guide