fresh photoshop tutorials & resources
Log in Register
Painted Wood Photoshop Action Comics Book Photoshop Action Infographic JS Library Textures for Photoshop

What is CSS and How to Use Style Sheets for Web Design

www.psd-dude.com
Tutorials CSS 8518 Views September 3rd, 2011

As many of our friends already know this blog is maintained by a team of two: one graphic designer and one programmer - me. Therefore, I've decided to start writing a new type of tutorials related to web design technologies and coding to share my experience with you.

My first tutorial is for beginners and from it you can learn about what CSS is and how can you use style sheets for your web designs.

Please don't hesitate to leave comments in the comments area below and I will try to answer all your questions related to this tutorial and to CSS style sheets basics.

Advertisment

What is CSS?

CSS or Cascading Style Sheets is a language for defining how HTML elements are displayed. CSS properties define visual representation rules for HTML elements like font size, color, alignment, etc.

Why use CSS?

You might think that you have never used and don't need CSS, but the fact is that even the text you are now reading has style sheet properties set to it. Some of them are explicitly set (by me, hehe) and some are implicitly set (these are the default browser style sheet properties). These properties indicate for this paragraph of text the font family, font size, color, text alignment, indentation, distance between text lines -  so you can see, CSS style sheets really do a lot for the design of a page.

Actually, you can't do web design without using CSS style sheets toghether with HTML elements. From the layout to the look and feel, CSS style sheet properties are the mean of setting how the web design of the page will look like.

Basic CSS usage tips:
Where do I begin with CSS?

Ok, so you have a HTML for your web design and would like to know how you can use CSS style sheets to modify certain visual aspects of the design. For the sake of an example let's say we have decided to change the font face of the page. Note that by default your browser will set the font face and the font size - for example Internet Explorer and Firefox have by default "Times New Roman" as the font face.

3 ways to set CSS style sheet properties

1. Inline style sheet properties - this is the quickest way to use CSS styles in your web design. To use inline CSS styles you only have to add the "style" attribute to the HTML element for which you want to change the CSS style sheet properties. For our example to change the font face of the page we'll want to change it for the "body" element. Here's the code that shows you how to do it.

    <html> 
        <head> 
            ... 
        </head> 
        <body style="font-family:Arial;"> 
            ...
        </body> 
    </html>

As you can see on line 5, I've added the style attribute for the body tag in which I've placed the property "font-family" which determines the font face and the desired value "Arial". The CSS property and the value are separated by a colon sign (:) and to indicate the end of setting the property I've placed a semi-colon(;).

2. Add CSS styles through the <style> tag. This is the second way through which you can add CSS styles to your web design. The <style> tag is a tag that is placed usually in the <head> tag of the page, but can also be placed anywhere on the page (though not recommended). Here is the code snippet that shows how to achieve the same result as above for our font face example.

    <html> 
        <head> 
            ...
            <style>
            body
            {
                font-family:Arial;
            }
            </style>
            ... 
        </head> 
        <body> 
            ...
        </body> 
    </html>

Lines 4 to 9 indicate to the browser that we would like to set the font face for the <body> tag. As you might notice, the CSS styles on line 7 is exactly the same as in the inline style - method 1. The difference is that with this second method you have to specify for which element you want the styles applied, this is why you have to put "body" as I did on line 5. This part of the CSS style sheet is called a CSS selector.

3. External CSS style sheets The third method to use CSS stylesheets, and often recommended for code readability and maintainability is the use of external CSS style sheets aka CSS files. This method consists of indicating to the browser that you've placed all your CSS styles in a file, other than the HTML file for the page. This has the advantage that you can manage only CSS styles by editing the CSS file and also, maybe more important, you can define multiple CSS files that you can switch in the HTML code to have different looking versions for your web designs.

The content of the mystyle.css CSS style sheet file:

    body
    {
        font-family:Arial;
    }

... and the content of the web design HTML page:

    <html> 
        <head> 
            ...
            <link href="mystyle.css" rel="stylesheet" type="text/css" />
            ... 
        </head> 
        <body> 
            ...
        </body> 
    </html>

The CSS style sheet file contains the style properties exactly the same way as in method 2. The difference is in the HTML code where you have to indicate to the browser to load the CSS file through the <link> tag just like I did on line 4. The value for the "href" attribute has to be set with the path to the CSS style sheet file. This can be either an absolute path or a path relative to the page that is loading the CSS style sheet. The "rel" and "type" attributes both indicate that the file refered is indeed a CSS style sheet file.

The 3 methods described above can be used separately or together depending on your needs.

I hope you find this quick basic tutorial on how to use CSS style sheets for web design useful. Of course, there are a lot more to CSS style sheets than what is in this tutorial like how to use selectors, which are the CSS properties, how to use CSS class styles, how to use CSS styles inheritance, etc. but I thought that it is better to start with a short tutorial on the basics of CSS to get you started in your learning of CSS style sheets for web design.

If you find this useful please leave some comments, questions or remarks and I will try to answer them to the best of my abilities.

If you're looking for amazing textures and backgrounds for Photoshop, explore Textures4Photoshop where you can find 1000+ unique images. You can download all these textures and backgrounds for free to use in personal or commercial projects!

Be a Cool Dude!

With your donation you can help us maintain this website and keep producing free resources many months to come! Any amount counts

3 comment(s) for "What is CSS and How to Use Style Sheets for Web Design"

PSDDude
5:23 AM Thursday, September 08, 2011
You are right "Some Guy", but even so, I thought I should list all possibilities. And I also think that sometimes poor coding can be an acceptable compromise for a quick solution. reply
Web Design Canterbury
5:33 PM Sunday, September 25, 2011
Excellent Tutorial & Very helpful for designers like me :),

Thanks for your tutorial . reply
Some Guy
Some Guy
1:30 AM Tuesday, December 23, 2014
External stylesheet is better for 99.9999% situations. Other is poor coding. reply

Have something to say? Leave us a comment

Click to Upload Fan Art!

Share your Psd Dude inspired works


Pencil Sketch vs Camera Photo Effect Photoshop Action
Animated Kaleidoscope Photoshop Action
Recent Posts
Download for free the skeleton bones text effect Photoshop style. This Halloween text style is free ...
Free blood brushes for Photoshop, ready to be used for this year Halloween. Add dripping blood effec...
Learn how to turn a person into a vampire in Photoshop using some simple techniques. You will learn ...
Learn how to create a an old parchment that looks like a page out of Leonardo Da Vinci's Codex. As y...

      Rubber Stamp Generator Photoshop Action
Popular Posts
You can create amazing gold text effects by using these unique gold Photoshop styles, both free and ...
If you want to know how to create dispersion effect in Photoshop in a easy way, here is a quick solu...
In today list of free textures for Photoshop I have gathered over 100 amazingly beautiful wood textu...
There's something about ribbons that just looks good. I thought about making this Ribbon Vector Free...
Today's Photoshop collection of resources includes some amazing packs of metal chrome PSD text style...
I have decided to create a new character from Alice in Wonderland and I hope that maybe someday to r...
To create a Comic Book Effect in Photoshop we have to mix all sort of filters and blend them togethe...
Stitching and sewing can be created also in Photoshop with very realistic results. So in this tutori...
Hello girls and boys! Today i want to make a cartoon rainbow... i really hope you will like it! ...
In this tutorial I will show you how to create a 3D map in Photoshop using different 2D and 3D model...
Subscribe via email
LIKE US ON FACEBOOK

      Metal Tag Photoshop Creator
top