Friendly CSS3 Course #Part 1 Understanding CSS3

Deprecated: Function create_function() is deprecated in /home/vhosts/poweredbygnulinux.com/wp-content/plugins/codecolorer/lib/geshi.php on line 4698

 Welcome!

Welcome to our CSS3 COURSE. In several parts, learn how to work with this important definition of styles. We can learn things like: define and apply effects, improve compatibility with mobile devices, using animations and more.

CSS allows us to define styles and special effects of our website. Thus web pages and applications  can captivate users.(CSS means Cascading style sheets)

Then you can use your imagination to apply the concepts of css3 in designing your website.

What you need

You need to know basic information: Browsers, install applications and work with your software platform . Basic html . Any programming skill is useful.

Let’s begin. What is CSS3

The purpose of CSS is to provide an easy to read method of separating the content on a page from the presentation of that content.When you decide you need to change a style , all you need to do is change the CSS, rather than edit the specific tags on every page of your site.CSS makes it possible to create special effects  so that you get the appearance of programming without actually writing any program to do it.

 Benefits of using CSS3

•  Its easier to maintain a site
• You can  combine several style sheets together to create an overall appearance for a page
• Every browser supports: Font characteristics , Text element characteristics, Color characteristics , Alignment of various elements , Positioning and size of spacing elements such as borders, padding, and margins, Identification and classification of groups of attributes

 Features of newer versions of CSS

• Absolute, relative, and fixed positioning of elements

• z-index to control the stacking of elements on screen so that one element can hide another

• New font effects, such as shadows

• This means than your users will gain access to an application that works anywhere at any time on any platform and using any browser

Look this video:  What is CSS3?

 

How the browser affects your work

The support your browser provides might vary from other browsers

Ensure that your application will work as intended when working with CSS3

1. Use a third-party library that uses special coding techniques
2. Avoid using CSS3 features that dont work with the browsers you plan to target
3. Verify in advance that the users browser provides the required support, and if not, suggest that the user perform an update

TIP: Using well-designed third-party solutions makes your work considerably easier

TIP#2 Use the chart atwww.w3schools.com/cssref/css3_ browsersupport.asp

If users browser is a very OLD browser then you can try to detect it and do anything you can to get their users to upgrade.

CSS Modules benefits

When styles of CCS3 are in a development stage by different browsers developers or standardization teams :

Each module appears in a separate document and details a particular CSS3 feature

You don’t have to seek through a huge document to locate the exact information you need.

Each module can be released independently . Specialized groups can work on each module

It’s easier to obtain agreement on a standard than to obtain the same agreement for CSS3 as a whole.

 Understanding CSS Styles

The best way to start with styles is to view them simply as a means of formatting text (is the most used)

• Open your favorite text editor and make a testing , writing exactly as follows and save the file as test1.HTML:

 

• Its a simple page with only two lines displaying a title and one line. When you open test1.html page with your favorite browser  you will see this:

This text is plain and will appear with your browsers default font . Text is black on a white background.

You can begin to testing css3 with this page to see how to format it differently.

Your can use any text editor you like (not word processors)

But using tools like Geany – one of my favorites – (http://www.geany.org/Download/Releases) will be very usefull  . Advanced editors will display sintax highlight, insert code automatically  and much more.

•  Write this code after <title> tag

 

The <style> tag defines the beginning of a style. When you place the
<style> tag directly in the page like this, it’s called an internal style.
You can also create external style sheets. External style sheets reside in
.CSS files.

Within the style labels , type the following code

The curly braces tell the browser that all of the formatting between them apply will affect the <p> tags in your document.

Within the curly braces, you see attribute name and value pairs

The color attribute specifies a red, green, blue value to use for the font’s color. The value is preceded by a hash (#) followed by hexadecimal
color values from 0 to ff. In this case, the font will be the brightest blue .

Save changes and open it in your favorite browser

You see the effects of the paragraph style changes.

Making externals Styles

A single .CSS file contains all of the styles for the site, which means that changing a style site-wide is as simple as changing that one file (rather than each individual page)

 

The <link> tag tells the browser to look for an external resource and the rel attribute says that it should look for a style sheet and the href attribute provides the name of that style sheet.

Save file and create a new .CSS with your text editor.

Type the followin code inside your .CSS file

this is the same code that you used before but the difference is that it now resides in an external .CSS file.

Save the file.

Remember: filename must match with the name in the href attribute. Linux is case sensitive. Then load the page in the browser . The html page will call the .CSS file to apply the styles in the .html

Finally a summary in a mindmap

PDF Summary mindmap