Friday, 22. January 2010
CSS 3.0 has a great new features called RGBa.
You can now make a transparent background, transparent text, or just about anything else transparent with RGBa.
.myClass {
background-color:rgba(255,255,255,0.5)
}
The above tag will color your area witha white background that is 50% transparent. The only issue with RGBa at this time is that IE doesnt support it. The only CSS 3.0 compliant browsers seem to be Firefox and Safri. However, I have tested this in Opera and it does work.
You can also change the color of text element with:
.myClass {
color:rgba(255,255,255,0.5)
}
The old style of transparency is still supported by all browsers
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
The major difference between these two styles is that the new method RGBa will only effect the targeted ellement. Where as with opacity all subclasses are also affected.
Posted in Uncategorized by frenchsquared -
Saturday, 3. October 2009
The content are of a box can be given width, height, and color. Width and height can be specified in points (equal to 1/72 of an inch), picas (equal to 12 points), pixels, ems, exes, millimeters, centimeters, inches, or percents.
p { width: 100pt ;}
p { width: 20pc;}
p { width: 300px;}
p { width: 40em;}
p { width: 50ex;}
p { width: 600mm;}
p { width: 8in;}
p { width: 50%;}
The color property can be used to style the text color. Color can be specified in a number of ways, including keywords, hexadecimal, and RGB.
Keywords for color included: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Although some other words may work in some browsers, they are not part of the specification and should not be used.
Hexadecimal colors can be specified using only three or six hexadecimal characters. When a color has three pairs of hexadecimal digits (such as #ff0000), it can be shortened by removing one digit from each pair (#f00). RGB colors can be specified using three comma-separated integers or percent values. For example, the color red can be specified using either rgb(255, 0, 0) or rgb(100%, 0%, 0%).
p {color: red }
p {color: #f00 }
p {color: #ff000}
p {color: rgb(255,0,0)}
p {color: rgb(100%, 0%, 0%)}
Posted in CSS Box Model by frenchsquared -
Wednesday, 12. August 2009
@import Styles?
Header and external style sheets also can import other style sheets using the @import rule. The @import rule must be placed before all other rules in the header or external style sheet.
@import “advanced.css”;
p {
font-family: arial, helvetica, san-serif;
margin: 1em;
padding: 1em;
background-color: black;
}
Imported styles can be used to link to multiple CSS files as well as to hide styles from older browers.
Posted in CSS Applying Styles by frenchsquared -
Tuesday, 11. August 2009
The third method of applying styles to document involves linking to external style sheets. External style sheets are the most appropriate method for styling documents. If styles need to be changes, the modifications can take place in one CSS file rather than all HTML pages.
To change the header style to an external style, move the rule set to a new CSS file. That means copy the code to a new filed called something like style.css
@charset “UTF-8″;
/* CSS Document */
body {background-color: grey;}
p {
font-family: arial, helvetica, sans-serif;
margin: 1em;
padding: 1em;
background-color: white;
width: 10em;
}
Next you have to link your HTML page to your CSS.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen”>
</head>
<body>
</body>
</html>
That is all the code required. Now you simply add the style sheet link in all of your html pages and you can control your entire site from on style sheet.
Posted in CSS Applying Styles by frenchsquared -
Tuesday, 11. August 2009
Header styles also can be used to style the <p> element. The CSS rules can be placed in the head of the document using the style element. Like inline styles, header styles, header styles should be avoided where possible because the styles are added to the HTML markup rather than in external CSS files.
There are cases where header styles might be the preferred option in specific instances, such as a CSS rule that is specific to one page within a large website. Rather than add this rule to an overall CSS file, a header style may be used.
The type=”text/css” attribute must be specified within the style element in order for browsers to recognize the file type.
<title>CSS Tutorial</title>
<style type=”test/css” media=”screen”>
p {
font-family: arial, helvetica, sans-serif;
margin: 1em;
padding: 1em;
background-color: gray;
width: 10em;
}
</style>
</head>
Posted in CSS Applying Styles by frenchsquared -
Monday, 10. August 2009
CSS, Inline styles can be applied directly to elements in the HTML code using the style attribute. However, inline styles should be avoided wherever possible because the styles are added to the HTML markup. This defeats the main purpose of CSS, which is to apply the same styles to as many pages as possible across your website using external style sheets. Styles that are applied inline can cause additional maintenance across a website because multiple pages might need changing rather then one CSS file.
<p style=”font-family: arial, helvetica, sans-serif; margine: 1em; padding 1em; background-color: gray; width: 10em;”>Lorem ipsum color sit amet, consectuer adipiscing elit…</p>
Posted in CSS Applying Styles by frenchsquared -
Thursday, 6. August 2009
Child selectors
Child selectors are used to selected an element that is a direct child of another elements parent. Child selectors will not selected all descendants, only direct children. For example, you might want to target an <em> that is a direct child of a <div>, but not other <em> elements that are descendants of the <div>
*Child selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.
div > em {
color: blue;
}
Adjacent sibling selectors
Adjacent sibling selectors will select the sibling immediately following an element. For example, you might want to target an <h3> element, but only <h3> elements that immediatly follow an <h2> element. This is a commonly used example because it has a real-world application. There is often to much space between <h2> and <h3> elements when they appear immediately after each other.
*Adjacent selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.
h2 + h3 {
margin: -1em;
}
Attribute selectors
Attribute selectors are used to select elements based on their attributes or attribute value. For example, you might want to select any image on an HTML page that is called “small.gif”
*Attribute selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.
img[src="small.gif"] {
border: 1px solid #000
}
Pseudo-elements
Pseudo-elements enable you to style information that is not available in the document tree. For instance, using standard selectors, there is not a way to style the first letter or first line of an element’s content. However, the content can be styled using pseudo-elements.
*Pseudo-elements selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.
p:first-line {
font-weight: bold;
}
p:first-letter {
font-size: 200%;
font-weight: bold;
}
Pseudo-classes
Pseudo-classes enable you to format items that are not in the document tree. They include :first-child, :link, :visited, :hover, :active, :focus, and :lang(n). Pseudo-classes will be covered in later posts.
Posted in CSS Selectors by frenchsquared -
Thursday, 6. August 2009
Universal selectors are used to select any element. For example , to set the margins and padding on every element to 0, * can be used.
*{
margin: 0;
padding: 0;
}
Universal selectors also can be used to select all elements within another elements. The code below will select any element inside the <p> element.
p * {
color: red;
}
Posted in CSS Selectors by frenchsquared -
Wednesday, 5. August 2009
Should you use id or class? Classes can be used as many times as needed within a document. IDs can only be applied once within a document. If you need to use the same selector more then once, classes are a better choice.
However, IDs have more weight then classes. If a class selector and ID selector apply the same property to one element, the ID selector’s value would be chosen.
Posted in Understanding CSS by frenchsquared -
Wednesday, 5. August 2009
Sample HTML
<body>
<div id=”content”>
<h1> Heading Here </h1>
<p> Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor <a href=”#”>sit</a> amet.</p>
<div>
<div id=”nav”>
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
</ul>
</div>
<div id=”footer”>
Lorem ipsum dolor <a href=”#”>sit</a> amet.
</div>
</body>
Descendant Selectors
Descendant selectors are used to selected elements that are descendants of another element
For example, in the HTML sample shown above, three <a> elements are descendants of the <li> elements. To target these three <a> elements only, and not all other <a> elements, a descendant selector can be used. This selector targets any <a> element that is nested inside an <li> element.
li a {
color:green;
}
Descendant selectors do not have to use direct descendant elements. For example, the <a> element is a descendant of <div id=”nav”> as well as the <li> element. This means that #nav a can be used as a selector as well.
#nav a {
color: red;
}
Descendant selectors also can include multiple levels of descendants to be more specific.
#nav ul li a {
color: green;
}
Posted in CSS Selectors by frenchsquared -
