際際滷

際際滷Share a Scribd company logo

HTML & CSS Basics

J
John Nelson

This document provides an introduction to HTML and CSS. It explains that HTML uses tags to describe content like text, images, and videos. It provides examples of common tags like headings, links, and images. The document then introduces CSS as a way to separate style from content by controlling font, color, alignment and other stylistic aspects. It demonstrates how CSS can be used to globally style all paragraphs, headings, links or other elements on a page.

1 of 12
Downloaded 19 times
html & css the basics
tag content <h1>My heading</h1> closing tag tags are for describing content.
what's content? tex t ag es im videos {all the above.
more tag examples <h2>My subheading</h2> <a href=http://google.com>Google</a> { attribute
<img src=/slideshow/html-css-basics-10263935/10263935/photo.jpg></img> where's the content? sometimes, the attributes are enough to describe tag hence, no content. tags without content, can be written in a shortened way, like so: <img src=photo.jpg />
a bunch of tags together is called an HTML document.
checkout some popular website's HTML code. chrome & firefox right click anywhere on the page, and click View Source or View Page Source.
whoa. you probably just saw a bunch of stuff you've never seen before. for example, on Google or YouTube you might have seen some function() { doSomething(); uglyParentheses(); JavaScript } p { font-family:Helvetica; } CSS
without CSS: what's CSS? <center><p>My centered paragraph.</p></center> with CSS: html css p { <p>My centered paragraph</p> align: center; }
CSS is just a way of separating style content font text color images image border videos alignment (left, center, right) links
using CSS do stuff with all p (paragraph) tags set font to arial change the p { color: white; color to white font-family: Arial; font-size: 12px; } set font size to 12 color, font-family, and font-size are properties. white, arial, and 12px are values.
say I wanted to... change all heading level 1 (h1) tags to the color black change all link (a) tags to the color blue change all image (img) tags to the color blue give me the CSS.

More Related Content

HTML & CSS Basics

  • 1. html & css the basics
  • 2. tag content <h1>My heading</h1> closing tag tags are for describing content.
  • 3. what's content? tex t ag es im videos {all the above.
  • 4. more tag examples <h2>My subheading</h2> <a href=http://google.com>Google</a> { attribute
  • 5. <img src=/slideshow/html-css-basics-10263935/10263935/photo.jpg></img> where's the content? sometimes, the attributes are enough to describe tag hence, no content. tags without content, can be written in a shortened way, like so: <img src=photo.jpg />
  • 6. a bunch of tags together is called an HTML document.
  • 7. checkout some popular website's HTML code. chrome & firefox right click anywhere on the page, and click View Source or View Page Source.
  • 8. whoa. you probably just saw a bunch of stuff you've never seen before. for example, on Google or YouTube you might have seen some function() { doSomething(); uglyParentheses(); JavaScript } p { font-family:Helvetica; } CSS
  • 9. without CSS: what's CSS? <center><p>My centered paragraph.</p></center> with CSS: html css p { <p>My centered paragraph</p> align: center; }
  • 10. CSS is just a way of separating style content font text color images image border videos alignment (left, center, right) links
  • 11. using CSS do stuff with all p (paragraph) tags set font to arial change the p { color: white; color to white font-family: Arial; font-size: 12px; } set font size to 12 color, font-family, and font-size are properties. white, arial, and 12px are values.
  • 12. say I wanted to... change all heading level 1 (h1) tags to the color black change all link (a) tags to the color blue change all image (img) tags to the color blue give me the CSS.