CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web page looks, background color, font, containers (divs), forms, tables, etc. are all styled by CSS. You can even animate images and other elements using CSS3 W3Schools is quite possibly one of the best online resources to figure out how to do anything on the web. You can find how to add HTML Elements and how to use CSS. Here is a link to their CSS section Here is a link to the new CSS3 aspects like animations

CSS is used to Style the Invisible Box Around Every HTML Element HTML Block Elements Most HTML elements are defined as block level elements or as inline elements. Block level elements normally start (and end) with a new line when displayed in a browser. Examples:,,, HTML Inline Elements Inline elements are normally displayed without starting a new line. Examples:,,, The HTML Element (The powerful Container) The HTML element is a block level element that can be used as a container for grouping other HTML elements. The element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it. When used together with CSS, the element can be used to set style attributes to large blocks of content. Another common use of the element, is for document layout. It replaces the "old way" of defining layout using tables. Using tables is not the correct use of the element. The purpose of the element is to display tabular data.

Lets Investigate Block Elements Block-level Elements A block element is an element that has, but may not be limited to, the following characteristics: If no width is set, will expand naturally to fill its parent container Can have margins and/or padding If no height is set, will expand naturally to fit its child elements (assuming they are not floated or positioned) By default, will be placed below previous elements in the markup (assuming no floats or positioning on surrounding elements) Ignores the vertical-align property So, for a block element, it’s not necessary to give it a set width or to give it a width of 100% if you want it to fill its parent horizontally. In fact, doing either of those things may cause maintainability issues or other undesirable problems.width of 100% And, as the fourth item in the above list indicates, it’s also not necessary to “clear” a block element; assuming no floats are affecting the block element, it will be cleared automatically and will start on the next “line” in the page’s output. Examples of Block Elements:,,,,,,, and.

Lets Investigate Inline Elements Inline Elements An inline element has, but may not be limited to, the following characteristics: Flows along with text content, thus Will not clear previous content to drop to the next line like block elements Is subject to white-space settings in CSSwhite-space Will ignore top and bottom margin settings, but will apply left and right margins, and any padding Will ignore the width and height properties If floated left or right, will automatically become a block-level element, subject to all block characteristics Is subject to the vertical-align property The easiest way to picture an inline element is to think of it as a box that acts like text. What happens, for example, to text that’s not separated by other elements? It flows one letter after the other. If you put an inline element next to text, it will flow next to that text just like another piece of text. Examples of Inline Elements:,,,,,,, and.

Block elements are structural Inline elements are text-based You can put any block element inside another block element You can also put any inline element inside a block element, as well as any inline element inside any other inline element Generally, you cannot put a block element inside an inline element You have the option to change any block-level element to an inline element, and vice-versa, using the display property Great Block and Inline Reference: Resource for changing block elements to inline for layout and navigation: display-inline-block/ display-inline-block/

CSS uses Style Rules applied to HTML Elements A CSS Rule contains 2 parts: Selector & Declaration The Selector indicates which HTML element the rule is applied to, you can apply the same rule to more than one element if you separate the element names with commas p { font-family: Arial;} h1, h2, h3 { font-family: Arial; color: yellow; } The Declaration/s indicate how the HTML element/s will be styled. Declarations have 2 parts: Property & Value p { font-family: Arial;} Properties indicate the aspects of the element you want to style Values specify the style choice

Link a CSS Stylesheet using this HTML tag: For example this week you’ll use Our stylesheet file will be named style_intro.css, the rest of the line stays the same, only the stylesheet name changes link – the link element is used to tell the browser where to find the CSS file. The element is an empty element, meaning it does now need a separate closing tag and it lives in the element. It should have these 3 html attributes (html_attributes):html_attributes href – specifies the path to the css file. One stylesheet in the same folder as the html files: The path would be the name of the stylesheet Several stylesheets, make a folder called css: The path would be the folder and name of the stylesheet separated by a / Also for several stylesheets you must link each one separately, these are the stylesheet links for a responsive site, the different stylesheets define how the site looks at various sizes : css/screen_style.css css/screen_layout_large.css css/screen_layout_small.css css/screen_layout_medium.css type – specifies the type of document being linked to: text/css rel – specifies the relationship between the HTML page and the file it is linked to: stylesheet

CSS Tips A CSS declaration always ends with a semicolon (;), and declaration groups are surrounded by curly brackets { } p {color:red;text-align:center;} Do not add a space between the property value and the unit (such as margin-left:20 px). The correct way is: margin-left:20px To make the CSS more readable, you can put one declaration on each line, like this: p { color:red; text-align:center; } Do NOT start an ID name with a number! It will not work in Mozilla/Firefox Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; } /*Styles for body copy*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }

Lets Create This Navigation (all CSS3) After Styling the HTML document from week 1 Add your own styles to the document. You will style block and inline elements, also you will create 2 with div id

What is an ID Selector? The W3C defines class ID as "a unique identifier to an element". But what does that actually mean? CSS IDs are similar to classes in that they define a special case for an element. The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". CSS Code: #markup{ border: 1px solid #FF0000; overflow:auto; width: 80%; background-color: #FFFFCC; color: #CC0000; padding: 10px; } HTML Code: Some other common markup styles (this is a level 2 heading) Make this text and each of the following a paragraph plus the markup described in the text. Emphasize this paragraph. This paragraph should be strong. This is a long quote that should be displayed as such. Display:

What is the Class Selector? The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center-aligned: CSS Code:

Color Resources Mozilla CSS extensions To Create the Navigation use the HTML and CSS Tutorial code here: Active Navigation Demo: demo.html To investigate the browser specific gradient code visit: