Griffiths web design based in Royston, Hertfordshire, United Kingdom


HTML and CSS for beginners – Part four

Author:   Michael Griffiths

Date created:   29 November 2016

[postpic=binary.jpg class=img-responsive title=HTML and CSS part 4 alt=A deaper look into CSS style=][/postpic] [url=][b][l]<< Back to HTML and CSS for beginners part 3[/l][/b][/url] [url=][b][r]Go to HTML and CSS for beginners part 5 >>[/r][/b][/url] [hdmd]Selectors in CSS[/hdmd] [l]When using inline styles the style declaration is only applied to that element, therefore selectors are not required. When using internal/external style sheets the browser doesn’t know which element to apply the styles to. To get around this we use selectors.[/l] [l]In css you can select elements by id, by class name, by tag name and more.[/l] [hdsm]Id[/hdsm] [l]In HTML id’s have to be unique, so that means if you had a set of paragraph tags with the id para1 then you cannot have any other elements in the document with the id para1.[/l] [code]<p id="para1">This paragraph has the id para1</p>[/code] [l]Id’s must contain at least one character and they must not contain any space characters.[/l] [l]To call an element by id in a style sheet you need to affix ‘#’ to the beginning of the id value.[/l] [code]<style type="text/css"> #para1 { background: #000000; color:#ffffff; } </style> [/code] [hdsm]Class[/hdsm] [l]Classes can be applied to more than one element at a time and each element can have more than one assigned class. Class names need to be separated by a space otherwise the browser will think it is one long class name as opposed to two or more separate classes.[/l] [l]When calling a class name in your style sheet you will need to affix a ‘.’ to the beginning of it.[/l] [code]<p class="para1">This paragraph has the class named para1</p> <p class="para1 para2">This paragraph also has the class named para1 as well as para2</p> <style type="text/css"> .para1 { background: #000000; color:#ffffff; } .para2 { color: :#ffd800; } </style> [/code] [hdsm]Element name[/hdsm] [l]Another way of adding style to elements is by using the tag name as the selector in your style sheet. If you used this method to apply styles to elements it will apply the style to every instance of the element in the document.[/l] [code]p { background: #000000; color:#ffffff; } [/code] [l]This example would give every paragraph element in the HTML document a black background and white text.[/l] [hdsm]Other ways of selecting elements[/hdsm] [l]Now I will show you other ways to select elements. Any of the previously mentioned selectors can be used in this method. I’ll show you some examples then after example I will explain what we are doing.[/l] [code]#eleId p { color:red; } [/code] [l]This will change the font colour to red for any p element that is a descendant (child, child of child, etc.) of an element with an id of ‘eleId’.[/l] [l]If we had[/l] [code]#eleId > p { color:red; }[/code] [l]Then we would be selecting any p element that is a child (direct descendant) of ‘eleId’ and changing the font colour to red.[/l] [code]p:first-child { color:red; }[/code] [l]This time we are selecting a p element that is the first child of its containing element.[/l] [code]p + div { color:red; }[/code] [l]This selector will select any div element that is the next sibling (the next child of the same parent) of a p element[/l] [hdsm]Grouping selectors[/hdsm] [l]In CSS it is possible to group selectors so that you can apply the same rule to several elements at once. The main reason to group your selectors (where possible and everything in moderation!) is to keep the code readable and maintainable by reducing repetition of code.[/l] [l]If, for example, you had in your CSS the following style rules[/l] [code]p { color:red; } h1{ color:red; } h3{ color:red; }[/code] [l]You could condense them down into one style rule by separating the selectors with a comma, like so[/l] [code]p, h1, h3 { color:red; }[/code] [l]Just remember when you make any changes to the style rule the changes will be applied to every element specified.[/l] [hdsm]Comments in CSS[/hdsm] [l]In CSS you have the ability to leave comments in your code, just like we did in HTML. The syntax of comments in CSS is slightly different to that of HTML, as you’ll see.[/l] [code]/* */ [/code] [l]Everything that is written between those tags will be ignored by the browser. Heavily commenting your code is an excellent habit to get into. Even those of us lucky to have an excellent memory will struggle to remember something from six months before.[/l] [l]Comments in CSS can span multiple lines.[/l] [hdsm]Vendor prefixes[/hdsm] [l]The browser vendors sometimes use something called a vendor prefix to add experimental, non-standard css properties. This enables us as developers to experiment with these new properties without our code being broken by changes in browser behaviour.[/l] [l]Browser prefixes are quite annoying, well I think so anyway, but as luck would have it as time goes on the need for them will diminish. For the time being, however, there are a few properties that were part of the CSS3 specification that need a little ironing out before standardisation occurs so we are stuck with the silly prefixes for now.[/l] [l]As you may be aware there are many browsers out there in the wilderness that we call the internet, so many in fact that covering every possible vendor prefix would most likely be impossible. Below is a list of the major browsers and their accompanying browser prefix.[/l] [unord] [item][l]Android (-webkit-)[/l][/item] [item][l]IOS (-webkit-)[/l][/item] [item][l]Chrome (-webkit-)[/l][/item] [item][l]Safari (-webkit-) [/l][/item] [item][l]Internet Explorer (-ms-)[/l][/item] [item][l]FireFox (-moz-) [/l][/item] [item][l]Opera (-o-) [/l][/item] [/unord] [l]When using a non-standard property we need to add the prefixed versions of the property first, in any order you like, then we add the standard property. For example the box sizing property, while supported in the current versions of the major browsers, does not work in older versions of Safari, Chrome and FireFox. To support those browsers we’d need to add the -webkit- prefix and the -moz- prefix. It would look something like this:[/l] [code]body { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } [/code] [l]Not sure whether you need vendor prefixes or not? Not to worry there is a site out there that is an invaluable resource to us as developers. The site, which is aptly named ‘can I use’, resides at the following web address:[/l] [url=][/url] [l]You can use this site to search for a property and it will list the browser support for that property. I really do recommend utilising this site when developing your CSS, it could save you from more than a few struggles with browser compatibility.[/l] [l][b]Note –[/b] Something to remember is that some browsers use slightly different syntax for certain properties than others, so always remember to check. [/l] [l]That’s all for now but look out for the next instalment of HTML and CSS for beginners where we will continue our discussion on CSS, starting with the box model.[/l] [url=][b][l]<< Back to HTML and CSS for beginners part 3[/l][/b][/url] [url=][b][r]Go to HTML and CSS for beginners part 5 >>[/r][/b][/url]

About the author

My name is Michael Griffiths, I am a website designer and developer and the owner of Griffiths Web Design. I am based in Royston, Hertfordshire. Most of my work is local, Hertfordshire, Cambridgeshire, Bedfordshire, Essex etc. but that’s not to say I won’t work elsewhere. One of the wonders of modern technology is remote working. So no matter where the client is located it is always possible to connect.

I specialise in creating ASP.NET webforms applications using C#. I use Microsoft SQL Server for database development and on the front end I use Html, CSS and JavaScript. I am also proficient in the use of jQuery and several CSS frameworks.

One of my greatest passions in life is learning. Which is why I chose to pursue a career in web design and development, technology is in a state of constant and rapid evolution which means there is always something new to learn. I also enjoy writing, both fiction and non-fiction.


Please feel free to leave a comment below:

Griffiths Web Design Logo by Michael Griffiths
Griffiths Web Design Logo by Michael Griffiths
Click to go to the top of the page