www. Expression-Web-Tutorial .com

Call 1.866.363.5633

 

view cart

CSS Tutorials For Beginners

CSS - Cascading Style Sheets

css css css css css

CSS Tutorials for Beginners using Expression Web

What is CSS?

CSS is a style sheet language, and is an acronym that stands for, "Cascading Style Sheets".

CSS Defined:  CSS is used to control the presentation and appearance of web pages.  The way we do this is by creating Style Rules and applying these Style Rules to the HTML page elements.  Fortunately, Expression Web simplifies this process and makes the creation of CSS styles a little easier.

 

CSS allows us to control the appearance of the HTML portion of a web site....thereby separating content from presentation. 

CSS is the presentation portion while HTML is the content.  
 

Separation of Content from Presentation

HTML and CSS are used together to Design Web Pages. HTML is used to create the Structure of a web page, while CSS Styles the Structure. Without CSS, our Web Pages would look dull and lifeless. Without HTML, we would have nothing to Style!  Therefore, CSS and HTML is one example of a Perfect Marriage!

That said, you do need a bit of HTML knowledge in order to effectively use CSS.  Fortunately, Expression Web writes all the code for us and all we must do is apply the correct HTML tag to our content,  and, choose the correct CSS Selector that will best target the HTML tag in question.

  

An Example of HTML and CSS in Action

1. Open a blank HTML web page in Expression Web.  Now place a div on the page.  The div creates a long rectangular box, and this is what you should see.

 div

The screenshot above illustrates a div that's been placed on a web page.

 

2. Next, go to the Manage Styles Panel and Click "New Style" to open the style builder.

3.  Type in a CSS Selector where indicated.  Try using #container as the Selector.

4.  Check the box to apply the style to the Document Selection.  (Define in "the current page" for now. Later you will use an external style sheet.)

5.  Now, click on the Position Category and specify a width.  This width will be applied to the div you just put on the page in step 1.  For starters, just type 800 for the width, and use 'px' which stands for pixels.

6.  Click Apply.

You will now see the div is 800px wide.  You've just created a CSS Style Declaration and applied it to the HTML div tag.

You will repeat this general process until your page is designed. 

  

Need Help Learning CSS?  HTML?  Expression Web?

If you are new to CSS and/or Expression Web, then save yourself a lot of time and frustration..... look at the DVD package I put together just for beginners.   It's priced right and includes 3 DVDs that contain step by step video tutorials.  I've also added many PDF ebooks.  All of the videos are listed in menus and are listed in the order you should view them so that you can easily follow along. 

The DVDs have helped many people to learn how to make their own web sites.  The visual component of a video provides is exactly what beginners need in order to learn "how" to design web pages.  Yet, the DVDs are priced like a Book.  A great value to say the least.

Check out the other Expression Web Training Services I offer.

 

While you do not have to write one single line of code when using expression web, you must be able to decide which html tag to use and what type of CSS Style to Create.

In a nutshell, CSS is a heck of a lot easier to learn and use when using Expression Web.  You do not have to memorize all the CSS Properties and their associated Values.

Instead, all the Cross-Browser Compatible CSS Properties are listed in the Style builder (new style dialog window), and their associated Values are listed in dropdown menus. 

 Take a look at Expression Web's Style Builder to see what I am talking about.

 

 How to Use CSS