Do It Yourself – Website Tutorials
+ Module 5:
http://www.learn-to-code-london.co.uk/blog/2017/02/how-to-make-your-web-pages-look-cool/
+ FREE Full Tutorial:
http://www.learn-to-code-london.co.uk/blog/free-online-coding-tutorials/
+ Learn To Code London:
http://www.learn-to-code-london.co.uk/
This is the fifth module in the How to Make Your Own Website Tutorial.
Last time, we talked about “the secret” that most developers won’t tell you! We saw an example how to discover new HTML tags and plug them into your web pages. In this module, I will show you how to make your web pages look cool!
The Basics Of Web Programming
So far we have learnt the basics of HTML, the most common tags and got a very simple web page up and running locally (on our machine or using CodePen). But there is more to web programming than just HTML, in fact there are 3 fundamental web technologies that work together to bring web pages to life. All 3 are required to create beautiful websites.
1. HTML
HTML provides the structure to our web pages. You can think of HTML as a noun! This is the content we want to display in our web page. We cover this already in previous modules.
2. CSS
Cascading Style Sheets (CSS) provides the styling for our web pages. Think of CSS as a adjective. It describes the noun. CSS is how we want to display our content in our web page. This is what we will focus on in this module.
3. JS
Java Script (JS) is the most advanced out of the 3 technologies and provides the dynamic elements in a web page. Think of JS as a verb which describes action! JS allows our web pages to be more dynamic as opposed to static content. We will cover JS in a future module.
HTML + CSS +JS = Web Page
Introduction to CSS
CSS3
CSS describes the presentation of a web page or more commonly multiple web pages. This separation of data or content from presentation is a very common programming concept that you will find in most languages. It makes sense to have this separation of concerns for a number of reasons.
CSS is a completely different language to HTML with it’s own syntax. We are currently on CSS version 3 which is abbreviated to CSS3.
Why Separate CSS from HTML?
Allows HTML to focus just on the content and leave the formatting and styling to CSS. This helps keep HTML files small and concise.
We can use a single CSS to define the style of a whole web site not just one web page! So CSS allows us to scale up.
A web site maybe made up of dozens or even hundreds of individual web pages, imagine if the the style was defined separately in each web page and then we decided we wanted to change the font size or colour for the whole site? It would be a massive job! But with CSS we would just need to change it in one place.
source