Selectors
CSS is really powerful. :) It is used to add style to HTML. First, note that all HTML elements are customizable through CSS. For example, if you want to change all paragraphs (<p></p>), you can do it by putting this in the <head> section of your document.
<style type="text/css">Then, all your paragraphs will be displayed in Arial font. What if you want to put a 1px border to all your images? As you know, the very basic image code is this:
p { font-family: Arial; }
</style>
<img src="image url" alt="my image" />To customize images, you only need to take the tag part (the bolded part). So, your code to customize images would look like this:
<style type="text/css">So, img is called selector, border is called property and 1px solid #FFFFFF is called value.
img { border: 1px solid #FFFFFF; }
</style>
Well, your life can be even simplier by using External StyleSheets. How? Well, copy everything between <style> and </style>. Paste it in a new document, save this document as your_document.css. It should look like this:
p {Never forget the semi-colon after each values! Now that you have your stylesheet file, how can you insert it into a webpage? Just put that line between <head> and </head>:
font-size: 11px;
font-family: Arial;
}
img {
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
}
<link rel="stylesheet" type="text/css" href="your_document.css">
If you have a lot of content pages, add this to all your page and it will ten times easier to change your pages colors for the next layout!
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)