basic html & css
Post on 29-Nov-2014
367 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related