HIGHER COMPUTING CSS

WHAT IS CSS? CSS: Cascaded Style Sheets used to separate a web site’s content(information) from its style(how it looks).

HOW DOES IT LOOK? In the head section, add a style tag Goes inside the style tag, add css code. CSS code goes here CSS code looks different than html code. Syntax for CSS code is: selector {property:value} selector {property:value; property:value;…}

HOW DOES IT WORK? selector: Name of the tag. For example Body, p, h1 etc property: the property you want to change for example the colour, font, background image etc value: the value you want to give the property. For example 14 px, blue etc

CSS PRACTICE Create the following webpage using the script below: CSS example body {background-color: red} h1 {background-color: green} h2 {background-color: yellow} p {background-color: blue} div {background-color:blue; color:white; font-size:4em} This is a heading1 This is a heading2 This is a heading 3 This is a div tag This is a paragraph

HOW TO SPECIFY TEXT SIZE? h1 {font-size: 12em or 12px, or 12pt or 12%} em is the unit for the calculated size of a font. So "2em", for example, is two times the current font size. px (such as font-size: 12px) is the unit for pixels. pt (such as font-size: 12pt) is the unit for points. % (such as font-size: 80%) 80% of the original size.

CSS COLORS CSS brings 16,777,216 colors to your disposal. body {background-color: “red” or “#ff0000”} red #ff0000 There are 17 valid predefined colour names. They are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

TEXT COLOR AND BACKGROUND COLOR PROPERTIES Text color property: color Background color property: background-color Examples h1 { color: yellow; background-color: blue; }

CHANGING THE FONT TYPE Property: font-family This is the font itself, such as Times New Roman, Arial, or Verdana. The font you specify must be on the user's computer( 'safe' fonts are arial, verdana and times new roman) Examples: h1 {font-family: arial, helvetica}

CHANGING THE SIZE OF YOUR FONT Size of your font: font-size Be careful with this - text such as headings should not just be a paragraph in a large font; you should still use heading tags (h1, h2 )h1 h2 Example: p {font-size: 14px}

MAKE IT BOLD AND/OR ITALIC Property for bold: font-weight Example h2 {font-weight: bold} Property for italic: font-style Example h3 {font-style: italic}

UNDERLINE TEXT Property: text-decoration text-decoration: overline, which places a line above the text. text-decoration: line-through, strike-through. text-decoration: underline text-decoration: none Example a {text-decoration: underline, color:blue}

TRANSFORM TEXT Property: text-transform text-transform: capitalize turns the first letter of every word into uppercase. text-transform: uppercase turns everything into uppercase. text-transform: lowercase turns everything into lowercase. text-transform: none

ID AND CLASS SELECTORS What is you have 2 paragraphs that you want to look different? p {color: blue} changes the style of all paragraphs! There are other ways select elements to style. They are called ID and CLASS selectors

ID SELECTOR HTML code I’m paragraph 1! I’m paragraph 2! CSS code #para1 {color:red} #para2 {color:blue}

CLASS SELECTOR HTML code I’m paragraph 1! I’m paragraph 2! CSS code.para1 {color:red}.para2 {color:blue}

WHAT’S THE DIFFERENCE? An id can only be used once. I’m the only red allowed! HaHa A class can be used many times I’m blue I’m blue too!

Thanks to J.Hubbard for some examples in this presentation