Css3

*CSS3 {display: magic;}

© Liam McMurray - Web Services, University of Bath

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...

tag
h1 {color:yellow;}

I'm Yellow!


Selectors in CSS 1

tag
h1 {color:yellow;}

I'm Yellow!

using selectors
h1.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 heading
Some paragraph text that occurs after the <h3> within the <p> tag.

the asterisk (*) combinator
p * 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 selectors
img [border] {margin: 0;}
img [src="printlogo.gif"] {display: none;}


Selectors in CSS 2

child combinators
ul 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 selectors
p: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 combinator
h4 + 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


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 Model
Lists module
Hyperlink Presentation
Speech Module
Backgrounds and Borders
Text Effects
Multi-Column Layout
The W3C keep a full list of what they are working on here: 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-count
column-width
column-gap
column-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 Vestibulum hendrerit pellentesque
adipiscing elit. Ut eleifend magna eget quam. Phasellus mi diam, interdum sit
quam. Praesent imperdiet. Vestibulum amet, aliquam quis, egestas at,
tincidunt. Vestibulum pharetra tempus neque.
tortor. Suspendisse sed erat.
Aliquam gravida purus vel mi. Integer Praesent imperdiet. Vestibulum
fermentum nunc tempus tellus. Ut tincidunt. Vestibulum pharetra tempus
rhoncus, purus sit amet feugiat aliquet, tortor. Suspendisse sed erat.
nisi risus tincidunt velit, ac sollicitudin Aliquam gravida purus vel mi.
lectus augue at nisi.

A javascript way of acheiving this has been available for a number of years:
http://www.alistapart.com/articles/css3multicolumn


CSS 3

Making it all work - now

Support for CSS3 is incomplete - however the approach of
releasing 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


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 user
experience 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 that
take 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

Recommended

Recommended

More Related Content

Similar to Css3

Similar to Css3 (20)

Recently uploaded

Recently uploaded (20)

Css3