DP3 Seminar work - class selectors

In todays seminar I learnt some new ways of adding css rules to certain aspects of my site. I was quite surprised as to how easy it was to code just one thing to make it different to everything else. I always thought coding would be really long winded but really, it isn't!


A particular type selector I liked was the em selector. This can be applied to any tag so that it has the css code of the em selector.

Class selectors help to single out bits of text you want to make different, but may have the same tag. For example, Two lines of tags may start with the <p> tag, but to make one line blue, and the other have no style code you would apply the class selector to one p tag.

<p class="big">This text would be displayed according to the class "big" css code.</p>
<p> However this will not, because it has no class selector added to the p tag. </p>

You can also combine classes which I didn't know you could do! So as shown below, one sentence is bold in font type, and also has padding. Say the class selectors are called bold & padding it would be written as; 

<p class="bold padding">

 Tags such as <h1>, <h2>, <h3> etc all change the size of text. This is particularly good when creating headers for pages for example. However, sometimes you may want to use the same size h tag, but for them to have different characteristics. Class selectors can also be added to these tags to help define different headings!

Slightly off topic, I also learnt that using em as a measurement rather than px is a lot better. 1em = 16px but em is the standard measurement so it is best to use this so that devices such as mobile phones can display the website correctly. A px to em converter should be used when wanting to size things up such as divs & content boxes.