Multiple css
In this article we are going to learn about multiple Cascading Style Sheets, how to have more than one css in one Cascading Style Sheet file and link it to html file.
We learnt about css in general, padding, float, width, minimum width, maximum width, height, minimum height, maximum height, scroll, inline css, internal css, external css, selectors css, positions in css, display in css and lists style in css so, we will be focusing on multiple Cascading Style Sheets.
Multiple css
Multiple css is a Cascading Style Sheet method of importing other css files in one css file, meaning we can use more than one different css files in one Cascading Style Sheet file then link it in html file or page.
Let us create one Cascading Style Sheet style1.css to style borders and we will import other css files in it, copy and paste below code.
div {
border-radius: 50%;
border-width: medium;
border-color: white;
border-style: dotted;
}
p {
border-radius: 10px;
border-width: small;
border-color: red;
border-style: solid;
}
h1 {
border-radius: 5px;
border-width: small;
border-color: green;
border-style: dashed;
}
Let us create another Cascading Style Sheet style2.css to style colors only and we will import it into style1.css, copy and paste below code.
div {
color: orange;
}
p {
color: blue;
}
h1 {
color: green;
}
Let us create another Cascading Style Sheet style3.css to style background colors only and we will import it into style1.css, copy and paste below code.
div {
background-color: orange;
}
p {
background-color: blue;
}
h1 {
background-color: green;
}
Let us now import style2.css and style3.css into style1.css, copy and paste below code.
@import url("style2.css");
@import url("style3.css");
div {
border-radius: 50%;
border-width: medium;
border-color: white;
border-style: dotted;
}
p {
border-radius: 10px;
border-width: small;
border-color: red;
border-style: solid;
}
h1 {
border-radius: 5px;
border-width: small;
border-color: green;
border-style: dashed;
}
Let us create html file tutorial.html which we will link it with style1.css, copy and paste below code.
<!DOCTYPE html>
<body>
<h1>Heading one element.</h1>
<div>Div element.</div>
<p>Paragraph element.</p>
</body>
</html>
Let us now link all style1.css, style2.css and style3.css to html file tutorial.html by using style1.css only, copy and paste below code.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h1>Heading one element.</h1>
<div>Div element.</div>
<p>Paragraph element.</p>
</body>
</html>