Web Development Basics Lecture 3 – CSS 2
Introduction CSS stands for Cascading Style Sheets. Used to describe the presentation (the look and formatting) of markup language documents Mostly used with HTML / XHTML. But can also be applied to XML (SVG, XUL). Separate the content from the presentation of documents. E.g. layout, colors, fonts, etc. W3C standard.
Introduction Why separating content and presentation? Improve content accessibility. Enable multiple pages to share the same formatting (change in one place, all the pages are updated). Provide more flexibility and control on the presentation. Reduce complexity and repetition in the structural content (tableless web design).
Introduction CSS allow the same page to be presented in different styles for different rendering methods: On-screen In print By voice (by a speech-based browser or screen reader) Braille-based (tactile devices)
History CSS 1 (no longer maintained) First official W3C Recommendation, December 1996. But first browser full support in March 2000. Font properties (e.g. emphasis) Color of text, backgrounds, and other elements Text attributes (e.g. spacing between words and letters) Alignment of text, images, tables and other elements Margin, border, padding, and positioning for most elements Unique identification and generic classification of groups of attributes http://en.wikipedia.org/wiki/Css#Variations
History CSS 2 - May 1998 (still maintain) includes a number of new capabilities like absolute, relative, and fixed positioning of elements and z-index, the concept of media types, bidirectional text and new font properties such as shadows. CSS 2.1 – (June 2005 - July 2007 – June 2011) fixes errors in CSS2, removes poorly-supported features and adds already-implemented browser extensions to the specification. Acceptable browser implementation by 2009.
History CSS 3 (started in 2005) Under development in parallel to HTML 5 Some modules already standard Lot of new capabilities like: border (radius, color, image, shadow), text effect (shadow, overflow, word-wrap), multiple background, color opacity, box resizing, rotation, multi-column layout, etc. Attribute selectors Media queries Web fonts Speech Animations http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29#CSS_version_support http://www.css3.info/preview/
Cascading CSS specifies which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.
Cascading inline styles in which styles are added to each tag within the HTML file. The style affects that particular tag but does not affect other tags in the document. embedded or global styles applied to an entire HTML file. allowing the Web designer to modify the appearance of any tag in the document. linked or external style sheets in an external file and linked with every pages allowing the Web designer to modify the appearance of tags in several documents The style can be override by the end user (e.g. with a predefine style in the browser).
Insert CSS Inline Internal style attribute E.g. <p style="color: green; border: 1px solid;"> Internal <style> tag in the <head> section E.g. <head> <style type="text/css"> /* this is a comment */ hr {color: red;} body {background-image: url("img/back.gif");} </style> </head>
Insert CSS External <link> tag in the <head> section E.g. <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> Then in the mystyle.css file use the same syntax as with the <style> tag. CSS file is a text file (like for html) with a .css extension. hr {color: red;} body {background-image: url("img/back.gif");}
Font font-family font-style font-weight font-variant body {font-family: Arial, Helvetica, sans-serif;} font-style normal, italic, oblique p {font-style: italic;} font-weight normal, bold, bolder, lighter, 100 to 900 (400 is the same as normal, and 700 the same as bold) h1 {font-weight: bold;} font-variant normal (default), small-caps h2 {font-variant: small-caps;} http://www.w3.org/TR/CSS2/fonts.html
Font font-size Font sizes can be expressed: as a unit of length h3 {font-size: 25px;} as a percentage of the parent element p {font-size: 75%;} Absolute (xx-small, x-small, small, medium, large, x-large, xx-large) or relative (larger, smaller) keyword li {font-size: x-small;} If you choose to express size as a unit of length, you can use absolute units or relative units.
Font absolute units define the font size based on one of the following standard units of measurement: mm (millimeter), cm (centimeter), in (inch), pt (point), pc (pica), px (pixel). use a relative unit, which expresses the font size relative to a size of a standard character. the em unit is equal to the width of the capital letter “M” in the browser’s default font size the ex unit is equal to the height of a small “x” in the default font In both case, you can use fractional values.
Font The em unit is more useful for page design, because 1 em is equal to the browser’s default font size for body text. This is true no matter what font is being used (unlike the ex unit, whose size changes based on the font face being used).
Text color Like html, can take a name (e.g. blue) or hexadecimal value (e.g. #ff3300) or short hexadecimal value (e.g. #f30) Can also use rgb, then all values from 0 to 255. body {color: rgb(150,0,255);} text-decoration none, underline, overline, line-through, (blink) h1 {text-decoration: underline;} text-indent p {text-indent: 50px;} http://www.w3.org/TR/CSS2/text.html
Text text-align left, right, center, justify vertical-align h3 {text-align: center;} vertical-align baseline, sub, super, top, text-top, middle, bottom, text-bottom, (length, %) img {vertical-align: text-bottom;} text-transform none, capitalize, uppercase, lowercase li {text-transform: uppercase;}
Text line-height (normal, (length, number, %))
Text direction ltr, rtl letter-spacing normal, length white-space normal, pre, nowrap, pre-line, pre-wrap word-spacing And more…
Background background-color background-image background-position body {background-color: green;} background-image h1 {background-image: url('img/myBg.gif');} background-position [left, right, center] combine with [top, center, bottom] h2 {background-position: right bottom;} background-attachment scroll, fixed h3 {background-attachment: fixed;} http://www.w3.org/TR/CSS2/colors.html
Background background-repeat repeat, repeat-x, repeat-y, no-repeat background-repeat: repeat-x background-repeat: repeat-y background-repeat: no-repeat
Background Fixed background images are often used to create the impression of a watermark. a watermark is a term that refers to a translucent graphic impressed into the very fabric of the paper and used in specialized stationery If you use a background image that employs a transparent color, you can combine the background-color and background-image attributes to create a new image. for example, the style: displays logo.gif on the background, and anywhere that a transparent color appears in the logo the background color yellow will shine through http://meyerweb.com/eric/css/edge/complexspiral/glassy.html body {background-color: yellow; background-image: url('logo.gif');}
List list-style-type <ul> none, disc (default), circle, square <ol> armenian, decimal (default), decimal- leading-zero (01, 02,…), georgian (an, ban,…), lower-latin = lower-alpha (a, b,…), lower-greek (α, β,…), lower-roman (i, ii,…), upper-latin = upper-alpha (A, B,…), upper-roman (I, II,…) ul {list-style-type: square;} ol {list-style-type: upper-roman;} list-style-image ul {list-style-image: url('apple.jpg');} http://www.w3.org/TR/CSS2/generate.html#lists
List list-style-position inside, outside list-style-position: inside list-style-position: outside
List
Pseudo-classes The links, like any other element, can be styled with any properties. E.g. a {text-decoration: none;} Pseudo-classes are used to add special effects to some selectors Syntax is selector:pseudo-class {property:value;} :active, :first-child, :focus, :hover, :lang, :link, :visited http://www.w3.org/TR/CSS2/selector.html
Pseudo-classes A hypertext link can be in one of four states: the link’s target has already been visited by the user the link’s target has never been visited by the user the link is currently being clicked by the user the user’s mouse pointer is hovering over the link Web browsers provide a visual clue for each of these states, such as a different color for visited links, and a different shape for the pointer when it is hovering over a link.
Pseudo-classes a {text-decoration: none;} a:link {color: #FF0000;} /* unvisited link */ a:visited {color: #00FF00;} /* visited link */ a:hover {color: #FF00FF;} /* mouse over */ a:active {color: #0000FF;} /* selected */ a:hover MUST come after a:link and a:visited a:active MUST come after a:hover :link and :visited are specific to anchor <a>. The others pseudo-classes can apply to any elements.
Pseudo-classes Rollover effect
Pseudo-elements CSS pseudo-elements are used to add special effects to some selectors. selector:pseudo-element {property:value;} :after, :before, :first-letter, :first-line p:first-letter {color: #ff00ff; font-weight: bold;} h1:before {content: url(apple.jpg);} The content property works only with :after and :before pseudo-elements. Its value can be <string>, <uri>, <counter>, attr(<identifier>), open-quote, close-quote, no-open-quote, no-close-quote. The counter() is controlled with two properties, 'counter-increment' and 'counter-reset'. http://www.w3.org/TR/CSS2/generate.html
Class You can create customized classes by adding the class attribute to HTML tags. The syntax for creating a class is: <tag class="class_name"> tag is the HTML tag class_name is the name of the class In the CSS, you can then create a style for your custom class Syntax is the name of the class preceded by a dot "." .class_name {color: red;}
Class E.g. In CSS: .red-col {color: red;} In HTML: <p class="red-col">red paragraph</p> <h1 class="red-col">Red title</h1>
id Closely related to the class attribute is the id attribute, which applies an id to a specific element in the document. The id attribute must be unique; there can not be more than one tag with the same id value. The syntax for creating an id is: <tag id="id_name"> tag is the HTML tag id_name is an id name assigned to the tag
id You can then use the id in CSS Syntax is the name of the id preceded by a hash "#" #myId {text-align: center;} In HTML: <p id="myId">This text is center</p> The class and id attribute are useful HTML features to use with CSS to define styles for specific content without using inline styles. (They are also used with JavaScript).
Grouping If many elements shared the same style properties, we can group them. Instead of having: p {color: blue;} h1 {color: blue; text-decoration: underline;} h2 {color: blue;} We can group them together, separate with comma "," p, h1, h2 {color: blue;} h1 {text-decoration: underline;}
HTML Container Elements HTML supports two types of container types: the <span> tag, which is used to contain inline elements such as individual letters, words, phrases, or inline images the <div> tag, which is used to group blocks of text such as paragraphs, block quotes, headings, or lists. Collectively, these text blocks are known as block-level elements
HTML Container Elements This figure shows an example in which a heading and a paragraph have been enclosed in a <div> container. The <div> tag does not actually format the block-level elements; it merely groups them as a unit. For this reason, the <div> tag always includes either a class or id attribute that identifies that group.
HTML Container Elements This figure shows an example of how the <span> tag can be used to format a selection of text within a paragraph. A <div> tag is used to format the entire paragraph. You almost always include an id or class attribute with the <span> tag.
Block-Level Element Boxes With CSS, you can control the layout of a Web page by manipulating the size and location of block-level elements. CSS treats all block-level elements as a group. HTML tags that can be treated as block-level elements are: <h1> - <h6>, <p>, <blockquote> and <address> tags <ul>, <ol> and <dl> list tags <li>, <dt> or <dd> tags (individual list items) <div>, <body>, <hr>, <img> tag <table>, <tr>, <th>, <td> tags http://www.w3.org/TR/CSS2/box.html
Block-Level Element Boxes There are three elements: margin between the box and the parent element border of the box padding, which is the space between the box around the block-level element and the border CSS provides attributes you can use to control the appearance and behavior of each of these elements.
Block-Level Element Boxes
Block-Level Element Boxes border-style border-XXX-style, where XXX = [left, top, right, bottom] none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-width border-XXX-width, where XXX = [left, top, right, bottom] thin, medium, thick, (length) p {border-style: solid; border-width: medium;}
Block-Level Element Boxes border-color border-XXX-color, where XXX = [left, top, right, bottom] The outline define the border outside the margin outline-color outline-style Same values as border-style outline-width Same values as border-width p {outline: green dotted thick;}
Block-Level Element Boxes margin margin-left, margin-top, margin-bottom, margin-right auto (depends on the browser), length, % padding padding-left, padding-top, padding-bottom, padding-right Length, % p {margin-right: 50px; padding-top: 25px;}
Positioning - float The float attribute works like the align="left" or align="right" attributes used with the <img> tags. This attribute places the block-level element on the left or right margin of the parent element img {float: right;} left, right, both, none http://www.w3.org/TR/CSS2/visuren.html
Positioning - float This figure shows that when a browser encounters the float attribute, it moves the element over to whatever margin the Web author has specified and then brings the next block-level element up. The text in that element is wrapped around the floating element.
Positioning - clear Prevent other elements from wrapping around the floating element by adding the clear attribute to the element below the floating element. When the value of the clear attribute is set to “right,” the browser displays the element on the page at the point where the right margin is clear. Other possible values for the clear attribute are “left” and “both” (for both margins).
Positioning - Dimension and position static, absolute, relative or fixed height, width specifies the content height (resp. width) of boxes. Length, % max-height, min-height constrain box heights to a certain range. max-width, min-width constrain box widths to a certain range. p {max-height: 50px; width: 120px; background: blue;} http://www.w3.org/TR/CSS2/visudet.html
Positioning - z-index, visibility visible (default), hidden (the element is not show, but still take the space), collapse (only for table. Remove a row or a column). z-index auto, value (can be negative) works on positioned boxes. img {position: absolute; left: 0px; top: 0px; z-index: -1;} The image in the HTML page will be under the text
Positioning - offsets An element is said to be positioned if its position property has a value other than static. top Length, % right bottom left
Positioning - Visual effects overflow specifies what to do if the content of an element exceeds the size of the element's box. visible (default), hidden, scroll div {width: 50px; height: 50px; overflow: scroll;} <div>A long long long long long long long text.</div> clip A clipping region defines what portion of an element box is visible. img {position: absolute; clip: rect(40px,60px,100px,0px);} <img src="pic.gif" width="100" height="140"> http://www.w3.org/TR/CSS2/visufx.html
Positioning - display display inline, block, list-item, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption p {display: inline} <p>Two paragraph</p> <p>that come on the same line?</p> http://www.w3.org/TR/CSS2/visuren.html#propdef-display
Table caption-side empty-cells table-layout border-collapse top, bottom caption {caption-side: bottom;} empty-cells hide, show table-layout auto (default), fixed border-collapse collapse, separate (default) border-spacing length, length length table {border-spacing: 25px 10px;} http://www.w3.org/TR/CSS2/tables.html
Cursor cursor <uri>, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, progress :link, :visited { cursor: url(curs.svg#linkcursor), url(hyper.cur), pointer; } http://www.w3.org/TR/CSS2/ui.html#propdef-cursor
Sources http://www.w3.org/TR/CSS2/ http://www.w3.org/TR/CSS2/propidx.html http://w3schools.com/css/default.asp http://en.wikipedia.org/wiki/Css http://en.wikipedia.org/wiki/Comparison_of_layo ut_engines_%28CSS%29#CSS_version_support