<style>
ul {list-style-type: square}
</style>
There are a few important things to notice. Firstly, the tag we are defining to create CSS for must not be within angled brackets ( < > ). Secondly the details should be encased in curly braces. The final thing to notice is that no speech marks are required, unlike directly editing tag attributes. This process will make things much easier as if you decide you don't like square bullet points then instead of having to go to each and every <ul> tag attribute and change it manually, you can simply edit the CSS and it will change for every <ul> tag.
So now you know how to write CSS, you need to know how to create classes to make your developing even easier. Classes go a step further from CSS, they allow you to create certain rules as usual, but then define them by a particular keyword. This allows you to utilise them in different situations across your site. For example, say you were a retail company and decide that occasionally you would have a sale on certain items and wanted people to know that. without CSS this would take a lot of time to implement as many different items may require to be edited. A class will simplify this process. Say you wanted and sale items to be coloured red then you could set a class to do just that. You could also use it for ordered lists, and maybe even on other HTML files, but that's another blog. Setting up classes is very similar to CSS;
<style>
.sale {color: red}
</style>
It's hard to see but this is very important, before sale is a period (or full stop), this must be entered as it defines the text as a class (also known as a function in other programming languages) if you omit this then the class won't be recognised and it won't work. Besides the period, the coding is exactly the same, the only other difference is that classes have to be manually utilised, but this doesn't require a great deal of coding. Simply enter this line within the tag attributes
<li class="sale">
This tells the browser that that line should be set to the class "sale", defined in the <head> section. The result is that the text on that line should become red.
Classes are great as they allow you to format individual sections of your content, without having to alter all of it like CSS or attributes editing does.
Here is the final output with some example content and as always, the HTML is right beside it.
Next on the HTML agenda is looking at how to layout your HTML pages to get the best visual effects.
No comments:
Post a Comment