Griffiths web design based in Royston, Hertfordshire, United Kingdom

 

HTML and CSS for beginners – Part three

Author:   Michael Griffiths

Date created:   28 November 2016

[postpic=htmlcsspart3.jpg class=img-responsive center-block title=HTML and CSS for beginners part 3 alt=Part 3 of HTML and CSS for beginners style=][/postpic] [url=http://www.griffithswebdesign.com/blog/post/37][b][l]<< Back to HTML and CSS for beginners part 2[/l][/b][/url][url=http://www.griffithswebdesign.com/blog/post/39][b][r]Go to HTML and CSS for beginners part 4 >>[/r][/b][/url] [hdlg]Cascading Style Sheets - CSS[/hdlg] [l]Cascading Style Sheets, or ‘CSS’, was first developed in 1997 as a way for developers to define the look and feel of a HTML document and to separate the content from the design. This enables HTML to do the job it was intended to do without being bloated by extra attributes etc.[/l] [l]At first the browser support was limited to changing the colours of text and the page but over time the browsers started to adopt the CSS standard and the World Wide Web quickly grew into something that we all want to use. The popularity of CSS has been growing exponentially since its initial development. So much so that I doubt there is a page on the net that doesn’t use css. I can say that with a great deal of certainty because even if the developer did not write any CSS, the browser has default styles built into it for the HTML elements. Admittedly leaving the styles unchanged is an extreme rarity because who would want to visit such a drab and dreary site? Not me that’s for sure![/l] [l]As previously mentioned CSS can be used to define the look and feel of each HTML element but that’s not the whole story. Remember when I told you about how HTML tables were, one upon a time, heavily abused by developers to create complex layouts? Well that’s where the real magic of CSS exists. You can use it to create complex layouts. Also if you combine your CSS style declarations with some media queries then CSS allows you to create layouts that respond to screen size. You’ll never have to side-ways scroll unnecessarily again![/l] [hdmd]Inline Styles vs Internal Style Sheet vs External Style Sheet[/hdmd] [l][b]There are three different ways to add style to a HTML document.[/b][/l] [ord] [item][l]Inline styles[/l][/item] [item][l]Internal style sheet[/l][/item] [item][l]External style sheet[/l][/item] [/ord] [l]Inline styles have the highest priority. What this means is that styles declared inline can override those of an internal or external style sheet.[/l] [l][b]Note -[/b] While it is perfectly valid to use inline styles it will result in a hard to read HTML document. I personally nearly always use external style sheets. Part of the reason for the creation of CSS in the first place was to separate the content from the design. Adding inline styles goes against that ethos but there will be times where inline is the only way, just use them sparingly if you wish to be able to decipher your HTML document at a later date.[/l] [hdmd]Inline styles[/hdmd] [l]Now I want to show you a quick example of an inline style. In the example we will be styling a paragraph element. We will give the paragraph a black background, using the ‘background-color’ property and giving a value of ‘#000000’ (that’s the hex value of black but you could use the colour name or its rgb equivalent). We will also make the text white by the use of the property ‘color’, which will take a value of ‘#ffffff’ (#ffffff is the hex value for white).[/l] [l]Styles declared inline will override styles from internal/external style sheets.[/l] [l][b]Pre-example note –[/b] British developers beware HTML, like most programming languages, uses American-English. So watch out for the spelling of certain words. E.g. in Britain we would spell colour but in HTML it would be color.[/l] [code]<p style="background-color:#000000; color:#ffffff;">This paragraph will have a black background with white text.</p>[/code] [l]When viewed in the browser you should get an output like this:[/l] [postpic=inlinestyledemo.jpg class=img-responsive title=An example of inline styles alt=This is what the browser displays, as instructed by our css. style=][/postpic] [hdmd]Internal style sheets[/hdmd] [l]To create an internal style sheet you will need to add some tags to the head section of the HTML document. The tags look like this[/l] [code]<style type="text/css"></style>[/code] [l]As you can see I have also added an attribute labelled as type with a value of text/css. This attribute identifies the internet media type of the tag (The Internet Media Type used to be known, and is still referred to by many, as a MIME type) and the value indicates that the content of the style tags is CSS.[/l] [l]Once you have those tags in place you can go ahead and add some styles. So let’s say we have one h1 set of tags with the id ‘foo’ and two paragraphs. We will give one paragraph the class name ‘bar’.[/l] [l]In the CSS we will centre align the heading. We will also give all paragraph elements a grey background colour and black text. Finally we will give our paragraph, with the class name bar, white text.[/l] [l]In the body of a HTML document add your tags.[/l] [code]<h1 id="foo">This header has the id foo</h1> <p>This is a paragraph with no id or class. This is a paragraph with no id or class. This is a paragraph with no id or class. This is a paragraph with no id or class.</p> <p class="bar">This is also a paragraph but this one has a class called bar. This is also a paragraph but this one has a class called bar. </p>[/code] [l]Next, in between the head tags you need to add a set of style tags. Once you have done so go on and add your styles. When completed your style sheet should look like this[/l] [code]<style type="text/css"> #foo{ text-align: center; } p { background-color:#808080; color:#000000; } .bar{ color:#ffffff; } </style>[/code] [l]Below is what you can expect when you view the HTML document in the web browser.[/l] [postpic=cssoutput1.jpg class=img-responsive title=css output alt=our styles as rendered by the browser style=][/postpic] [hdmd]External style sheets[/hdmd] [l]Together we have looked at inline styles and internal style sheets. The final stop on this little ride is fast approaching: External style sheets.[/l] [l]So what is an external style sheet? Well I’m glad you asked. An external style sheet is pretty much the same as an internal one except the styles are kept in their very own file, a file that ends with ‘.css’[/l] [l]The syntax of an external style sheets is identical to that of an internal style sheet so there isn’t much to tell you really.[/l] [l]The example we will go through in this section will use the same HTML from the internal style sheet example. So open up that document in your text editor.[/l] [l]We also need another document, a CSS file. So in the folder in which your HTML file lives please create a .css file, name it whatever you like just so long as it ends with .css (in the example mine is called ‘external.css’)[/l] [l]If your chosen text editor doesn’t auto generate a blank CSS file then create a .txt file then rename it (including the .txt extension)[/l] [l]Our next step is to get the styles we created in the internal style sheet example into our new .css file. A simple copy and paste of everything that falls between the tags will suffice. (make sure you only copy the contents of the style tags and not the tags themselves, they can just be deleted.) When you have done this your .css file should look like this:[/l] [code]#foo{ text-align: center; } .bar{ color:#ffffff; } p { background-color:#808080; color:#000000; } [/code] [l]If you load your HTML page in the browser at this point the only styles that will be present will be the browser defaults. How drab![/l] [l]So how do we tell our HTML document that the styles we need are stored elsewhere? Well that’s the easy part. We need to add a link to our HTML document. This link will reside in between the head tags. The link tag will have three attributes [b]type[/b], [b]rel[/b] and [b]href[/b].[/l] [l]The [b]type[/b] attribute for this tag is the same as it was in the internal style sheet, the internet media type.[/l] [l]The [b]rel[/b] attribute defines the relationship that the linked resource has with the document. In this instance it is telling the browser that the linked resource is a style sheet.[/l] [l]The [b]href[/b] attribute specifies the location/URL of the linked resource.[/l] [l]Your link should look like this:[/l] [code]<link type="text/css" rel="stylesheet" href="external.css" />[/code] [l]Now reload your HTML document in the browser and you’ll see that the styles will be applied. The output will be the same as it was for the internal style sheet example.[/l] [l][b]A quick note on the cascading order[/b][/l] [l]The rules surrounding the cascading order of CSS is quite complex but I aim to give you a little insight to prevent some CSS nightmares that I myself have experienced.[/l] [l]CSS styles can be specified in several ways but in the end they will all cascade into one enormous style sheet. There will be, at times, conflict between the style sheets that influence how the styles are merged.[/l] [l]As we already know styles can be read from internal style sheets, external style sheets, inline styles and the boring old browser defaults.[/l] [l]Below is a list of these four ways to read styles in the default priority order, with one being the least important and four being the most important.[/l] [ord] [item][l]Browser default styles[/l][/item] [item][l]Styles from external style sheets[/l][/item] [item][l]Styles from internal style sheets[/l][/item] [item][l]Inline styles[/l][/item] [/ord] [l]It is also worth noting that, like most other forms of programming, the browser reads from the top down. So how does this affect our list of importance? Well what happens is that if the browser comes across two or more style rules that have the same ‘weight’ then the last rule on the list is applied last.[/l] [l]I am aware that this can be quite confusing so I would heartily suggest whipping up a HTML page and add various styles that will conflict and have a play around. For a much more in depth explanation of the cascade order please visit an amazing post I came across a little while back (although it was too late for me at the time, it’s still a handy reference that I like to keep around.)[/l] [url=http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css]http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css[/url] [url=http://www.griffithswebdesign.com/blog/post/37][b][l]<< Back to HTML and CSS for beginners part 2[/l][/b][/url] [url=http://www.griffithswebdesign.com/blog/post/39][b][r]Go to HTML and CSS for beginners part 4 >>[/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.

Comments

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