HTML and CSS for beginners – Part four

Web design and development based in Royston, Hertfordshire, United Kingdom

Griffiths Web Design

HTML and CSS for beginners – Part four

07709 579517

michael@griffithswebdesign.com

HTML and CSS for beginners – Part four

By Michael Griffiths

Created: 29.11.2016 00:00:00, last updated: 06.12.2016 00:00:00

HTML and CSS for beginners – Part four

A deaper look into CSS

<< Back to HTML and CSS for beginners part 3


Go to HTML and CSS for beginners part 5 >>



Selectors in CSS


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.


In css you can select elements by id, by class name, by tag name and more.


Id


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.


<p id="para1">This paragraph has the id para1</p>

Id’s must contain at least one character and they must not contain any space characters.


To call an element by id in a style sheet you need to affix ‘#’ to the beginning of the id value.


<style type="text/css">
#para1 {
background: #000000;
color:#ffffff;
}

</style>

Class


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.


When calling a class name in your style sheet you will need to affix a ‘.’ to the beginning of it.


<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>

Element name


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.


p {
background: #000000;
color:#ffffff;
}

This example would give every paragraph element in the HTML document a black background and white text.


Other ways of selecting elements


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.


#eleId p {
color:red;
}

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’.


If we had


#eleId > p {
color:red;
}

Then we would be selecting any p element that is a child (direct descendant) of ‘eleId’ and changing the font colour to red.


p:first-child {
color:red;
}

This time we are selecting a p element that is the first child of its containing element.


p + div {
color:red;
}

This selector will select any div element that is the next sibling (the next child of the same parent) of a p element


Grouping selectors


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.


If, for example, you had in your CSS the following style rules


p {
color:red;
}
h1{
color:red;
}
h3{
color:red;
}

You could condense them down into one style rule by separating the selectors with a comma, like so


p, h1, h3 {
color:red;
}

Just remember when you make any changes to the style rule the changes will be applied to every element specified.


Comments in CSS


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.


/*

*/

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.


Comments in CSS can span multiple lines.


Vendor prefixes


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.


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.


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.



  • Android (-webkit-)


  • IOS (-webkit-)


  • Chrome (-webkit-)


  • Safari (-webkit-)


  • Internet Explorer (-ms-)


  • FireFox (-moz-)


  • Opera (-o-)



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:


body {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

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:


http://caniuse.com/

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.


Note – Something to remember is that some browsers use slightly different syntax for certain properties than others, so always remember to check.


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.



<< Back to HTML and CSS for beginners part 3


Go to HTML and CSS for beginners part 5 >>

About Michael Griffiths

Web Developer and Social Media Coach

Comments

Comment posted by: coque iphone 5s

29.10.2019 17:47:18

Wireshark works on often the Macintosh although is actually obviously over kill just for this! coque iphone 5s https://www.anten.fr/