Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Need some CSS help


Ep5i10n
 Share

Recommended Posts

I'm working on a sort of "Blog" element for my website and what I have currently is Some HTML but no working CSS. I always have failed with css. So  here is the html so you may see what it looks like.
>! ```
>!

Post title Posted &date by poster

Lorem ipsum dolor sit amet.

[url]Link To this Post[/url] Tags

>! ```

And here is my fail at CSS so you may be able to see what I'm trying to do

>! ```
.blog
{
text-align center
font-family: 'Oxygen', sans-serif;
}
.post
{
text-align center
font-family: 'Oxygen', sans-serif;
}
.head
{
font-family: 'Oxygen', sans-serif;
text-align center
font-size large
}
span.head
{
font-family: 'Oxygen', sans-serif;
font-size small
}
>! .foot
{
font-size small
}
>! ```

From the fail CSS you may be able to see what I'm trying to do, any help on this would be appreciated
Link to comment
Share on other sites

**Here's a few pointers:**
- You forgot your tag at the top. :3
- For valid XHTML you need to use quotes with your attributes. For example: class=blog should be class="blog"
- You should use an ID selector (#) when your only going to use it once on a page and a class selector (.) when you may use it more than once on a page. For example:should bebecause it will only be used once.
- The syntax of your CSS is wrong, check out this [tutorial](http://www.w3schools.com/css/css_syntax.asp). For example: text-align center should be text-align: center;
- When using the property "font-size" it's best not to use the value "large". Specify a pixel value like this: font-size: 16px;
- In CSS there's something called inheritance which means the child object will inherit all of the parent objects properties. If we put the "font-family" deceleration in the body selector the "blog" div will inherit that font. This means that we only have to specify it once in our code.

**I also tidied up your code and gave you a few example CSS declorations for you to play around with:**

>! Post Title
    Posted 01/01/2012 by Bob

        Lorem ipsum dolor sit amet.

    [Link To this Post](#) Tags

>! body {
font-family: 'Oxygen', sans-serif;
font-size: 12px;
}
#blog {
background-color: grey;
}
.post {
background-color: white;
border: 5px solid yellow;
}
.post .title {
font-size: 16px;
font-weight: bold;
}
.post .info {
color: grey;
{
.post .tags {
color: green;
}
Link to comment
Share on other sites

> - You forgot your tag at the top. :3

Thats never happened to me before :3

Thanks man  :cheesy:
@Lenton:

> **Here's a few pointers:**
>
> - For valid XHTML you need to use quotes with your attributes. For example: class=blog should be class="blog"
> - You should use an ID selector (#) when your only going to use it once on a page and a class selector (.) when you may use it more than once on a page. For example:should bebecause it will only be used once.
> - The syntax of your CSS is wrong, check out this [tutorial](http://www.w3schools.com/css/css_syntax.asp). For example: text-align center should be text-align: center;
> - When using the property "font-size" it's best not to use the value "large". Specify a pixel value like this: font-size: 16px;
> - In CSS there's something called inheritance which means the child object will inherit all of the parent objects properties. If we put the "font-family" deceleration in the body selector the "blog" div will inherit that font. This means that we only have to specify it once in our code.
>
> **I also tidied up your code and gave you a few example CSS declorations for you to play around with:**
>
> >! Post Title
>     Posted 01/01/2012 by Bob
>    
>         Lorem ipsum dolor sit amet.
>    
>    
>     [Link To this Post](#) Tags
>
> >! body {
> font-family: 'Oxygen', sans-serif;
> font-size: 12px;
> }
> #blog {
> background-color: grey;
> }
> .post {
> background-color: white;
> border: 5px solid yellow;
> }
> .post .title {
> font-size: 16px;
> font-weight: bold;
> }
> .post .info {
> color: grey;
> {
> .post .tags {
> color: green;
> }
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...