CSS (Cascading Style Sheets)

CSS CSS – Cascading Style Sheets – Cascade because of the way CSS rules can stack on top of each other. Allows you to add style (color, bold, formatting, etc.) to a web page. CSS tells browsers how to display the HTML. – Headings should be bold and red. – Paragraphs should be left-aligned. Allows you to change the style in one place but affect the whole study. Allows you to separate the style from the HTML. Useful for more than just style. jQuery uses selectors!

CSS – It’s kind-of like a lens through which you look to see the document.

CSS - HTML The tag defines a block on the page. A tag defines a portion of text on a line. Both tags very useful to CSS. An "id" identifies the tag. Unique name. One per page. A "class" defines a group of tags. Multiple per page. Welcome to CSS! Attributes Opening Tag Closing Tag

CSS - RULES /* CSS comment */ selector { property: value; } /* CSS example All tags will have blue text and a black border around them. */ p { color: blue; border: 1px solid black; }

CSS - RULES In addition to HTML tags "ids" and "classes" can be used. The "#" is used for "ids" The "." for "classes" … #Q1_div { color: blue; }.question { border: 2px solid red; }

CSS - RULES Multiple selectors can be used to define a rule. A comma acts kind of like an "OR" and a space like a "AND". /* Change the text of Header 1 to blue for the question with id="Q1_div" */ #Q1_div.header1 { color: blue; } /* Give both headers and the footer a background color of gray. */.header1,.header2,.footer { background-color: #c0c0c0; }

CSS - DEFINED Hello tag can be anywhere but usually in the tag.-->.question { border: 2px solid red; } in tag.--> <link rel="stylesheet" type="text/css" href="[%GraphicsPath()%]mystyle.css">

CSS - PRIORITY Order of priority: – Inline, tag, external file. – The more specific you are in your rule the higher priority it has..header1 { background-color: blue; }.question.header1 { background-color: red; } /* Header 1 background color will be red. */

CSS –HOOKS HTML can have classes and ids that you can write CSS for.

CSS – BOX MODEL All HTML tags or elements can be considered as "boxes". The main "box" we use is the tag. The diagram below shows how the padding, border, and margin surround the content.

USEFUL CSS.header1 { background-color: blue; /*Box background color*/ padding: 10px; /*Padding between content and border*/ margin: 10px; /*Space surrounding border*/ font-size: 30px; /*Text size*/ color: #c0c0c0; /*Text color*/ display: none; /*Removes box. display:block shows it*/ width: 500px; /*Set width of box*/ border: 1px solid black; /*Draw 1px black border around box. Useful for debugging.*/ } /* See See Survey Settings(Style) section in SSI Web Help. */

CSS MOBILE The CSS below only applies to small screens (those 640 pixels wide or only screen and (max-width: 640px) { /* These styles only applied on screens 640px or less */.question { width: 100%; margin: 5px; }

CHROME DEVELOPER TOOLS Chrome Web Browser, Tools, Developer Tools (F12) Excellent tool for debugging (stepping through) JavaScript Excellent tool for inspecting HTML Excellent tool for inspecting CSS View errors in Console. DEMO