CSS for ABSOLUTE BEGINNERS - shaping up with CSS - The Frog Blog

Web design and news by The Floating Frog

CSS for ABSOLUTE BEGINNERS - shaping up with CSS

By frog on October 30th, 2008 at 00:08 UTC |

Learning CSS from the beginning

CSS is an abbreviation for Cascading Style Sheets. Web designers use a CSS file to control the visual layout of a web page, grouping all styling declarations into one reference document while removing them from the HTML code that lies beneath the website.

If you’re an absolute newcomer to the scary world of web design and wish to start learning things from scratch then this is the place to be. Over the next few weeks I’ll be posting walk-through slideshows that explain CSS and XHTML visually, in an easy to digest format. This week it’s…

CSS help for absolute beginners

Shaping up with CSS

Credit: All copyright and materials Slideshare.net.

Index

What’s covered in this slideshow presentation:

Block Level Elements
Inline Elements
Rules
Element Symmetry - opening and closing XHTML tags
Styling elements
Sizing defaults
Setting heights and widths
Units of measurement
Fixed Block-Level Sizing
Browser Behaviour
Other occurances
Overflow Hidden
Positioning Elements
Full CSS Layout
Layout options
Positioning Block-Level Elements
Easiest Positioning Method
Position:Absolute
Top, Right, Bottom, Left
Handy tips

Think you’re a CSS Guru?

Well I guess your too good for this, it’s like child’s play, right? Well have a look at this, 10 CSS shorthand techniques you’ll use everyday, it will be more up your street.

-->

7 Responses

CSS for Absolute Beginners » CSS no Lanche Says:
October 30th, 2008 at 1:32 pm

[...] Por isso estou deixando abaixo alguns slides com conceitos básicos de CSS que encontrei no site The Frog Blog. A todos, bons estudos: | View | Upload your own Categorias: CSS Tags: [...]
Piggynap Says:
October 30th, 2008 at 9:24 pm

Oh wow….I’m actually going to go through this at work I know it’s not my job but I’d like to understand CSS enough to have a working knowledge of it. For example that time the pictures on my blog wouldn’t float even though I was using the right code and you added a float element into my stylesheet - if I’d known enough about how it worked I could have fixed that myself!

To really learn something you need to be using it everyday - what do people like me do who don’t get to use CSS very often? Is CSS Zen Garden the way to go or are there other practice environments?
Frog Says:
October 30th, 2008 at 9:35 pm

IT professionals like yourself who work in the industry but who don’t get hands-on practice of CSS and XHTML everyday find it difficult to remember even the most basic elements. Hopefully these mini classroom lessons will help enough for you to approach the next job with more in depth technical knowledge and confidence.

CSS Zen Garden is a fantastic example of demonstrating the fundermentals of modern UI design but I don’t think it will proactively assist in your CSS and XHTML development. As always with learning you need to get hands on, whether that’s working on a personal Wordpress blog or practicing with tutorials, it’s the most efficient way to learning. Keep an eye on this blog for more useful, bite-sized, tutorials on CSS and XHTML that you can try out in your own time.

Alternatively, if there is a specific tutorial you would like to read and practice on let us know, we would certainly consider writing one if we know there will be enough interest. Thanks Frog
david sopas blog » Shaping up with CSS Says:
November 4th, 2008 at 8:35 pm

[...] bug’ing out our work. For that reason, I’ll left with you guys some nice slides, by The Frog Blog, about shaping up with CSS. Shaping Up With CSS View SlideShare presentation or Upload your own. [...]
The Frog Blog: CSS beginner lessons « one cool site: wordpress blogging tips Says:
November 15th, 2008 at 7:57 pm

[...] CSS help for absolute beginners: Shaping up with CSS - This short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before. It does not explain much of CSS. It just explains how to create an HTML file, a CSS file and how to make them work together. After that, you can read any of a number of other tutorials to add more features to the HTML and CSS files. Or you can switch to using a dedicated HTML or CSS editor, that helps you set up complex sites. [...]
Hendarin Says:
November 17th, 2008 at 6:43 pm

That article is for me I want to learn CSS from the very beginning.

Can I download the slideshare material?
frog Says:
November 17th, 2008 at 7:03 pm

@Hendarin

Download isn’t available unfortunately but it you bookmark the page you can reference it at any time.

CSS for Absolute Beginners » CSS no Lanche Says:
October 30th, 2008 at 1:32 pm

[...] Por isso estou deixando abaixo alguns slides com conceitos básicos de CSS que encontrei no site The Frog Blog. A todos, bons estudos: | View | Upload your own Categorias: CSS Tags: [...]

Piggynap Says:
October 30th, 2008 at 9:24 pm

Oh wow….I’m actually going to go through this at work I know it’s not my job but I’d like to understand CSS enough to have a working knowledge of it. For example that time the pictures on my blog wouldn’t float even though I was using the right code and you added a float element into my stylesheet - if I’d known enough about how it worked I could have fixed that myself!

To really learn something you need to be using it everyday - what do people like me do who don’t get to use CSS very often? Is CSS Zen Garden the way to go or are there other practice environments?

Frog Says:
October 30th, 2008 at 9:35 pm

IT professionals like yourself who work in the industry but who don’t get hands-on practice of CSS and XHTML everyday find it difficult to remember even the most basic elements. Hopefully these mini classroom lessons will help enough for you to approach the next job with more in depth technical knowledge and confidence.

CSS Zen Garden is a fantastic example of demonstrating the fundermentals of modern UI design but I don’t think it will proactively assist in your CSS and XHTML development. As always with learning you need to get hands on, whether that’s working on a personal Wordpress blog or practicing with tutorials, it’s the most efficient way to learning. Keep an eye on this blog for more useful, bite-sized, tutorials on CSS and XHTML that you can try out in your own time.

Alternatively, if there is a specific tutorial you would like to read and practice on let us know, we would certainly consider writing one if we know there will be enough interest. Thanks Frog

david sopas blog » Shaping up with CSS Says:
November 4th, 2008 at 8:35 pm

[...] bug’ing out our work. For that reason, I’ll left with you guys some nice slides, by The Frog Blog, about shaping up with CSS. Shaping Up With CSS View SlideShare presentation or Upload your own. [...]

The Frog Blog: CSS beginner lessons « one cool site: wordpress blogging tips Says:
November 15th, 2008 at 7:57 pm

[...] CSS help for absolute beginners: Shaping up with CSS - This short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before. It does not explain much of CSS. It just explains how to create an HTML file, a CSS file and how to make them work together. After that, you can read any of a number of other tutorials to add more features to the HTML and CSS files. Or you can switch to using a dedicated HTML or CSS editor, that helps you set up complex sites. [...]

Hendarin Says:
November 17th, 2008 at 6:43 pm