css3

*CSS3 {display: magic;}

© Liam McMurray - Web Services, University of Bath

http://blogs.bath.ac.uk/webservices/

CSS - an introduction

Simply put, a cascading style sheet is a file containing instructions on how to present the data it is linked with.



CSS - an introduction

Simply put, a cascading style sheet is a file containing instructions on how to present the data it is linked with.

A bit like an IKEA instruction manual that helps turn 18 pieces of wood, 20 screws and 32 dowels into a beautiful chest of drawers. Or a bed. Or a treehouse.



Selectors in CSS - an introduction

Selectors are the hooks that allow anything we define in the style sheet to be associated with something in the data we are trying to apply the CSS to.



Selectors in CSS 1

in the beginning... tagh1 {color:yellow;} I'm Yellow!



Selectors in CSS 1

tagh1 {color:yellow;} I'm Yellow! using selectorsh1.blue {color:blue;} I'm Yellow!I'm Blue!



Selectors in CSS 1

the descendant combinator p h3 {color:pink;} Some paragraph text that occurs after the <h3> within the <p> tag.

sub headingSome paragraph text that occurs after the <h3> within the <p> tag.

the asterisk (*) combinatorp * h3 {color:red;}(Each <h3> within any other tag that's within a <p> tag will be associated with this style)

...and that's it.



Selectors in CSS 2

using the universal selector*td {font-size:85%;}(targets all instances of specified tag)

using tag attributes as selectorsimg [border] {margin: 0;}img [src="printlogo.gif"] {display: none;}



Selectors in CSS 2

child combinatorsul li a {border-left: 1px solid #E69138;} | link | link | link

ul li:first-child {border-left: none;} link | link | link



Selectors in CSS 2

pseudo selectorsp:first-letter {font-size: 150%;} a:hover {background-color: red;}

This is a great presentation Used with XML tags: testimonial:before {content: "Quote: \"";}testimonial:after {content:", man\"";} Quote: "This presentation totally rocks, man"



Selectors in CSS 2

almost there! the child combinator.navigation > a {color: white;}(all instances of the <a> tag within defined selector are targeted)Yes, it is very similar in operation to the asterisk combinator

direct adjacent combinatorh4 + p {font-weight: bold;}(every paragraph that immediately follows a sub heading is rendered to the screen in bold)



Selectors in CSS 1 & 2

Compatibility... Everything I've shown you so far is fully supported by Internet Explorer 7*, Safari, Firefox, and Opera.

Internet Explorer 6 doesn't support the following selectors:[attribute] , >, +, :first-child, :first-letter, :hover, min-width, max-width * Except :before and :after, which IE8 will support. For more information on pattern matching (despite IE6 not supporting it), see:http://www.w3.org/TR/CSS21/selector.html#pattern-matching


http://www.w3.org/TR/CSS21/selector.html#pattern-matching


Selectors in CSS 1 & 2

Conclusion CSS 2 was a massive leap forward in terms of giving us the selectors with which to format data, however lack of browser support meant the uptake hasn't been as great as it should have been. Despite conditional commenting* allowing us to effectively take IE6 out of the equation...

*

CSS 3

Modules, baby.



Modules in CSS 3

Some examples of modules in development:

Updated Box ModelLists moduleHyperlink PresentationSpeech ModuleBackgrounds and BordersText EffectsMulti-Column Layout

The W3C keep a full list of what they are working on here: http://www.w3.org/Style/CSS/current-work


http://www.w3.org/Style/CSS/current-work


Back to selectors

Revisiting attributes. remember img [border] {margin: 0;}

consider the implications of:a[href$=".pdf"]a[href^="http://"]a normal link a link to a pdf file an external link



Back to selectors

Revisiting attributes. want all those images in the 'thumbs' folder to have a border?img [src*='thumbs'] {border: solid 1px black;}

bam.



CSS 3

Borders

.rounded {border-radius: 12px;}



CSS 3

Borders

.gradient {border-bottom-colors: #000000 #888888 #FFFFFF;border-top-colors: #000000 #888888 #FFFFFF;border-left-colors: #000000 #888888 #FFFFFF;border-right-colors: #000000 #888888 #FFFFF;}



CSS 3

Borders

.shadow {box-shadow: 10px 10px 5px #000;}



CSS 3

Borders

.image {border-image: url(border.png) 27 27 27 27 round round;}



CSS 3

Text Effects

.shadow {text-shadow: 2px 2px 2px #000;}



CSS 3

Text Effects - web fonts @font-face {font-family: 'Helvetica Neue 25 Ultra Thin';src: url('http://www.bath.ac.uk/fonts/hneue25.ttf');}



CSS 3

User Interface

textarea {resize: both;}(This will add a tab to your form field allowing the user to resize the input area by dragging with the mouse)

:target:enabled:disabled:checked(New pseudo-classes dealing particularly with the states of form elements)



CSS 3

Multiple columns - finally!

There are four properties which relate to the multiple column layout in CSS3, allowing you to set the number of columns, width, gap between each column and a border between each:

column-countcolumn-widthcolumn-gapcolumn-rule

Adding headers -h2 {column-span: all;}



CSS 3

Multiple columns

Header for text that spans across all the columns Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend magna eget quam. Praesent imperdiet. Vestibulum tincidunt. Vestibulum pharetra tempus tortor. Suspendisse sed erat.Aliquam gravida purus vel mi. Integer fermentum nunc tempus tellus. Ut rhoncus, purus sit amet feugiat aliquet, nisi risus tincidunt velit, ac sollicitudin lectus augue at nisi. A javascript way of acheiving this has been available for a number of years:http://www.alistapart.com/articles/css3multicolumn

Vestibulum hendrerit pellentesque quam. Phasellus mi diam, interdum sit amet, aliquam quis, egestas at, neque. Praesent imperdiet. Vestibulum tincidunt. Vestibulum pharetra tempus tortor. Suspendisse sed erat.Aliquam gravida purus vel mi.


http://www.alistapart.com/articles/css3multicolumn


CSS 3

Making it all work - now

Support for CSS3 is incomplete - however the approach ofreleasing it in modules means that every new iteration of a browser should be more compliant.

It's worth noting at this point that many of the example styles will only work with a prefix specific to the rendering engine:-o--khtml--moz--webkit-



CSS 3

And Internet Explorer? Well, version 8 will be fully compliant with CSS2.1 which was proposed in 2007. CSS2 was released in 1999.

The Beta 1 release failed to support between 25 and 30 defined selectors for CSS3.Maybe Internet Explorer 9 will be the one.



CSS 3

And Internet Explorer?

source: http://rakaz.nl/item/the_css_selector_test_and_ie_8_beta_1


http://rakaz.nl/item/the_css_selector_test_and_ie_8_beta_1


CSS 3

In Closing

Internet Explorer versions 6 & 7 still account for at least two thirds of the user agents employed to interact with the web.

Progressive enhancement allows us to serve up a better userexperience to those able to access it without breaking the service for those without compliant browsers.



CSS 3

In Closing

Design should not be compromised by browser limitations however, so we should endeavour to produce solutions thattake advantage of CSS3 without relying on it. Rounded edges for example - these need to be done with images wherever they are integral to the page layout.



css3

Design

university of bath

selectors img border

selectors h1

text effects web fonts

following selectors

ffffff border

pseudo selectors p

link link link ul li