CSS

http://schoolacademy.telerik.com,[object Object],Introduction to Cascading Style Sheets (CSS),[object Object],Svetlin Nakov,[object Object],Telerik Corporation,[object Object],www.telerik.com,[object Object]

Table of Contents,[object Object],What is CSS?,[object Object],Styling with Cascading Stylesheets (CSS),[object Object],Selectors and style definitions,[object Object],Linking HTML and CSS,[object Object],Fonts, Backgrounds, Borders,[object Object],The Box Model in W3C and IE,[object Object],Alignment, Z-Index, Margin, Padding,[object Object],Positioning and Floating Elements,[object Object],Visibility, Display, Overflow,[object Object],2,[object Object]

CSS: A New Philosophy,[object Object],Separate content from presentation!,[object Object],3,[object Object],Content ,[object Object],(HTML document),[object Object],Presentation,[object Object],(CSS Document),[object Object],Title,[object Object],Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at pede ut purus malesuada dictum. Donec vitae neque non magna aliquam dictum.,[object Object],[object Object]

arcu vel elit ultricies porta. Proin tortor purus, luctus non, aliquam nec, interdum vel, mi. Sed nec quam nec odio lacinia molestie. Praesent augue tortor, convallis eget, euismod nonummy, lacinia ut, risus. ,[object Object],Bold,[object Object],Italics,[object Object],Indent,[object Object]

The Resulting Page,[object Object],4,[object Object],Title,[object Object],Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at pede ut purus malesuada dictum. Donec vitae neque non magna aliquam dictum.,[object Object],[object Object]

arcu vel elit ultricies porta. ProinTortor purus, luctus non, aliquam nec, interdum vel, mi. Sed nec quam nec odio lacinia molestie. Praesent augue tortor, convallis eget, euismod nonummy, lacinia ut, risus. ,[object Object]

CSS Intro,[object Object],Styling with Cascading Stylesheets,[object Object]

CSS Introduction,[object Object],Cascading Style Sheets (CSS),[object Object],Markup language, used to describe the presentation of document,[object Object],Defines sizes, fonts, colors, layout, etc.,[object Object],Improves content accessibility,[object Object],Improves flexibility,[object Object],Designed to separate presentation from content,[object Object],Because of CSS all HTML presentation tags are deprecated, e.g. <font>, <center>, <b> etc.,[object Object],6,[object Object]

CSS Introduction (2),[object Object],CSS can be applied to any XML document,[object Object],Not just to HTML / XHTML,[object Object],CSS can specify different styles for different rendering methods,[object Object],On-screen,[object Object],In print,[object Object],Etc.,[object Object],… even by voice or Braille-based reader,[object Object],7,[object Object]

Why “Cascading”?,[object Object],Priority scheme determining which style rules apply to element,[object Object],Cascade priorities or weights are calculated and assigned to the rules,[object Object],Child elements in the HTML DOM tree inherit the styles from their parent,[object Object],Can override them,[object Object],Control via !important rule,[object Object],8,[object Object]

Why “Cascading”? (2),[object Object],9,[object Object]

Style Sheets Syntax,[object Object],CSS has simple syntax, based on English words,[object Object],Contains a set of cascading rules,[object Object],Each rule consists of one or more selectors and declaration block,[object Object],Declaration block consists of one or more semicolon-terminated declarations in curly braces,[object Object],Declaration consists of property, a colon and value,[object Object],10,[object Object],h1,h2,h3,h4,h5,h6 { color: green },[object Object]

Style Sheets Syntax (2),[object Object],Selectors determine which element the rule applies to: ,[object Object],All elements of specific type,[object Object],Those that mach specific attribute,[object Object],Elements may be matched depending on how they are nested in the document (HTML),[object Object],Examples:,[object Object],11,[object Object],h1 .title { color: green },[object Object],#menu li { padding-top: 8px },[object Object]

Style Sheets Syntax (3),[object Object],Pseudo-classes define further behavior,[object Object],Appended to a selector ,[object Object],:hover, :first-letter, :visited, :active, :before, :after,[object Object],Not all browsers support them fully,[object Object],12,[object Object],a:link {text-decoration: none}a:visited {text-decoration: none}a:active {text-decoration: none}a:hover {text-decoration: underline; color: red},[object Object],.title:before { content: "»" },[object Object],.title:after { content: "«" },[object Object]

Style Sheets Syntax (4),[object Object],Three primary types of selectors:,[object Object],By tag:,[object Object],By element id:,[object Object],By element class name (only for HTML): ,[object Object],Selectors can be combined with commas:,[object Object],This will match <h1> tags, elements with class link and element with id top-link,[object Object],13,[object Object],h1 {font-face: Verdana},[object Object],#element_id {color:#FF0000},[object Object],.class_name {border: 1px solid red},[object Object],h1, .link, #top-link {font-weight: bold},[object Object]

Style Sheets Syntax (5),[object Object],Match relative to element placement:,[object Object],This will match all <a> tags that are inside of <p>,[object Object],* – universal selector:,[object Object],This will match all child nodes of <p> tag,[object Object],+ selector – used to match “the following” tag:,[object Object], This will match all elements with class name link that appear immediately after <img> tag,[object Object],14,[object Object],p a {text-decoration: underline},[object Object],p * {color: black},[object Object],img + .link {float:right},[object Object]

Style Sheets Syntax (5),[object Object],> selector – matches direct child nodes of element:,[object Object], This will match all elements with class error, direct children of <p> tag,[object Object],[] – match tag attributes by regular expression:,[object Object],This will match all <img> tags with alt attribute containing the word logo,[object Object],There are more rules to select attributes,[object Object],Not well supported in all browsers,[object Object],15,[object Object],p > .error {font-size: 8px},[object Object],img[alt~=logo] {border: none},[object Object]

Default Browser Styles,[object Object],Browsers have default CSS styles,[object Object],Used when there is no CSS information or any other style information in the document,[object Object],Silently inherited in all documents,[object Object],Caution: default styles differ in browsers,[object Object],E.g. Firefox default page background is white, while IE7 uses about 5% gray background,[object Object],16,[object Object]

Linking HTML and CSS,[object Object],HTML (content) and CSS (presentation) can be linked in three ways:,[object Object],Inline: the CSS rules in the style attribute,[object Object],No selectors are needed,[object Object],Embedded: in the HTML in <style> tag,[object Object],External: CSS rules are in separate file ,[object Object],Usually a file with .css extension,[object Object],Linked via <linkrel="stylesheet"href=…>tag or @import directive in embedded CSS block,[object Object],17,[object Object]

Linking HTML and CSS (2),[object Object],Inline styles have highest priority,[object Object],Then are the embedded styles,[object Object],External styles are last,[object Object],Using external files is highly recommended,[object Object],Simplify the HTML document ,[object Object],Benefit from browser's cache,[object Object],Inline styles are about to be deprecated by the W3C,[object Object],18,[object Object]

Inline Styles,[object Object],Inline CSS styles,[object Object],Individual element’s style defined using styleattribute,[object Object],Contains only declaration, no selectors:,[object Object],Override any other styles,[object Object],Apply to all descendant elements,[object Object],Used for styles that are not needed anywhere else in the Web site,[object Object],19,[object Object],<p style="font-size:20pt; color: #0000FF">,[object Object]

Inline Styles: Example,[object Object],20,[object Object],inline-styles.html,[object Object],<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">,[object Object],<html xmlns="http://www.w3.org/1999/xhtml">,[object Object],<head>,[object Object], <title>Inline Styles</title>,[object Object],</head>,[object Object],<body>,[object Object], <p>Here is some text</p>,[object Object],,[object Object], <p style="font-size: 20pt">Here is some,[object Object], more text</p>,[object Object], <p style="font-size: 20pt;color:,[object Object], #0000FF" >Even more text</p> ,[object Object],</body>,[object Object],</html>,[object Object]

Inline Styles: Example,[object Object],21,[object Object],inline-styles.html,[object Object],<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">,[object Object],<html xmlns="http://www.w3.org/1999/xhtml">,[object Object],<head>,[object Object], <title>Inline Styles</title>,[object Object],</head>,[object Object],<body>,[object Object], <p>Here is some text</p>,[object Object],,[object Object], <p style="font-size: 20pt">Here is some,[object Object], more text</p>,[object Object], <p style="font-size: 20pt;color:,[object Object], #0000FF" >Even more text</p> ,[object Object],</body>,[object Object],</html>,[object Object]

CSS Rules Precedence,[object Object],Inline CSS rules have precedence over the external CSS rules:,[object Object],22,[object Object],precedence.html,[object Object],<!DOCTYPE html …>,[object Object],<html xmlns="http://www.w3.org/1999/xhtml" >,[object Object],<head>,[object Object], <title>CSS Rules Precedence - Example</title>,[object Object], <style type="text/css"> span {color:red} </style>,[object Object], <link type="text/css" rel="stylesheet" href="" />,[object Object],</head>,[object Object],<body>,[object Object], <span>Some text</span>,[object Object], <span style="color:Blue">Some text</span>,[object Object],</body>,[object Object],</html>,[object Object]

CSS Rules Precedence,[object Object],Inline CSS rules have precedence over the external CSS rules:,[object Object],23,[object Object],precedence.html,[object Object],<!DOCTYPE html …>,[object Object],<html xmlns="http://www.w3.org/1999/xhtml" >,[object Object],<head>,[object Object], <title>CSS Rules Precedence - Example</title>,[object Object], <style type="text/css"> span {color:red} </style>,[object Object], <link type="text/css" rel="stylesheet" href="" />,[object Object],</head>,[object Object],<body>,[object Object], <span>Some text</span>,[object Object], <span style="color:Blue">Some text</span>,[object Object],</body>,[object Object],</html>,[object Object]

Embedded Styles,[object Object],Embedded in the HTML in the <style> tag:,[object Object],The <style> tag is placed in the <head> section of the document,[object Object],Styles apply to the whole document,[object Object],type attribute specifies the MIME type,[object Object],MIME is a describes the format of the content,[object Object],Other MIME types include text/html, image/gif, text/javascript …,[object Object],Used for document-specific styles,[object Object],24,[object Object],<style type="text/css">,[object Object]

Embedded Styles: Example,[object Object],25,[object Object],embedded-stylesheets.html,[object Object],<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,[object Object],<html xmlns="http://www.w3.org/1999/xhtml">,[object Object],<head>,[object Object], <title>Style Sheets</title>,[object Object], <style type="text/css">,[object Object], em {background-color:#8000FF; color:white},[object Object], h1 {font-family:Arial, sans-serif},[object Object], p {font-size:18pt},[object Object], .blue {color:blue},[object Object], </style>,[object Object],<head>,[object Object]

Embedded Styles: Example (2),[object Object],26,[object Object],…,[object Object],<body>,[object Object], <h1 class="blue">A Heading</h1>,[object Object], <p>Here is some text. Here is some text. Here,[object Object], is some text. Here is some text. Here is some,[object Object], text.</p> ,[object Object], <h1>Another Heading</h1> ,[object Object], <p class="blue">Here is some more text.,[object Object], Here is some more text.</p>,[object Object], <p class="blue">Here is some <em>more</em>,[object Object], text. Here is some more text.</p> ,[object Object],</body>,[object Object],</html>,[object Object]

…,[object Object],<body>,[object Object], <h1 class="blue">A Heading</h1>,[object Object], <p>Here is some text. Here is some text. Here,[object Object], is some text. Here is some text. Here is some,[object Object], text.</p> ,[object Object], <h1>Another Heading</h1> ,[object Object], <p class="blue">Here is some more text.,[object Object], Here is some more text.</p>,[object Object], <p class="blue">Here is some <em>more</em>,[object Object], text. Here is some more text.</p> ,[object Object],</body>,[object Object],</html>,[object Object],Embedded Styles: Example (3),[object Object],27,[object Object]

External CSS Styles,[object Object],External linking,[object Object],Separate pages can all use shared style sheet,[object Object],Only modify a single file to change the styles across your entire Web site,[object Object],link tag (with rel attribute),[object Object],Specifies a relationship between current document and another document,[object Object],link element can stay only in the HTML header,[object Object],28,[object Object],<link rel="stylesheet" type="text/css",[object Object], href="styles.css">,[object Object]

External CSS Styles (2),[object Object],@import,[object Object],Another way to link external CSS files,[object Object],Example:,[object Object],Not all browsers recognize such rules,[object Object],You can specify this way browser-specific styles (IE6 ignores the @import),[object Object],29,[object Object],<style type="text/css">,[object Object], @import url(styles.css);,[object Object],</style>,[object Object]

External Styles: Example,[object Object],30,[object Object],styles.css,[object Object],/* CSS Document */,[object Object],a { text-decoration: none },[object Object],a:hover { text-decoration: underline;,[object Object], color: red;,[object Object], background-color: #CCFFCC },[object Object],li em { color: red; ,[object Object], font-weight: bold },[object Object],ul { margin-left: 2cm },[object Object],ul ul { text-decoration: underline; ,[object Object], margin-left: .5cm },[object Object]

External Styles: Example (2),[object Object],31,[object Object],external-styles.html,[object Object],<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ,[object Object], Transitional//EN" ,[object Object], "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,[object Object],<html xmlns="http://www.w3.org/1999/xhtml">,[object Object],<head>,[object Object], <title>Importing style sheets</title>,[object Object], <link type="text/css" rel="stylesheet",[object Object], href="styles.css" />,[object Object],</head>,[object Object],<body>,[object Object], <h1>Shopping list for <em>Monday</em>:</h1>,[object Object], <li>Milk</li>,[object Object], …,[object Object]

External Styles: Example (3),[object Object],32,[object Object], …,[object Object], <li>Bread,[object Object], <ul>,[object Object], <li>White bread</li>,[object Object], <li>Rye bread</li>,[object Object], <li>Whole wheat bread</li>,[object Object], </ul>,[object Object], </li>,[object Object], <li>Rice</li>,[object Object], <li>Potatoes</li>,[object Object], <li>Pizza <em>with mushrooms</em></li>,[object Object],</ul>,[object Object],<a href="http://food.com" title="grocery,[object Object], store">Go to the Grocery store</a>,[object Object],</body>,[object Object],</html>,[object Object]

…,[object Object], <li>Bread,[object Object], <ul>,[object Object], <li>White bread</li>,[object Object], <li>Rye bread</li>,[object Object], <li>Whole wheat bread</li>,[object Object], </ul>,[object Object], </li>,[object Object], <li>Rice</li>,[object Object], <li>Potatoes</li>,[object Object], <li>Pizza <em>with mushrooms</em></li>,[object Object],</ul>,[object Object],<a href="http://food.com" title="grocery,[object Object], store">Go to the Grocery store</a>,[object Object],</body>,[object Object],</html>,[object Object],External Styles: Example (4),[object Object],33,[object Object]

Values in the CSS Rules,[object Object],Colors are specified in RGB format, in hex form: ,[object Object],Example: #A0A6AA,[object Object],Predefined color aliases exist: black, blue, etc.,[object Object],Numeric values are specified in:,[object Object],Pixels, e.g. 12px,[object Object],Points, e.g. 10pt,[object Object],Inches, centimeters, millimeters,[object Object],E.g. 1in, 1cm, 1mm,[object Object],Percentages, e.g. 50%,[object Object],Percentage is relative to the parent element,[object Object],34,[object Object]

CSS Rules for Fonts,[object Object],color – specifies the color of the text,[object Object],font-size – size of font: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger or numeric value,[object Object],font-family – comma separated font names,[object Object],Example: Verdana, Sans-Serif, etc. ,[object Object],The browser loads the first one that is available,[object Object],There should always be at least one serif font,[object Object],font-weight –normal, bold, bolder, lighter or number in range [100…900],[object Object],35,[object Object]

CSS Rules for Fonts (2),[object Object],font-style – styles the font,[object Object],Values: normal, italic, oblique,[object Object],text-decoration – decorates the text,[object Object],Values: none, underline, line-trough, overline, blink,[object Object],text-align – defines the alignment of text or other content,[object Object],Values: left, right, center, justify,[object Object],36,[object Object]

Short Font Rules,[object Object],font,[object Object],Shorthand rule for setting multiple font properties at the same time,[object Object], is equal to writing this:,[object Object],37,[object Object],font: italic normal bold 12px Verdana;,[object Object],font-style: italic;,[object Object],font-variant: normal;,[object Object],font-weight: bold;,[object Object],font-size:12px;,[object Object],font-family: Verdana;,[object Object]

Fonts,[object Object],Live Demo,[object Object],font-rules.html,[object Object]

Background CSS Rules,[object Object],background-color,[object Object],Solid color background,[object Object],background-image,[object Object],URL of image to be used as background, e.g.:,[object Object],background-repeat,[object Object],repeat-x, repeat-y, repeat, no-repeat,[object Object],background-attachment,[object Object],fixed / scroll,[object Object],39,[object Object],background-image:url("back.gif");,[object Object]

Background CSS Rules (2),[object Object],background-position: specifies vertical and horizontal position of the background image,[object Object],Vertical position: top, center, bottom,[object Object],Horizontal position: left, center, right,[object Object],Both can be specified in percentage or other numerical values,[object Object],Examples:,[object Object],40,[object Object],background-position: top left;,[object Object],background-position: -5px 50%;,[object Object]

Background Short Rule,[object Object],background: shorthand rule for setting background properties at the same time:,[object Object], is equal to writing:,[object Object],Some browsers will not apply BOTH color and image for background if using shorthand rule,[object Object],41,[object Object],background: #FFF0C0 url("back.gif") no-repeat fixed top;,[object Object],background-color: #FFF0C0;,[object Object],background-image: url("back.gif");,[object Object],background-repeat: no-repeat;,[object Object],background-attachment: fixed;,[object Object],background-position: top;,[object Object]

Background-image or <img>?,[object Object],Background images allow you to save many image tags from the HTML ,[object Object],Leads to less code,[object Object],More content-oriented approach,[object Object],All images that are not part of the page content should be moved to the CSS,[object Object],42,[object Object]

Background Styles,[object Object],Live Demo,[object Object],background-rules.html,[object Object]

Border CSS Rules,[object Object],border-width: thin, medium, thick or numerical value (e.g. 10px),[object Object],border-color: color alias or RGB value,[object Object],border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset,[object Object],Each property can be defined separately for left, top, bottom and right,[object Object],border-top-style, border-left-color, …,[object Object],44,[object Object]

Border Short Rules,[object Object],border: shorthand rule for setting border properties at once:,[object Object], is equal to writing:,[object Object],Specify different borders for the sides via shorthand rules: border-top, border-left, border-right, border-bottom,[object Object],45,[object Object],border: 1px solid red;,[object Object],border-width:1px;,[object Object],border-color:red;,[object Object],border-style:solid;,[object Object]

Borders,[object Object],Live Demo,[object Object],border-rules.html,[object Object]

Width, Height CSS Rules,[object Object],width – defines numerical value for the width of element, e.g. 200px,[object Object],height – defines numerical value for the height of element, e.g. 100px,[object Object],Important: not all elements and browsers follow this value!,[object Object],Usually the height of an element is defined by its content,[object Object],Common mistake is to apply height to tables or table cells,[object Object],47,[object Object]

Width / Height,[object Object],Live Demo,[object Object],size-rules.html,[object Object]

Margin and Padding,[object Object],margin and padding define the spacing around the element,[object Object],Numerical value, e.g. 10px or -5px,[object Object],Can be defined for each of the four sides separately,[object Object],margin-top, padding-left, …,[object Object],margin is the spacing outside of the border,[object Object],padding is the spacing between the border and the content,[object Object],49,[object Object]

Margin and Padding: Short Rules,[object Object],margin: 5px;,[object Object],Sets all four sides to have margin of 5 px;,[object Object],margin: 10px 20px;,[object Object],Sets margins: top and bottom to 10px, left and right to 20px;,[object Object],margin: 1px 3px 5px 7px;,[object Object],Sets top, right, bottom, left margins to 1px, 3px, 5px and 7px respectively,[object Object],Same shorthand rules apply for padding,[object Object],50,[object Object]

The Box Model,[object Object],51,[object Object]

Gecko and W3C vs. IE,[object Object],Major difference between browsers when applying border, padding and width/height,[object Object],To avoid you need either “CSS hacks” or just don’t specify for the same element width/height and padding or border, different than 0,[object Object],52,[object Object]

Margins and Paddings,[object Object],Live Demo,[object Object],margins-paddings-rules.html,[object Object]

CSS Rules for Positioning,[object Object],position: defines the positioning of the element, depending on the parent elements,[object Object], The value is one of:,[object Object],static (default),[object Object],relative – relative position according to where the element would appear with static position,[object Object],absolute – position according the parent element,[object Object],fixed – fix element on screen, ignore page scrolling,[object Object],54,[object Object]

CSS Rules for Positioning (2),[object Object],Fixed and absolute positioned elements “float” over the rest of elements,[object Object],Moved to separate document layer,[object Object],Their position and size is ignored when calculating the size of parent element or position of surrounding elements,[object Object],Ordered by their z-index,[object Object],55,[object Object]

Positioning,[object Object],Live Demo,[object Object],positioning-rules.html,[object Object]

CSS Rules for Positioning,[object Object],top, left, bottom, right: specifies offset of absolute/fixed/relative positioned element as numerical values,[object Object],vertical-align: sets the vertical-alignment of an element,[object Object],Usually used for table cells,[object Object],Values: baseline, sub, super, top, text-top, middle, bottom, text-bottom or numeric,[object Object],z-index: specifies the depth-order of element,[object Object],57,[object Object]

Alignment and Z-Index,[object Object],Live Demo,[object Object],alignments-and-z-index-rules.html,[object Object]

Float CSS Rule,[object Object],float: the element “floats” above the elements,[object Object],similar to position:absolute and the align HTML property of <img> tag ,[object Object],element is taken into account when rendering the surrounding text and elements,[object Object],left: places the element on the left,[object Object],right: places the element on the right,[object Object],59,[object Object]

Clear CSS Rule,[object Object],clear,[object Object],Sets the sides of the element where other floating elements are NOT allowed,[object Object],Possible values: left, right, both,[object Object],This rule can be applied only to “floating” elements,[object Object],60,[object Object]

Floating Elements,[object Object],Live Demo,[object Object],float-rules.html,[object Object]

Opacity CSS Rule,[object Object],opacity: specifies the opacity of the element,[object Object],Floating point number from 0 to 1,[object Object],Supported only by Safari browser ,[object Object],For Mozilla use –moz-opacity CSS rule,[object Object],For IE use filter:alpha(opacity=value) where value is from 0 to 100,[object Object],Need to apply all three rules,[object Object],62,[object Object]

Opacity,[object Object],Live Demo,[object Object],opacity-rule.html,[object Object]

Visibility CSS Rule,[object Object],visibility,[object Object],Determines whether the element is visible,[object Object],hidden: element is not rendered, but still takes place in the rendering (acts like opacity:0),[object Object],visible: element is rendered normally,[object Object],64,[object Object]

Visibility,[object Object],Live Demo,[object Object],visibility-rule.html,[object Object]

Display CSS Rule,[object Object],display: controls the display of the element and the way it is rendered and if breaks should be placed before and after the element,[object Object],inline: no breaks are placed before and after (<span> is inline element),[object Object],block: breaks are placed before AND after the element (<div> is block element),[object Object],66,[object Object]

Display CSS Rule (2),[object Object],none: element is hidden and its dimensions are not used to calculate the surrounding elements rendering (differs from visibility:hidden!),[object Object],There are some more possible values, but not all browsers support them,[object Object],Specific displays like table-cell and table-row,[object Object],67,[object Object]

Display,[object Object],Live Demo,[object Object],display-rule.html,[object Object]

Overflow CSS Rule,[object Object],overflow: defines the behavior of element when content needs more space than you have specified by the size properties or for other reasons. Values: ,[object Object],visible (default) – element size is increased to make space for content or the content “overflows” out of the element,[object Object],scroll – show horizontal/vertical scroll bar in the element,[object Object],hidden – any content in the element that cannot be placed inside is hidden,[object Object],69,[object Object]

Overflow,[object Object],Live Demo,[object Object],overflow-rule.html,[object Object]

Other CSS Rules,[object Object],cursor: specifies the look of the mouse cursor when placed over the element,[object Object], Values: crosshair, help, pointer, progress, move, hair, col-resize, row-resize, text, wait, copy, drop, and others,[object Object],white-space – controls the line breaking of text. Value is one of:,[object Object],nowrap – keeps the text on one line,[object Object],normal (default) – browser decides whether to brake the lines if needed,[object Object],71,[object Object]

Benefits of using CSS,[object Object],More powerful formatting than using presentation tags,[object Object],Your pages load faster, because browsers cache the .css files,[object Object],Increased accessibility, because rules can be defined according given media,[object Object],Pages are easier to maintain and update,[object Object],72,[object Object]

Maintenance Example,[object Object],73,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],one CSS file,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object],Title,[object Object],Some random text here. You can’t read it anyway! Harharhar! Use Css.,[object Object]

What to Avoid,[object Object],Don’t use <font> or other presentation tags to change the look of your text,[object Object],<font color=...>,[object Object],<b>text that is bold,[object Object],<center> this text is centered,[object Object],Do not use complex CSS rules-sets because may slow down page rendering,[object Object],Move as much as possible to external files,[object Object],Avoid inline CSS,[object Object],74,[object Object]

CSS

CSS

Recommended

More Related Content

What's hot

What's hot(20)

Similar to CSS

Similar to CSS(20)

More from BG Java EE Course

More from BG Java EE Course (20)

Recently uploaded

Recently uploaded(20)

CSS