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 -
Thursday, 13. August 2009
If you have spent anytime dealing with CSS you have run into issues with a browser rendering code incorrectly. You may even have gone as far as to make several style sheets and use a browser check to tell the browser which one to use. Most of my websites dont need more then one style sheet. I have come to realize that if I am more then a few pixels of then my code is somehow incorrect.
Still there is always that one issue. FrenchSquared was perfect in all the current major browsers except Safari and in Safari only the footer was off by 10px. I mean really 10px. There was no way I was going to write a browser check for Safari over 10 lousy pixels.
Instead in the bottom of my CSS I added the code:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
#footer { padding-top:10px; }
}
I have no idea why tis works but it does. In Safari 3.0 and 4.o you can add @media screen and (-webkit-min-device-pixel-ratio:0) to the style sheet and place whatever correction you need inside that tag. None of the other browsers will see this code.
I simply create a separate tag for Safari and now everything looks great with one CSS page.
Posted in CSS Tips and Tricks 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 -
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
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 -
Friday, 31. July 2009
When several selectors share the same declarations, they may be grouped together to prevent the need to write the same rule more then once. Each selector must be separated with a comma.
HTML Code
<h1> CSS Headings One</h1>
<h2> CSS Heading Two</h2>
<p> Some text about your css tutorial would go here</p>
CSS Code
h1 {
text-align: center;
color: navy;
}
h2 {
font-style: italic;
text-align: center;
color: navy;
}
In the above code The h1 and h2 elements share two declaration, so parts of the two rule sets can be combined to be more efficient.
HTML Code
<h1> CSS Headings One</h1>
<h2> CSS Heading Two</h2>
<p> Some text about your css tutorial would go here</p>
CSS Code
h1, h2 {
text-align: center;
color: navy;
}
h2 {
font-style: italic;
}
Posted in Understanding CSS by frenchsquared -
