Unit 20: Client Side Customisation of Web Pages

P1. Explain how HTML files access CSS

Introduction

Within this blog, I will be writing about the uses of HTML and CSS on creating website and how both are similar to each other.

HTML

HTML stands for Hypertext Markup Language it is the language used for describing the structure of Web pages and was devised to allow website creation. It is easy to learn using basic code and quite powerful in what it allows the users to create web pages.

With HTML, the user describes the structure of pages using markup which annotates the text so that the user can manipulate the text. Most markup languages are readable because the annotations are written in such way to distinguish them from the text. For example, On HTML the markup tags are < and >. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.

The following very simple example of a HTML document illustrates how to create a paragraph. As you can see the paragraph starts with the open tag <p> and to show the end of a paragraph, you must write a close tag </p>. 

<p> some text</p>

CSS

CSS stands for Cascading Style Sheets, which is a type of web language for describing the presentation of Web pages, including colors, layout, and fonts.

Using CSS in an external stylesheet can enable the separation of document content, focusing on the appearance and formatting. The separation can improve content accessibility, provide more flexibility and can control the presentation characteristics, to suit specific requirements. You can also change a number of webpage layouts with the use of one CSS style sheet. 

Here is an example of some formatting code:-

#topleft{
    float:left;
    height:150px;
    width:220px;
    background:blue;
 }

CSS can position the box I made on the page. Here is an example of CSS code

#flag{

    position: fixed;
    border:1px solid black;
    height:400px;
    width:600px;
 }

Here I choose the format for the flag size. Also, it is positioned fixed which means it always stays in the same place even if the page is scrolled. 

<div id="flag"></div>

This refers to the code above. Div tag is use to create shapes in CSS.

Comparison

HTML provides the structure of the page, CSS the visual and layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basics of building Web pages and Web Applications.

Reference

goo.gl/a7kKWJ

http://www.w3.org/standards/webdesign/htmlcss