Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Introduction to CSS

CSS and the future of CSS3
by

firanah anuar

on 2 September 2010

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Introduction to CSS

CSS Cascading Style Sheets What is CSS? CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
CSS ID & CLASS
The id selector is used to specify a style for a single, unique element.
Example #main
{
text-align:center;
color:red;
}
**Do NOT start an ID name with a number! It will not work in Mozilla/Firefox. eg. #2box The class Selector . .center {text-align:center;} 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 any HTML elements with the same class.
The id Selector # Three Ways to Insert CSS 1. External Style Sheet <head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

or

@import url(../style.css);
2. Internal Style Sheet <head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
3. Inline Styles <p style="color:sienna;margin-left:20px">This is a paragraph.</p> Multiple Styles Will
Cascade into One The highest priority: Inline style (inside an HTML element)
Internal style sheet (in the head section)
External style sheet
Browser default
If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet! <head>
<style type="text/css">
hr {color:#777777;}
p {margin-left:20px;}
</style>

<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
The CSS Box Model Individual sides
Borders, margins, paddings
Example p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

Or
border-style:dotted solid;

Or
border-style: dotted solid double dashed;

Or
margin:25px 50px 75px 100px;
TRouBLe Top Right Bottom Left border-style: dotted solid double dashed;

margin: 10px 20px 30px 40px; CSS
Positioning Static Positioning Fixed Positioning An element with fixed position is positioned relative to the browser window.
It will not move even if the window is scrolled.
Example : #box
{
position:fixed;
top:30px;
right:5px;
}
Relative Positioning #header div#coming_soon {
background:transparent url(../images/coming_soon.png) repeat scroll 0 0;
float:left;
height:91px;
width:236px;
left:44%;
position:relative;
top:240px; SAMPLE: http://www.rouseapp.com Absolute Positioning Example : #top-logo
{
position:absolute;
left:100px;
top:150px;
}
when a position is absolute,
they can overlap other elements. The z-index property #top-logo
{
position:absolute;
left:0px;
top:0px;
z-index:2
}
The bigger z-index, the top the layer will go. SAMPLE: http://noslajugamosolocambiamos.org/ CSS Hacks <!--[if IE]>
do something
<![endif]-->


<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie_hacks.css" />
<![endif]-->
Design To The Next Level With CSS3 1. Open face fonts http://armitageonline.co.uk/ @font-face {
font-family:'Anivers';
src: url('/images/Anivers_Regular.otf') format('opentype');
}

h1 {
font-family: Anivers, Arial, Helvetica, sans-serif;
2. Border Image Allows an image file to be used as the border of an object. border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;
SAMPLE: http://ejohn.org/blog/border-image-in-firefox/ 3. Border Radius -moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
SAMPLE: http://www.the-art-of-web.com/css/border-radius/ 4. Transparency with Alpha value or opacity rule can be specified directly in the CSS background: rgba(200, 54, 54, 0.5);
color: rgba(200, 54, 54, 0.5); RGBA and Opacity red green blue alpha channel / transparency 5. Canvas 3D <html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
SAMPLE:
http://www.css3.info/webkit-announces-support-for-css-3d-transforms/
Full transcript