CSS Advanced

CSS Attribute Selectors

0

CSS Attribute selectors are used to select specific attributes in HTML. For example,

<body>
     <h2 class="title">Welcome!</h2>
     <p class="foo" rel="newText">Some text here</p>
</body>

We have two class attributes and on rel attribute labeled, "newText". We could use the attribute selector like the following:

.title {font-size:2em;}
.foo {color:#ccc;}

p[rel=newText] { /*attribute selector*/
     font-size:1.15em;
     font-style:italic;
}

Using this rel attribute and stating what its value is, we can add styles to that exact element even though it has other inherited styles.

Breakdown

Attribute selectors can be somewhat strange at first. But fret not! They're quite easy to learn and can be useful in tricky situations.

[attrib=value]

This means the attribute will equals a certain value. For example:

<div id="form">
     <form action="process.php" method="post">
          <input class="button" type="button" name="button" 
value="Click Me" />
     </form>
</div>

Since this button already has a class attribute, it's already being styled independently. For the sake of argument, let us assume this button is used multiple times on a website and it would be a pain for us to add a new class value. We could simply use an attribute selector to style the button with the value of "Click Me!".

input.button {
     padding:3px;
     background:#3b3b3b url(images/button.png) repeat-x;
     width:50px;
     height:25px;
     color:#ccc;
}

input.button[value=Click Me] {
     background:#4c4c4c url(images/new-button.png) repeat-x;
     color:#999;
}

We have our class called "button" which is styled a certain way. Assuming it was a pain for us to create a new class, we can have the attribute selector get the exact value of "Click Me" and then style it differently.

[attrib*=value]

This one is a little bit more strange. The "*" in this situation kind of acts as a wildcard. This "*=" will search for the the following value anywhere in the attribute value. For example:

<h3 rel="foobarfoo">Text here</h3>

Using this attribute selector we could do the following:

h3[rel*=bar] {
     text-shadow:1px 1px 1px #000;
     color:#fff1d8;
}

This will search the attribute for the word bar and add the styles you want to it. We can also look at this from a different angle:

<div class="item1">Content here</div>
<div class="item_2">Content here</div>
<div class="item-3">Content here</div>

This would be considered poor coding on any level. But let us assume there was a situation like this and you wanted to create a style that would apply to all three of these class selectors. Instead of editing each one individually, we could do the following:

div[class*=post] {font-family:monospace;}

[attrib^=value]

This allows us to choose an attribute based on how it starts. If we have several attributes that start with the same string of text with multiple id and class styles added to the elements already, this can make our life easier.

<div class="foo bar" rel="hello-world">Content Here</div>
<div id="world" class="foo">
     <ul class="bar" rel="hello-world">
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li rel="hello-world">Item</li>
     <ul>

With a little CSS...

*[rel^=hello-world] {font-style:italic;}

Note: The * in this instance is a wildcard which will automatically put whatever element the attribute and value applies to.

Here is an alternative example:

<a href="http://www.atomicpages.net/blog/2010/05/04/css3-opacity/">CSS3 Opacity</a>
<a href="http://www.atomicpages.net/blog/2010/04/09/mmf2-beginning-video-tutorial-series/">MMF2 Tutorial Series</a>
<a href="http://www.w3.org/standards/xml/core">W3C XML Info</a>
<a href="http://www.whatwg.org/">WHATWG</a>
a[href^=http://www.aomicpages.net/] {color:#ff9300;}

[attrib$=value]

This will search for the value but at the end of the string.

<div class="foo bar">
<!--content here-->
</div>

<div class="bar"></div>
<div class="foo"></div>
div[class$=bar] {text-decoration:underline;}

[attrib~=value]

A typical HTML element that has multiple classes styling it would look like the following:

<div class="foo bar"></div>

Notice that the values are separated by a space. What if we had a different attribute that had multiple values that were separated by a space? Could we use *=? Probably, but the issue with *= is that it can be too picky since this does not require spaces. For example,

<div class="red" rel="foo bar"></div>
div.red {color:red;}
div[rel~=foo] {color:#470b0b;}

Using ~= would require the attribute to be separated by spaces if there were multiple values.

[attrib|=value]

This attribute selector allows us to styles attribute values separated by a dash. This is an alternative to using *=. See the following code:

<div class="blue" rel="bar-foo-bar"></div>
div.blue {background-color:blue;}
div[rel|=bar] {background-color:rgba(50, 50, 50, 0.6);}

Multiple Attribute Selectors

We can use multiple attribute selectors if we want. Consider the following code:

<div title="AtomicPages Blog" rel="example-link" class="blog img">&nbsp;</div>
div[title=AtomicPages Blog][rel|=link] {color:#ccc;}

Creating an Inline Menu

0

Creating an inline menu should seem pretty straight forward, right? You think we could just create an unordered list and that would be the end of the story. Unfortunately, if we create an unordered list we'll quickly see that these lists types merely list item one on top of the other.

  • Item 1
  • Item 2
  • Item 3

This is because the ul and li elements are block-level elements and not inline elements. For example:

ul, li {display:block;}

Is a piece of code that is understood by every modern browser that follows the W3C standards.

Our solution is simple then. If we recall that an inline display value will use only what is immediately around the element. Consider the following:

p.inline {display:inline;}
<p class="inline">Porttitor eros dictumst nunc lundium porta proin 
ultrices placerat velit ultrices parturient tincidunt? 
In. Nisi tincidunt scelerisque cras velit sed risus 
arcu turpis! Mauris et.</p>
<p class="inline">Et ac. Nec tortor quis pulvinar tristique augue 
dis sed adipiscing aenean nascetur arcu, magna, elit enim cras? 
Amet proin, nascetur amet et eu diam.</p>

Since we overrode the default display:block; for p elements, the output will be the following:

Porttitor eros dictumst nunc lundium porta proin ultrices placerat velit ultrices parturient tincidunt? In. Nisi tincidunt scelerisque cras velit sed risus arcu turpis! Mauris et.

Et ac. Nec tortor quis pulvinar tristique augue dis sed adipiscing aenean nascetur arcu, magna, elit enim cras? Amet proin, nascetur amet et eu diam.

So let us examine the list a little bit more.

<ul>
     <li><a href="#">Item 1</a></li>
     <li><span>Item 2</span></li>
     <li><em>Item 3</em></li>
</ul>

The <ul> in itself if a block-level element; however, the <li> are also block-level elements. All of the elements surrounding the list items are inline elementse.g. the <a> is an inline element.

In our inline menu, we don't want the menu itself to be an inline element but rather its items to be inline elements. These items are the <li> elements. Consider the following menu with basic CSS:

#menu {
     height:50px; /*sets height of menu*/
     background-color:#4c4c4c;
}

#menu ul {
    list-style:none; /*gets rid of bullets*/
     width:800px; /*sets width of menu, not necessary*/
}

#menu li {
     display:inline; /*critical to inline menu*/
     padding-left:10px; /*sets space between menu items*/
}

Now that we have our CSS the HTML structure will look like the following:

<div id="menu">
     <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
     </ul>
</div>

See the downloadable file for working example and additional examples.

Pretty boring, huh? All of that CSS for just a few lines of lousy HTML. This is a secret behind the creation of inline CSS menus, just remember that you want the menu items to be a series of inline elements but not the actual menu itself.

From here on out we can style our inline menu to our liking. If you are unfamiliar with CSS then I recommend you visit the CSS Tutorials and learn CSS!

From there we can style our inline menu to our liking. We can create simple effects that will make the men stand out. Consider the following:

#menu {
     height:50px;
     font-size:1.2em;
     background-color:#4c4c4c;
     border:2px solid #fff;
     color:#fff;
}

#menu ul {list-style:none;}

#menu li {
     display:inline;
     padding-left:10px;
}

#menu a:link, #menu a:visited {
     text-decoration:none;
     color:#fff;
     padding:10px;
}

#menu a:hover {
     background-color:#3b3b3b;
     text-decoration:none;
     color:#DBDBDB;
     padding:10px;
}

This will give us a nice looking menu that will have a roll over effect on the links within the menu. From there, we can add custom images, jQuery drop down menus, and many other effects using client-side code.

For examples and editable code, please download the file!

Inline Menu
Inline Menu
Size: 11.48 KB

Advanced CSS Part -#7

0

Today we're going to create a top navigation menu and side menu in CSS. This is like any website menu that we would see on most websites.

Inline Menu

This is an example of a website menu:

Menu

We can see that the menu is entirely inline and is actually really just an unordered list. Consider the following code:

#menu {
     background-color:#4c4c4c;
     height:30px;
     font-size:30px;
     font-weight:700;
     padding:5px 0px;
}

#menu ul {list-style:none;}

#menu li {
     display:inline;
     padding:0px 10px;
}
<div id="menu">
     <ul>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
     </ul>
</div>

The CSS is setting the styles for the navigation menu... We have our ID selector #menu that is creating a background of #4c4c4c (grey), a height of 30px, a font size of 30px, a font weight of 700 (in other words, bold), and a padding of 5px that applies to the top and bottom ONLY.

#menu ul is basically saying that all <ul> elements inside of the ID #menu will have a list-style of none.

#menu li is saying that all <li> elements within the ID #menu will be displayed as inline elements (no breaks before or after the element, refer to the Display Property for more information) and will apply a 10px padding to the left and right sides ONLY.

Vertical Menu

A vertical menu is a menu that is, well, vertical.

Side Navigation

Side Menus are easier to make than inline menus. Consider the following code:

#side-nav {
     background-color:#4c4c4c;
     display:block;
     width:150px;
}

#side-nav ul {
     list-style-image:url("images/bullet.png");
     margin:10px;
}

#side-nav li {
     padding:5px 0px;
     border-bottom:1px solid #3b3b3b;
}

#side-nav.no-border {border:none;}
<div id="side-nav">
     <ul>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li class="no-border"><a href="url">Link</a></li>
     </ul>
</div>

So we have our ID selector side-nav that is creating the background color of #4c4c4c (grey), displaying the selector as a block element and a width of 150px. Note: since only the width is defined, we can have an unlimited height.

Next, we have our selector that is saying that all <ul> elements within the side-nav selector will have a list style image of "bullet.png" and will have a 10px margin around all sides.

Finally, we have our selector that is saying all <li> elements within the side-nav selector will have a top and bottom padding of 5px ONLY and a bottom border that is 1px wide, solid, and the color #3b3b3b. There is something interesting, however; there is an additional selector defined that states a border is none which we used on the last <li> element of our vertical menu. This will make the menu look better, or at least more symmetrical.

menu.zip
menu.zip
Size: 4.46 KB

Advanced CSS - Part #6

0

Pseudo-elements are used to add special effects to some html elements.

Pseudo-elements are very much like pseudo-classes. The syntax for pseudo-elements is like pseudo-classes:

selector:pseudo-element {property: value;}

We can also use class selectors with our pseudo-elements:

selector.class:pseudo-element {property: value;}

Pseudo-elements

Since pseudo-elements exist to give some html elements some flair, we have a few special pseudo-elements that we need to be familiar with.

:first-line

As the name implies, this pseudo-element adds special styles to the first line of text. We can only use this pseudo-element with block-level elements (see Display Property for more details).

p:first-line {
     color: #ff9300;
     font-style: italic;
}

The above code would make the first line of text color turn to atomicpages orange and then change the first line of text to be italic. There are, however, certain properties that are not allowed when using the :first-line property. We can use the following:

  1. all font properties
  2. color
  3. all background properties
  4. text-decoration
  5. clear
  6. text-transform
  7. letter-spacing
  8. word-spacing
  9. vertical-align
  10. line-height

These are the only properties that are valid to use with the :first-line pseudo-element!

:first-letter

This pseudo-element applies unique styles to the first letter of text. Consider the following code:

p.a:first-letter {
     background: #fff url("images/fancy_a.gif") no-repeat;
     border: 1px solid #ff9300;
     margin-left: 25px;
}

This will load the first image of all p elements with the class "a" so:

<p class="a">very fancy image at the beginning of this makes this 
sentence seem much more grandiloquent that it really is!</p>

This fancy_a.gif will also have a border of 1px which is solid and atomicpages orange and will have a left margin of 25px.

Like the :first-line pseudo-element, there are restrictions on which properties can be used with this pseudo-element.

  1. all font properties
  2. color
  3. all background properties
  4. text-decoration
  5. clear
  6. text-transform
  7. letter-spacing
  8. word-spacing
  9. vertical-align
  10. line-height
  11. margin properties
  12. padding properties
  13. float

:before

This pseudo-element is used to insert content before and element is rendered by the browser. Consider the following code:

span:before {background: #fff url("images/fancy_a.gif") no-repeat;}

This is saying that before every span element there will be that fancy "A" that we define earlier in this tutorial.

:after

This pseudo-element is used to insert content after and element is rendered by the browser. Consider the following code:

h4:after {background: #fff url("images/fancy_b.gif") no-repeat;}

This is saying that after every h4 element there will be that fancy "B".

Now what does that accomplish? Nothing very significant in this case but you can click on the green download button to see these pseudo-elements in action!

pseudo-elements.zip
pseudo-elements.zip
Size: 7.76 KB

Advanced CSS - Part #5

1

Pseudo-classes are little snippets of code that will add additional effects to some selectors.

Pseudo-classes

The syntax for Pseudo-classes is very much like the syntax for css:

selector {property:value;} /*CSS Syntax*/
selector:pseudo-class { /*Pseudo-class Syntax*/
     property:value; 
     property:value;
}

:link, :visited, :active, :hover

A very widely used example of Pseudo-classes is adding styles to links. Consider the following:

a:link, a:visited {
     text-decoration:underline;
     color:#ff9300;
}

a:hover {
     text-decoration:none;
     color:#ff9300;
}

These are called "global link styles", these are styles that will apply to any and all links on a page where this code is. We have our pseudo-classes a:link, a:visited, a:hover and each is doing something different.

1. a:link

a:link sets the styles for an unvisited link:

a:link {
     color:red;
     font-weight:bold;
}

2. a:visited

a:visited sets the styles for a visited link:

a:visited {
     color:blue;
     font-weight:bold;
}

3. a:hover

a:hover sets the styles for links that you mouse over:

a:hover {
     color:aqua;
     font-weight:bold;
     text-decoration:unerline;
}

4. a:active

This sets the styles for a link that is currently active:

a:active {
     color:coral;
     font-weight:bold;
     text-decoration:unerline;
}

Order

Order is key when using these particular pseudo-classes. When you write these styles you must follow the correct order to make it all work.

a:link { /*This must be first*/
     color:red;
     font-weight:bold;
}
a:visited {  /*This must be second*/
     color:coral;
     font-weight:bold;
}
a:hover {  /*This must be third*/
     text-decoration:unerline;
     color:blue;
     font-weight:bold;
}
a:active { /*This must be last*/
     color:green;
     font-weight:bold;
}

We can also group the pseudo-classes together like this:

a:link, a:visited {
     text-decoraton:none;
     color:#ff9300;
}

a:hover, a:active {
     text-decoration:unerline;
     color:coral;
}

Like other CSS selectors, we can add a class selector to the Pseudo-classes, this would enable us to apply these styles any where on our web page if we desired it to be so.

selector.class:pseudo-class {
     property:value;
     property:value;
}

a.fancy:link, a.fancy:visited {
     text-decoration:underline;
     color:#ff9300;
}

This class fancy will make a link and you visit that link that we create, it will be underlined and be that atomicpages orange color.

:first-child

The first-child pseudo-class is as it sounds. This will apply any styles that you define to the first-child element of a parent element. Consider the following code:

body {
     margin:auto;
     width:1000px;
     background-color:#4c4c4c;
     font:normal 11px Verdana, "Times New Roman", sans serif;
     color:#fff;
}

p:first-child {
     color:blue;
     text-decoration:underline;
     font-weight:700;
}

We can use the first-child pseudo-class in some very helpful ways too! If, for instance, you wanted to apply a style that would make the first paragraph unique, we could use the first-child pseudo-class to achieve this goal. Consider the following:

.fancy p:first-child {
     color:red;
     font-style:italic;
}   

This would set the first paragraph of the class "fancy" to be red and italic and all subsequent paragraphs to be whatever we set the styles to.

If you want to see pseudo classes in action feel free to click on the green download button below to see these examples in action!

pseudo-classes.zip
pseudo-classes.zip
Size: 1.88 KB
Go to Top