Posted by livya on Apr 15, 2008 in Css Tips | Comments Off
Now you can play with the opacity of the selectors through css!
The values are from 100 (which is like no opacity) to 0 (which is like they are disappear)
-moz-opacity: is for mozilla
filter:alpha(opacity=??): is for exlporer
opacity: is for safari
example :
#header {
background: black;
-moz-opacity: 0.4;
filter:alpha(opacity=40);
opacity: 0.4;
}
Posted by livya on Apr 15, 2008 in Css Tips | Comments Off
Pseudo classes are for specifing a state or relation to the selector.
The most used are :
active -> is for a link when it is gains focus (= when it is clicked on)
visited -> is for a link that has already been visited
hover -> is for a link when the cursor is held over it
and there is also the class=”active” ->is for the link that it is clicked and it is active
example :
a {
color: purlpe;
}
a:active {
color: blue;
}
a:visited {
color: blue;
}
a:hover {
color: gray;
}
a.active {
color: black;
}
usually the color of the a, a:active and a:visited is the same, so it’s more right to write it like this :
a,
a:active,
a:visited {
color: purlpe;
}
a:hover {
color: gray;
}
a.active {
color: black;
}
Posted by livya on Apr 15, 2008 in Css Tips | Comments Off
Here you can specify properties to selectors within other selectors. So, you don’t have to add classes or id’s on every selector.
example :
in html language :
<div id=”content”>
<h1>Adipiscing elit</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur volutpat.
</p>
<p>
Nam pretium, est sed molestie congue, arcu elit fringilla est, placerat sodales sapien velit ut.
</p>
</div>
in css language :
#content {
background: lightgray;
padding: 1em 2em;
}
#content h1 {
font-family: Arial;
color: purple;
padding-bottom: 0.5em;
border-bottom: 1px solid purle;
}
#content p {
color: black;
}
Posted by livya on Apr 15, 2008 in Css Tips | Comments Off
If you have the same properties in many selectors, you can write them only once, and use commas (,) to separate them.
example :
if you have this :
h1 {
color: white;
background: gray;
}
p.lead {
color: white;
background: gray;
}
ul {
color: white;
background: gray;
}
you can write it like this :
h1,
p.lead,
ul {
color: white;
background: gray;
}
Posted by livya on Apr 15, 2008 in Css Tips | Comments Off
For the class selector we use a full stop (.) and for the id selector a hash character (#).
example :
in html language :
<div id=”content”>
<p class=”lead”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur volutpat.
</p>
</div>
in css language :
#content {
background: lightgray;
padding: 1em;
}
p.lead {
color: black;
padding: 2em;
border: 2px dashed black;
background: pink;
}
Posted by livya on Apr 15, 2008 in Css Tips | Comments Off
Here we have the properties: border-width, border-style, border-color
The values of the border-width can be any number in px.
The values of the border-style are : solid, dotted, dashed, double, groove, ridge, inset and outset
The values of the border-color can be any color in one of the CSS format we have said.
example :
border-width: 2px;
border-style: dotted;
border-color: black;
this one we can write it in one line to make it easier to the browser to “read”
border: 2px dotted black;
if there is a case that we want a border only on top, right, bottom or left we can write it like this :
border-bottom: 2px dotted black;
Now, you can have rounded corners through css, but it only works on mozilla and …………..! NO EXLPORER!!!
All you have to write is this :
( example : )
-moz-border-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;