Introduction to CSS Part 2 (Internal & External CSS)
In the previous chapter, we learned about the definition of CSS and how CSS can be embedded using inline CSS. In this article, we will explore how to apply CSS using internal (embedded) CSS and external CSS.
Internal CSS
Previously, we got an overview that Internal CSS is a CSS syntax written within the same HTML file using the <style>…</style> element.
Internal CSS is typically placed within the head tag at the top of an HTML document. However, even if it is placed inside the body tag or other elements, it will still be read as long as the elements that need it are located below it.
To select elements using Internal CSS, we use what is called a selector, which we will learn more about after understanding External CSS.
<html>
<head>
<meta charset="UTF-8">
<title>tes HTML</title>
<style>
header {
background: url('https://mangcoding.com/wp-content/uploads/2017/02/cropped-pexels-photo-48727.jpeg')
no-repeat center center;
padding: 50px;
}
h2 {
color: #007EC7;
text-align: center;
}
.subtitle {
background: rgba(255, 255, 255, 0.7);
padding: 5px;
}
</style>
</head>
<body>
<header>
<h2>Welcome to my Site</h2>
<p class="subtitle">Selamat datang disitus pembelajaran coding. Tempat berbagi ilmu dan pendidikan</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam incidunt aut,
nesciunt eaque ullam. Quasi, laudantium optio enim. Sequi, eaque quod. Voluptatum vero
rerum, assumenda itaque totam consequatur dicta dolore.</p>
</body>
</html>
Based on the example above, compare the use of Internal CSS with Inline CSS. It looks much neater and easier to manage, right? 😊 However, despite its advantages, Internal CSS is rarely used in web development.
Internal CSS is commonly generated along with HTML tags produced by server-side scripting languages such as PHP, Node.js, Ruby, etc. However, in most cases, CSS is written as External CSS, which we will discuss next.
Still excited, everyone? 🚀
External CSS
External CSS separates the CSS file from the HTML file. The CSS file has a .css extension and is linked using the link element, which is typically placed inside the <head> tag.
Its usage is quite similar to Internal CSS, as both require selectors to apply styles to specific elements. To understand how External CSS works, follow these steps:
- Create an HTML page containing a header with text (as shown in the previous example), and add a title and content to your webpage.
- In the head tag, create a tag as shown below. Or, if you are using Sublime Text, simply type link and press Tab, then the head section will look like this.
<head>
<meta charset="UTF-8">
<title>External HTML</title>
<link rel="stylesheet" href="style.css"/>
</head>As you have created previously in the internal CSS material (See the example below).
This brief explanation covered Internal and External CSS. When writing CSS, we are indirectly selecting elements using selectors (tags/elements).
But what exactly is a selector? How many types of selectors are there? We will dive into this topic in the next section.
Keep learning and stay motivated! 🚀
That wraps up Introduction to CSS Part 2 (Internal and External CSS) shared by Mangcoding. Hopefully, this article provides useful knowledge. If you have any feedback or suggestions, feel free to leave a comment or reach out via email and social media.