Classroom Assistant: CSS Tutorials

Pin It

In this Classroom Assistant, you will learn what CSS is and  how it applies to your education.  We have also provided you with 15  tutorial videos that cover a variety of tools and  techniques of CSS.
cascading-style-sheets-css-logo

Table of Contents:

1.  What is CSS?
2.  How CSS Applies to Your Education
3. CSS Tutorial for Beginners – part 1 of 4 – Applying Styles
4. CSS Tutorial Pt 1 – Basic Layout
5. Create a Responsive Website Using HTML5 and CSS3
6. CSS Tutorial: Build A Homepage
7. HTML div tag Example and Tutorial using CSS
8. XHTML and CSS Tutorial – 1 – Downloading a Text Editor
9. Learn CSS (Tutorial) – Basics + Selectors (For Absolute Beginners)
10. CSS Tutorial Pt 3 – Creating a Horizontal Nav
11. XHTML and CSS Tutorial – 9 – Adding Images to the Webpage
12. XHTML and CSS Tutorial – 4 – Paragraphs and Line Breaks
13. XHTML and CSS Tutorial – 2 – Creating our First Webpage
14. XHTML and CSS Tutorial – 7 – Creating a Link Within a Web Page
15. XHTML and CSS Tutorial – 5 – Bold, Italics, and Comments
16. XHTML and CSS Tutorial – 20 – Background Images
17. XHTML and CSS Tutorial – 3 – body and headers

1.  What is CSS?

CSS, which stands for Cascading Style Sheets is a style sheet language. It is the language that works with a markup language such as HTML and XHTML to design the formatting and overall look of a web page. CSS can also work with other languages such as XML, SVG, and XUL. CSS primarily styles the layout, colors, navigation, background, and font elements on a web page. CSS is ideal because it allows a designer to apply a style to multiple pages, which prevents correction of style on multiple pages if a style change is necessary. It can also provide the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, and by voice. CSS is also the language that is used to change the appearance of the way your site looks for multiple devices such as a phone, tablet, or computer screen. Like HTML, CSS is also maintained by W3C (World Wide Web consortium) for validation of code.

2.  How CSS Applies to Your Education

Also like HTML, CSS is also an important language you will learn in your Graphic Design Degree studies. This code will be essential for you to create your website. Throughout your education, you will be challenged to create many websites as part of your course assignments. Some schools will allow you to use Adobe Dreamweaver to create your web pages, which is a web design and development application that provides a visual WYSIWYG editor. In addition to supplying coding tips to it’s users, Dreamweaver also comes with prepackaged code for common website scenarios. Dreamweaver is an amazing program that saves designers a considerable amount of time. It is also ideal for the designer that does not enjoy coding as much as they do creating the visual aspects of websites. However, it is very beneficial for you to learn what the code means and how it works with other coding tags. Understanding CSS code will only allow you to be more productive when using web design editors. CSS code is written in text editors such as Notepad. Notepad is a free program that is downloadable from the web.

Coding your websites can be very complicated when you are first learning. There are a lot of intertwining pieces and a lot of elements to remember. To assist in your HTML learning, we have researched some tutorials that will help you understand your assignments as you are earning your Graphic Design degree. Below you will find the top 15 tutorials on our list.

***************************************************************************************************************

3. CSS Tutorial for Beginners – part 1 of 4 – Applying Styles

This tutorial is part of a series for those wishing to learn how to make a website from scratch. Whether you’re using a basic text editor, or more advance tools like Adobe Dreamweaver, learning the basics of CSS will provide a good foundation to build on.

Speaker: tutor4u

***************************************************************************************************************

4. CSS Tutorial Pt 1 – Basic Layout

CSS Tutorial for 3 column layout.

Speaker: 2createawebsite

***************************************************************************************************************

5. Create a Responsive Website Using HTML5 and CSS3

In this tutorial you will learn how to create a responsive website using HTML5/CSS3 from scratch.

Speaker: 1stwebdesigner

***************************************************************************************************************

6. CSS Tutorial: Build A Homepage

This tutorial is how to create a HTML website sample homepage using Cascading Style Sheets. The use of CSS will allow you to style and control the navigation links. The tutorial will also explore some CSS3 techniques such as Border-Radius, Box-shadow, and Gradients.

Speaker: Elias Sarantopoulos

***************************************************************************************************************

7. HTML div tag Example and Tutorial using CSS

This tutorial demonstrates how to use the HTML / XHTML div tag and how to style it with CSS. The examples will cover the basic usage for the div tag and demonstrate the CSS color, text-align, background, float, and width properties.

Speaker: tutor4u

***************************************************************************************************************

8. XHTML and CSS Tutorial – 1 – Downloading a Text Editor

This tutorial is part of a series that will cover all the basic concepts of XHTML and CSS.

Speaker: thenewboston

***************************************************************************************************************

9. Learn CSS (Tutorial) – Basics + Selectors (For Absolute Beginners)

In this tutorial you will learn how to add basic styles to a page with CSS.

Speaker:

***************************************************************************************************************

10. CSS Tutorial Pt 3 – Creating a Horizontal Nav

This tutorial is part 3 of a 3 part series. It shows you how to create a horizontal navigation using CSS.

Speaker: 2createawebsite

***************************************************************************************************************

11. XHTML and CSS Tutorial – 9 – Adding Images to the Webpage

This tutorial shows you how to put an image on your website using CSS.

Speaker: thenewboston

***************************************************************************************************************

12. XHTML and CSS Tutorial – 4 – Paragraphs and Line Breaks

This tutorial shows you how to put paragraphs and line breaks on your website using CSS.

Speaker: thenewboston

***************************************************************************************************************

13. XHTML and CSS Tutorial – 2 – Creating our First Webpage

This tutorial shows you how to create your first webpage with CSS.

Speaker: thenewboston

***************************************************************************************************************

14. XHTML and CSS Tutorial – 7 – Creating a Link Within a Web Page

This tutorial shows you how to create a link within the same page.

Speaker: thenewboston

***************************************************************************************************************

15. XHTML and CSS Tutorial – 5 – Bold, Italics, and Comments

This tutorial shows you how to create bold, italics, and comments in your webpages.

Speaker: thenewboston

***************************************************************************************************************

16. XHTML and CSS Tutorial – 20 – Background Images

This tutorial shows you how to create background images on your webpages.

Speaker: thenewboston

***************************************************************************************************************

17. XHTML and CSS Tutorial – 3 – body and headers

This tutorial shows you how to create body and headers in your webpages.

Speaker: thenewboston

***************************************************************************************************************
For additional tutorial help, please see these tutorial sites:

Photoshop

Illustrator

Flash

HTML

 

 

Pin It