QUIZGUM

Coding Class

Quizgum : how to set CSS

How to apply CSS

Let's start with how to apply CSS to HTML documents.

There are three ways.

Saving and Linking to External Documents (Linked Style)

<link rel="stylesheet" type="text/css" href="stylesheet path" />

CSS files can be managed separately, so there is no mixing in the source. This is the most commonly used method. It is applicable even if it is applied to other source, so it is a way to apply multiple pages with one CSS.

You should put the above source in the head tag below.

Let’s try it as below tag.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Apply external CSS file </title>
<link rel="stylesheet" type="text/css" href="style sheet path" />
</head>
<body>
<div>
</div>
</body>
</html>

Define in the document (Embedded Style)

The way to define inside the document is to declare the style tag in the head tag and apply CSS inside the head tag. You don’t need to specify it as the external document like above (Saving and Linking to External Documents (Linked Style).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Write the CSS code in the style tag</title>
<style type="text/css">
    div{background:#fff}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

Directly to tags (Inline Style)

Assigning directly to a tag is done by specifying style = "element" in the tag as shown below. If so, only that tag will be applied to that style.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Write CSS code directly in the tagㄴ</title>
</head>
<body>
    <div style="background:#fff">
</div>
</body>
</html>