Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Css & Html


Published on

A brief introduction to CSS and HTML

Published in: Design, Technology, Education

Css & Html

  1. 1. CSS & HTML<br />An Introduction to<br />
  2. 2. What is HTML?<br />Hyper Text MarkupLanguage<br />Allows browsers to show a webpage<br />Building blocks of websites<br /> Contained within an HTML file<br />Concerned with the structure of a website instead of style<br />Consists of open tags and close tags i.e.<br />&lt;div&gt;&lt;/div&gt; - Containers (boxes)<br />&lt;p&gt;&lt;/p&gt; - Paragraph<br />
  3. 3. HTML - Example<br />&lt;html&gt;<br />&lt;head&gt;<br />&lt;title&gt;HTML &amp; CSSExample&lt;/title&gt;<br />&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;div id=“container”&gt;<br />&lt;h1&gt;My First Heading&lt;/h1&gt;<br />&lt;p&gt;My first paragraph&lt;/p&gt;<br />&lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />
  4. 4. What is CSS<br />Cascading Style Sheet<br />Allows browsers to show the right style of a webpage – controls how HTML elements are displayed<br />Contained within a CSS file but can also be within the HTML file (however big file size)<br />Concerned with fonts, colours, borders, text decoration as well as some structural influences<br />Consists of Class’s and ID’s<br />Class (repeated): .red{ color:#CC0000}<br />ID (unique): #nav{ width:700px; height: 50px;}<br />
  5. 5. CSS -Example<br />body{ background-color:#333333; font-family:arial;}<br />h1{ color:#00AFB9; font-size:24pt; font-family: arial;}<br />#container{ width:400px; hieght:300px; background-color:#666666; color:#FFFFFF; border:#999 solid 6px; padding:20px;}<br />
  6. 6. Put it all together....<br />Example Webpage<br />