CSS Combinators

  • Post author:
  • Post Category:CSS
  • Post Comments:0 Comments

CSS combinators are used to target specific areas of an HTML file. They are very useful as they prevent the programmer having to put too many "class=" attributes within the…

Continue Reading CSS Combinators

Responsive websites

  • Post author:
  • Post Category:CSS
  • Post Comments:0 Comments

This methodology used 'float' to position elements in the browser. <!-- index.html --> <!DOCTYPE html> <html> <head> <title>My website</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> <link rel="stylesheet" a href="browser-reset.css"> <link…

Continue Reading Responsive websites

Inserting images with HTML and CSS

  • Post author:
  • Post Category:CSS
  • Post Comments:0 Comments

Basic image with HTML index.html <!DOCTYPE html> <html> <head> <title>My website</title> <meta charset="UTF-8"> <link rel="stylesheet" a href="browser-reset.css"> <link rel="stylesheet" a href="style.css"> </head> <body> <div class="menu-content-wrapper"> <h1>My picture</h1> <img src="img/myImage.jpg" alt="park…

Continue Reading Inserting images with HTML and CSS

Wrappers – beginning to control layout

  • Post author:
  • Post Category:CSS
  • Post Comments:0 Comments

I've added a wrapper to my code. A wrapper essentially has several functions. index.html <!DOCTYPE html> <html> <head> <title>My website</title> <meta charset="UTF-8"> <link rel="stylesheet" a href="browser-reset.css"> <link rel="stylesheet" a href="style.css">…

Continue Reading Wrappers – beginning to control layout

Creating menus

  • Post author:
  • Post Category:HTML
  • Post Comments:0 Comments

We create menus using the unordered list tags <ul></ul> and the list item tags <li></li>. Let's start with some raw html and see what it looks like. <!DOCTYPE html> <html>…

Continue Reading Creating menus

Links within pages

If we create another page of a website, we can link to it within our website using the <a href> </a> tags. e.g. <a href="about_me.html">About me</a> If the file 'about_me.html'…

Continue Reading Links within pages

Styling text with css

  • Post author:
  • Post Category:CSS
  • Post Comments:0 Comments

First, let's start with just a basic HTML page. A link has been added as well so we can look at styling that too. index.html <!DOCTYPE html> <html> <head> <title>My…

Continue Reading Styling text with css

CSS classes and IDs

  • Post author:
  • Post Category:CSS
  • Post Comments:0 Comments

Classes and IDs are used to target specific elements in a page. Using classes index.html <!DOCTYPE html> <html> <head> <title>My website</title> <meta charset="UTF-8"> <link rel="stylesheet" a href="browser-reset.css"> <link rel="stylesheet" a…

Continue Reading CSS classes and IDs