html & css

the basics

<h1>My heading</h1>

tag content

closing tag

tagsare for describing content.

what's content?

imagestextvideos {

all the above.

more tag examples<h2>My subheading</h2>

<a href=”http://google.com”>Google</a>

attribute

{

<img src=”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”.

internet explorer

stop using it.

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

JavaScriptfunction() { doSomething(); uglyParentheses();}

CSSp { font-family:Helvetica; }

what's CSS?without CSS:

<center><p>My centered paragraph.</p></center>

with CSS:

<p>My centered paragraph</p>

html css

p { align: center;}

CSS is just a way of separatingstyle content

fontcolorimage borderalignment (left, center, right)

textimagesvideos

links

using CSS

p { color: white; font-family: Arial; font-size: 12px;}

do stuff with all p (paragraph) tags

change the color to white

set font to arial

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 link (a) tags to not be underlined

give me the CSS.

hint: look up the text-decoration property on google (w3schools is a good resource) and look at the possible “property values”.

putting CSS on your website3 ways

inline: putting CSS in the specific elements you want to change

internal: putting CSS in a separate tag

external: putting CSS in a separate file

we'll look at the three ways to change an image's border to the color blue and the size 2px

inline here's our image HTML:

<img src=”myimage.jpg” />

to add a border with CSS, we set the “style” property to equal our CSS code

find the CSS properties for the border style, border width, and border color

<img src=”myimage.jpg” style=”your css here” />

hint: returns (enters) do not matter in CSS