Last updated on December 11th, 2023
What is the basic element in external CSS?
External CSS means that you have to put the CSS code in a separate CSS file. That way you can control the design of multiple web pages.
The basic element in external CSS code is called “selector”.
Just like the style attribute in inline CSS, the selector in external CSS has property and a value.
The properties and values of selectors in external CSS are the same as the properties and values of the style attribute in inline CSS.
What is the syntax in external CSS?
The syntax in external CSS is as follows:
selector {propety:value;}
I.e. there is a colon between the property and the value, the command line ends with a semicolon, and is enclosed in curly braces.
You can set a few properties and values for one selector like this:
selector
{
propety: value;
propety: value;
propety: value;
}
What types of selectors are there?
There are two main types of selectors – HTML elements and classes.
Example of an HTML element as a selector. Syntax of the element selector.
If you use an HTML tag as a selector, then the syntax is as follows:
tag {propety:value;} (CSS file)
<tag> Some content here. </tag> (HTML file)
For example, to set red color for the text in all text paragraphs, the codes in the external CSS file and in the HTML page should be as follows:
p {color: red;} /* this is the code in the external css file */
<p> This text is red. </p> <!-- this is the code in the html page -->
Example of class selector. Syntax of the class selector.
If you want to use a class selector, then the syntax is as follows:
.somename {property: value;} (CSS file)
<tag class=”somename”> Some content here. </tag> (HTML file)
For example, to set red color for the text in some text paragraph, the codes in the external CSS file and in the HTML page should be as follows:
.myspecialtext {color: red;} /* the code in the external css file */
<p class="myspecialtext"> This text is red. </p> <!-- the code in the html page -->
Note that a dot is placed right before the name of the class selector (.somename).
In the place of “somename” (the name of the class selector) you can put any text you want. Do not add spaces and do not start the selector name with a digit.
In the HTML tag you should place the class code like this: class=”somename” (don’t forget the quotation marks).
How to make a CSS file?
You can make a CSS file the same way you create an HTML file. Open Notepad or Notepad++ and put your CSS code in it. Then save the file with a .css extension, for example: myfile.css
Let’s make a page with black background color and white text color in the body of the page. The CSS code will be as follows:
body
{
background-color: #000000;
color: #ffffff;
}
Copy this code, paste it in Notepad, then click File -> Save as from the top menu (Save icon for Notepad++) and write the name of the file: myfile.css
If you need to add comments or hints in the CSS file, you should place your comment between the elements /* and */. Just like HTML comments (<!– … –>), CSS comments are not displayed on the screen.
How to link the CSS file to the HTML page?
In order for the external CSS code to work in the HTML page, the following code must be placed in the head section of the HTML page:
<link rel="stylesheet" href="myfile.css">
where “myfile.css” is the name of your CSS file.
A complete example of using external CSS along with inline CSS
Let’s make a page with black background color and white color of the main text in the body of the page. Also, let’s put some special red text in the body of the page.
The external CSS code will be as follows:
/* HTML body tag as selector – the code makes black background and white text in the body of the HTML page */
body
{
background-color: black;
color: white;
}
/* Class selector for red text */
.specialtext {color: red;}
Copy the above code, paste it into Notepad or Notepad++ and save it as myfile.css on your desktop.
The HTML code will be as follows:
<!DOCTYPE html> <html> <head> <title> My test HTML page </title> <link rel="stylesheet" href="myfile.css"> </head> <body> This text is white. <p class="specialtext"> This text is red. </p> <!-- And here below we will use inline CSS to display some green text. --> <p style="color: green;"> This text is green. </p> </body> </html>
Copy the above code, paste it into Notepad or Notepad++ and save it as mypage.html on your desktop. Now double click on the file icon to open the HTML page and see the result. The page will look like this:
Note that this code will only work if both files (myfile.css and mypage.html) are in the same folder, for example on the desktop or in a “myfolder” folder, etc.
What about internal CSS?
The code in the internal CSS is the same as the code in the external CSS, but it is placed in the HEAD section of the page between the <style> and </style> tags, like this:
<!DOCTYPE html>
<html>
<head>
<title> My test HTML page </title>
<style>
p {color: red;}
</style>
</head>
<body>
<p> This text is red. </p>
</body>
</html>
Note: In addition to classes, in external CSS you can also use IDs. The difference between them is that classes can be assigned to multiple elements, while IDs can only be assigned to a single element. There is one more difference – a dot is placed in front of the class name, and a number sign (#) in front of the identifier name.
Example of using ID:
#myspecialtext {color: red;} /* the code in the external css file */
<p id="myspecialtext"> This text is red. </p> <!-- the code in the html page -->