Implementing CSS Styling Methods in Web Development
Inline Styling Approach
Inline CSS is applied directly within HTML elements using the style attribute. Multiple style properties are separated by semicolons.
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 style="color: deeppink; font-family: 'SimSun';">Sample Heading Element</h1>
</body>
</html>
Embedded Stylesheet Method
Internal CSS utilizes a <style> block within the document's <head> section. Style rules target specific elements using selectors.
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1 {
color: royalblue;
font-family: SimSun;
}
</style>
</head>
<body>
<h1>Sample Heading Element</h1>
</body>
</html>
External Stylesheet Implementation
External CSS requires a separate file with .css extension containing style definitions.
styles/design.css:
h1 {
color: red;
font-family: SimSun;
}
The stylesheet is linked to HTML documents using the <link> elemant:
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles/design.css"/>
</head>
<body>
<h1>Sample Heading Element</h1>
</body>
</html>
Professional web development predominantly uses external stylesheets for complete separation of presentation and structure.
Cascading Priority Rules
CSS precedence follows proximity principles. Inline styles override internal and external stylesheets.
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1 {
color: yellow;
}
</style>
<link rel="stylesheet" type="text/css" href="styles/design.css"/>
</head>
<body>
<h1 style="color: red;">Sample Heading Element</h1>
</body>
</html>
In this example, the heading displyas in red due to inline styling takinng highest priority.
