CSS3 Tutorial
Hypertext Markup Language is a method of describing web pages and associated information so that a web browser can display that page. HTML can use cascading style sheets to further describe a web pages attributes such as the appearance and layout of text. The World Wide Web Consortium maintains both HTML and CSS, and encourages HTML programmers to use CSS instead of explicit HTML code.
HTML
The first version of HTML was implemented in 1991 and version 5, commonly known as HTML5, was released in 2008. HTML contains elements which are described with tags enclosed by angle brackets. Most tags occur in pairs to describe the beginning and end of a section of code such that <tag name> is the start tag at the beginning of the section and </tag name> is the end tag at the end of that section. Content such as comments, text and other tags may be enclosed by a pair of tags. A web browser reads an HTML document and uses this code to display a web page. It does not display the HTML tags.
CSS
CSS controls the style and layout of a web page. Version 1 of CSS, commonly known as CSS1 was released in 1996. CSS2 was released in 1998 and CSS3 was released in 1999. CSS3 is backwards compatible with CSS2, meaning a web browser that supports CSS3 will also support CSS2. However, older browsers may not be able to use new CSS3 properties. Some individual modules are now at version 4, although there no such thing as CSS4.
CSS3 contains many modules, which are regularly added to the CSS3 specification. The W3C is still developing CSS3, which currently contains over 50 modules. Some of the most important CSS3 modules include the following:
- Selectors
- Backgrounds and Borders
- Box Model
- Text Effects
- 2D/3D Transformations
- Multiple Column Layout
- Animations
- User Interface
HTML Example
The following HTML code displays the text “Hello World!”:
<!DOCTYPE html> <html> <head> </head> <body> <p>Hello World!</p> </body> </html>
The <!DOCTYPE html> instruction declares the document type as HTML. The <html> and </html> tags define the section for the html code in this document. The <head> and </head> tags define the heading of the document, which is empty in this example. The <body> and </body> tags define the body of the document. The <p> and </p> tags define a paragraph, which contains the text “Hello world!” in this example.
CSS3 Example
The example in the above section can be modified to use CSS by declaring a style sheet and referencing that style sheet as follows:
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; } </style> </head> <body> <div>Hello world!</div> </body> </html>
Note the addition of the bolded text. The <style> and </style> tags define a style sheet. The div tag defines a generic block element that will describe attributes for the style sheet. In this example, the div element has a width of 100 pixels and a height of 100 pixels.The <div> and </div> tags implement the div element with the text “Hello world!”
Emmet M is a freelance writer available on WriterAccess, a marketplace where clients and expert writers connect for assignments.
