Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/swtutori/public_html/tecwallet.com/header_footer_.php on line 4
Learn CSS - by Deep - Tecwallet

Home » Tutorial » Learn CSS - by Deep

Learn CSS - by Deep Sukhwani

If you are subscribed user, I will answer any of your query related to this course with in 24 hrs.

•CSS (which stands for Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML.

•A style sheet is a file that describes how an HTML file should look. That's it!

•We say these style sheets are cascading because the sheets can apply formatting when more than one style applies. As an example, if you say all text inside body tag should have red font, but you specifically select one heading to have blue font, CSS can do that! (More about that later!)

Tutorial Topics
Leaderboard

Tutorial Topics

What is CSS Preview

Open Close

•CSS (which stands for Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML.

•A style sheet is a file that describes how an HTML file should look. That's it!

•We say these style sheets are cascading because the sheets can apply formatting when more than one style applies. As an example, if you say all text inside body tag should have red font, but you specifically select one heading to have blue font, CSS can do that! (More about that later!)

Why use CSS Preview

Open Close

•Now there are a few reasons why you should use CSS to maintain the formatting of your content (present in HTML file usually):

•You can apply the same formatting to several HTML elements without rewriting code (e.g. style="color:red” ) over and over

•You can apply similar appearance and formatting to several HTML pages from a single CSS file. This in turn allows you to maintain style and format consistency across all your HTML webpages without you having to worry about remembering them every time.

•Inline styling (e.g. <p style="color:red">Red font!</p> ) as we saw earlier in HTML tutorials can be cumbersome when you have to style lots of content as it requires you to put style tag across each tag and changing it can be even more tedious. CSS on the other hand allows you to control all this just with a single CSS file.

•Lets see a working example of this…

How to use CSS ?

Open Close

There are two ways to put CSS in one place.

1.This first is to put your CSS between tags, in the same file as your HTML. These

CSS Syntax

Open Close

•CSS Syntax is a little different from HTML, however its easy enough to be able to pick it up quickly.

•The general format looks like:

selector {

property: value;

}

A selector can be any HTML element, such as > <img> or <table>. You just take off the angular brackets ( <> ) !

A property is an aspect of a selector. For instance, you can change the font-family, color, and font-size of the text on your web pages. These are called properties.

A value is a possible setting for a property. color can be black, green, red or almost any color include hex values; font-family can be anything from a huge list of available and supported fonts and so on for other properties like font-size, etc.

Each property-value must be ended with a semicolon ( ; ). Semicolon tells CSS that you are done with one pair of property-value.

CSS Selectors and Properties

Open Close

•Lets practice some CSS Selectors and Properties and see how you can quickly style a large content just by writing few lines of code.

•I encourage you to pause the video here and try it yourself.

•Enough of talking, lets actually get our hands dirty with some actual CSS code.

•Don’t forget to pause the video and try it yourself. Its really essential for learning…. All the best.

Comments in CSS

Open Close

•Comments are a really great way to tell users of your CSS code or in general any code file anything that you might want to tell them. They allow you to convey your message clearly.

•In fact, at various occasions comments can also be used to remind something to yourself, say for example: you return back to a code file 2 months later, and you have no clue why you put that line of code in there, you can leave a comment for yourself explaining the reason for that line of code.

•To add comments in your CSS file, use the syntax: /I'm a comment!/

•Computer doesn’t look at comments and they are solely for humans to read. However writing good comments is a very helpful habit that you must pick at early stage of your development career.

CSS Color Property

Open Close

•Lets see how we can use Hex values for color property.

•Hex values are case insensitive and there can be millions of colors for different combinations of numbers and alphabets.

•Hex values start with a pound ( # ) sign.

•Lets see some….

CSS Property-font-size

Open Close

•A pixel is a dot on your computer screen. Specifying font sizes in pixels is great when you want the user to see exactly on their screen what you designed on yours, though it assumes your screens are of similar size.

•If the user’s screen is of different size than yours, which is normally the case, in such a scenario using em as font-size unit is a better idea.

•em is a relative measure, one em equals the default font-size on whatever screen is user is using to view your HTML content.

•In real life scenarios, you will notice, em are instead of px because there are wide variety of screen sizes and devices that the user might use to view content on the internet.

•Lets see some….

CSS Property-font-family

Open Close

•Different computers might have different built-in fonts, like Verdana, Arial, Courier, Garamond, etc.

•However, CSS has some built-in defaults meant to ensure your users see what you intend. They are:

•serif: A font with little decorative bits on the ends of the strokes that make up letters.

•sans-serif: A plain-looking font.

•cursive: It looks like cursive writing.

•Also, you can tell CSS to try several fonts, e.g.: font-family: Courier, Arial, sans-serif; CSS will first try to apply Courier to your paragraph. If the user’s computer doesn’t have that, it will try Arial. If even that doesn’t exist, it will shift to sans-serif which is built into CSS.

•Lets see some….

CSS Property-Creating div Blocks

Open Close

•Lets start creating a div element and than giving it some height, width and background color to make it appear in the browser as a solid color block

•We will do all this using our CSS knowledge so far.

CSS Property-border

Open Close

•In HTML we learnt about adding tables using <table> tag.

•Now lets add borders to those tables using border property of CSS.

CSS Property-text-decoration

Open Close

•Links have a lot of the same properties as regular text: you can change their font, color, size, and so on.

•But links also have a property, text-decoration, that you can change to make your links stand out from the crowd!

•Lets check it out…

Featured Courses

,HTML5,CSS,JAVASCRIPT,PHP,MySQL,

,HTML,JAVASCRIPT,CSS,PHP,MySQL,

,HTML,JAVASCRIPT,CSS,PHP,MySQL,

,UI/UX,HTML,JAVASCRIPT,CSS,JQUERY,

,HTML,JAVASCRIPT,CSS,PHP,MySQL,

Leaderboard

Rank Score Time Taken (h:m:s) Student

Comments ( To Post Your Comment Please Login First! )

$10

Organiser : Web Development Tutorials
Category : CSS

Other Benifits :

Placement Assistance

Subscribe Contact Tutor

Web Development Tutorials
(18)

Biography
Enrolled Students : 0

Web Developer by profession and teaching is my passion.

Create account

Purpose : Teach Learn Recruiter Partner

OR

Sign In

Forgot password? Create account

OR

Subscribe to Tecwallet

New Features Course Updates Job Updates Deals

Quick links

Home

Courses

Blog

Partner Dashboard

FAQ

About us

Contact

Sitemap

Privacy Policy

Contact information
support@tecwallet.com
Phone : +91-9468472070

Headquarter : 1201 Orange St. #600 , Wilmington, Delaware 19899

Development office : F-121 sector-10 D.L.F Faridabad, Haryana 121006

Monthly Newsletter

© 2015-20 Tecwallet

Copyright 2016-17 © TecWallet