IS 201 - HTML & CSS Styling and Positioning

html tag

tells the browser that everything b/t those two tags is html code

the slash before the last tag

indicates that the tag is an ending tag and signifies the closure of the element.

head tag

stores all the data about the webpage, but doesn’t actually include any of the webpage’s content. It is also where the “title” tag goes.

body tag

contains all the elements you will see on the webpage

h1

biggest font default

h2

makes font smaller than h1

h3

makes font smaller than h2

ul

“ul” stands for “unordered list.”

ol

“ol” stands for “ordered list. Everything that is in an ol tag should also be in an li tag. In number order. Like a “p” tag, it will add a line of space before and after itself. They don’t double count the space if next to something that also has a space before and after

li

list item within an ol or ul tag

br

stands for “break” or “line break”; they don’t require a beginning and closing tag because they just insert line breaks

p

p tag = stands for “paragraph.”

img src="" alt=""

img = image tag (doesn’t need a beginning and end tag

src = source of the image file, which can be a URL or path to the image on the server; alt = alternative text for screen readers or when the image cannot be displayed.

alt = the alternate text for the image, providing descriptive information to users if the link gets broken or for the visually impaired.

a href=""

= anchor tag. used to create links for the user to click to on the webpage.

on-page anchors

a tag with href

#(id name) for seeking element

id = (name) for element being sought

< !-- comments -- >

Type that to comment out the code

If you want to comment out a section of code, highlight it and press “control backslash” ctrl + /

Font-family

• Font names here separated by commas

• It is a value that is adjusted within an attribute

• Stays in the “head,” not the body

• end value with a semi-colon “;”

Font-size

can be specified in terms of pt, px, or em

end value with a semi-colon “;”

font-weight

can be specified as the word (“bold”) or a number (“900”)

Color

can be specified as the word (“red”) or a hexadecimal code (“#3FG670)

Text-align

right, left, or justify

Text-decoration

overline, line-through, underline, none

CSS comments

/* (Comment) */

Box Model properties

padding, border, margin

Padding

clears an area around the content area

Border

• goes around the padding and content

• to make the border visible, you must define the “border-style” property

Margin

• clears an area around the border

• margins have no background color and are always transparent

positioning: id

positioning: class

how you apply a style to an html tag

class = ““

can apply multiple styles within same quotation marks as long as there is a space in between

pulls a style from a style sheet

position: absolute

tells the browser to ignore all other html elements around an element and pretend that they don't exist. Implication is that the elements won't see each other and will collide and appear on top of each other. Absolute removes the block aspect nature of the elements. It doesn't have a hard return anymore.

positioning: div

stands for “divided section”, similar to "span" element = a tag if left empty it does nothing, also used to create a custom style. "Div" is a block element. "Span" is an in-line element. "Div" will put a line of space after itself.

positioning: top

tells you how many px from the top the element starts

positioning: bottom

tells you how many px from the bottom the element starts

positioning: height

Tells element to be 100 pixels from top-to-bottom. This means that if the element starts 5px from the top, the borders are 2px each on the top and bottom, then the bottom of the element is 109px from the top of the screen.

positioning: left

Attaches the element to the left side of the screen = how many pixels away from the left side of the screen the element is

positioning: right

Attaches the element to the right side of the screen = how many pixels away from the right side of the screen the element is

positioning: width

Tells the element how many pixels wide it should be. It will not adjust with window size changes because it has a set measurement.

positioning: z-index

helps you figure out how to layer things on top of each other on the website

a lower number will be lowest of the layers (laid down first) and a higher number will be higher of the layers (laid down second)

positioning: background-image

You can change the positioning of the background image so that it starts in certain areas of the screen. It changes the orientation of the image in relation to the rest of the screen.

positioning: < center >

This tag can be placed around images to center them within a container (such as a div). For example, we could use the following code to center the image: < center > < img src="myPhoto.jpg" > < /center > .

positioning: inline

Certain elements are considered to be inline with others

positioning: block

a section of space on the webpage that you can style information within and adjust the size/style of

.header

.header {

top: 5px; /*(attribute that) Tells browser that we want our elements to start 5px down from the top*/

left: 5px; /*Tells elements to start 5px from the left*/

right: 5px;

height: 25px; /*Tells element to be 100 pixels from top-to-bottom. This means that bottom of the element is 105px from the top of the screen*/

z-index: 2;

border-bottom: solid 1px #555555;

.leftmenu

.leftmenu { /*You cannot set all four sides and set height/width bc they will conflict with each other.*/

top: 15px;

left: 5px;

width: 200px;

bottom: 39px;

z-index: 3;

padding-top: 20px;

Elements that are attached to the sides will…

…automatically adjust to a screen that changes size, but those with fixed measurements will not adjust