Hypertext Markup Language (HTML) defines what elements are present on a web page. The Cascading Style Sheets (CSS) programming language describes how these elements should look. The CSS file can be added to HTML as an external (CSS is added as a separate file) or internal style sheet (CSS is included in the HTML file). Learn how to embed CSS in an HTML file to change the design of your site.
Steps
Method 1 of 2: How to set up an external style sheet
Step 1. Create a CSS file
Prepare and save a CSS file with a ".css" extension.
Step 2. Upload the CSS file to the site
Step 3. Copy the address (URL) of the CSS file
The site address will look something like this: www.yoursite.com/stylesheet.css.
It is good practice to remove the primary domain name from the URL. Based on this, the address http://myisite.com/css/default.css will be shortened to "/css/default.css". Remember to include the leading slash ("/"). It is called a relative path
Step 4. Paste the link into the file
Find the label in the HTML file and create an empty line right above it. Paste in this line, replacing "www.your …" with a link in the CSS file.
Step 5. Save the HTML file and upload it to the site
Step 6. Make sure everything on the site looks the way it should look
Otherwise, reopen the HTML file, look for errors, and make changes.
Method 2 of 2: How to insert an internal style sheet
Step 1. Create a label
Open the HTML file and find the label. Add some blank lines above it and enter the following:
Step 1. Paste all your CSS between these two labels
Step 2. Save the HTML file (with the. HTML extension)
Step 3. Make sure that everything on the site looks the way it should look
Otherwise, make the desired changes.
Advice
- Always check the appearance of the site in different browsers and on different operating systems. Some browsers connect to CSS in slightly different ways. It can even happen in the same browser, but on different versions of Mac and Windows. If your site looks different in another browser (for example, the spacing between some objects, such as lists, is of a different size), then the problem is with that browser's settings. Find the master stylesheet and paste it at the top of the CSS file to change the default browser settings. This is done so that your settings do not change anything in the browser itself.
- Insert an external style sheet if you can. This will allow you to change the look of the site by modifying the code in the source file. This way you don't have to change the CSS on every page of your site.
- If your site does not respond to CSS in the way you expected, double-check the entire encoding to make sure it is spelled correctly. In particular, pay special attention to semicolons (";") and closing brackets ("}"). It is fairly easy to omit one of these characters in a CSS file.
- Save the HTML file to your computer so that you can open it later in various web browsers and double-check its appearance before downloading it further. But in order to load it, the CSS file needs to be inserted into the HTML as an external stylesheet.
- If the stylesheet contradicts itself - for example, it says the text will be blue first and then it will be red - the last condition will always be met. If one command is an external style sheet and the other is an internal style sheet, the internal style sheet will be active.