How to link CSS file to html page on Brackets
Question
I am having troubles linking my css file to one of my pages i created. The uploaded pictures shows my attempt in linking the two, and the code in the css file. The css file and html file are both in the same folder.However, my homepage won't recognise the css. Any help would much appreciated. Thank you.
1 answers
solution1
1 2019-11-24 14:23:51
Basically Styles can be linking to an HTML document using one of three methods:
- Inline Style
- Embedded Style (Internal Style)
- External Style
How do you connect a CSS styling sheet to an HTML page
Inline Style
Inline Style is the simplest method of adding CSS styles to your HTML pages. An inline style is applied to an HTML document via its style attribute to specific tags within the document,
For example, If you want to add styles to < p > then you can code like this:
<p style="color: #0000FF">...<p>The above declaration will ensure that the paragraph text will be blue. This method can be applied to any HTML element within the
< body > .... < /body >of the HTML page.
Example:
<html> <body> <p style="color: #0000FF"> Instyle Paragraph Testing </p> <p> Another Paragraph Testing </p> </body> </html>
Notice that the text contained within the first < p > paragraph will be Blue color. You can see only that paragraph is affected, and the second paragraph defaults to black.
The major disadvantage of Inline Style is that it is impossible to reuse. Consider restructuring a website that containing hundreds of pages where inline styles litter the markup. You should have to go into every page and change each CSS property individually is a very difficult task.
Embedded Style (Internal Style)
Embedded Styles allow you to implement any number of CSS styles by placing them between the opening and closing style tags.
<style>......</style>You can place Style Tag within the
< head > ... < /head >section, just after the< title >tag of your HTML page.
like this
<head>
<style>
........
........
</style>
</head>
You should start with the opening style tag like the following: <style type="text/css">
The opening Style tag should always use the attribute "type". The attribute value is "text/css" in the case of a CSS document.
Example :
<html> <head> <title>Embedded Style Sample</title> <style type="text/css"> h1{ color: #0000FF; } h2{ color: #00CCFF; } </style> </head> <body> <h1>Embedded Style testing</h1> <h2>Next Line</h2> </body> </html>
External Style
An external style sheet is a plain text file that contain CSS Style formats only. The extension of the external file should end with .css extension (eg pagestyle.css) . This external file is referred to as an external style sheet.
The external Style Sheet (.css file) always seperate from HTML file. You can link this external file (.css file) to your HTML document file using the < link > tag . You can place this < link > tag Within the
< head >section, and after the< title >element of your HTML file.<link rel="stylesheet" type="text/css" href="styles.css" />
For Example Your HTML File is placed inside a folder Suppose your folder name is WebDesign and your CSS file also placed inside that folder ie WebDesign folder that in your html file the CSS will link like this directly
<link rel="stylesheet" type="text/css" href="styles.css" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.