In this lecture in the HTML5 course, you will learn and practice CSS3 basics.
About CSS3
CSS stands for Cascading Style Sheets. You will understand the meaning of this name later. CSS is a language for specifying how documents are presented to users, how documents look - presentation. We use CSS to define styles for the documents, including the design, layout and variations in display for different devices and screen sizes. CSS3 is the latest implementation supported by modern browsers.
In this lecture you will learn:
- How to apply basic style properties to HTML elements (color, size, font ...).
- How to define the structure (box) of elements (padding, border, ...)
- How to define the location (layout) of elements on the page.
For advanced CSS3 features look for "CSS3 advanced" lecture in this course. It includes advanced features as transforms, animations, graphics, ...
For inspiration, look at CSS Zen Garden, where you can see what can be accomplished through the CSS-based design. Look what can be done with CSS here (incredible).
Next Lesson
Go to the next lesson in this lecture by pressing the right arrow on the bottom-left side of this page, see how to apply CSS to your HTML document, and start exploring CSS3 syntax and its basic features. Most of the pages are interactive. You can choose some predefined options. You are free to change the codes or write your own to explore various options and to see live preview of your changes.
In most of the demos we omit the document structure in the HTML code window. We assume the code in the HTML Code window is written in the body of the correct HTML5 document structure, unless the structure is explicitely shown. We also assume that the code in the CSS Code window (if present) is written in external file, which is linked to the document, as will be explained later.
Look at the 'CSS reference' tab for the popular CSS properties and their values (partial list only). The complete references you can find in the links in the 'Sites' tab on the top menu. Look at the 'Techniques' tab for some useful methods.
At the end of this lecture you will be able to build a site with styling and elements located as you wish.
Check Yourself
While learning and after you complete CSS lessons check yourself in:
Remember: No one can memorize everything, especially when you learn web development. Understand how you can use CSS, and how to use online resources to find html tags and attributes that you need and how to find solutions to problems.
Enjoy learning CSS3!