To add CSS in your HTML file.
… <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <title>My Title</title> </head> …
In the above example, whenever the HTML file is loaded, it will load the file mystyle.css
. The <link …>
line must be inside the “head” tag.
If you use the above for all your files, then you can control your whole site’s appearance by modifying the single CSS file.
CSS for Single HTML File
If you want to use CSS only for a single file, you can embed it in HTML file’s header using the <style>
tag, like this:
… <head> <title>My Title</title> <style type="text/css"> p {color:red} /* more CSS code here */ </style> </head> …
CSS for Single HTML Tag
If you want to specify a style only for one particular HTML tag in a HTML file, you can embed a attribute style="…"
inside the tag, like this:
<p>… this is <span style="color:red">RED!</span></p> <p style="color:red">This whole paragraph is RED!</p>
CSS Syntax
CSS source code looks like this:
p { line-height:1.5; width:60ex; font-family:sans-serif; } li { margin-top:0.8ex; color:gray; } blockquote { color:blue; } img { border:solid thin black; } /* basic table style with border */ table.xyz { border:1px solid black; border-collapse:collapse; } table.xyz th, table.xyz td { border:1px solid gray; padding:.5ex; } /* for programing language source code */ span.code { font-family:monospace; color:#00008d;