আগামী ৩০ অক্টোবর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML,CSS,Bootstrap,PHP,MySQl, AJAX and JQUERY কোর্সের ৮৬ তম ব্যাচ। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722817591, Email : [email protected] কোর্সের সিলেবাস এর জন্য এখানে ক্লিক করুন ।

CSS Basic Part-1

 What we discuss about CSS

We are going to start series of tutorial based on CSS.  We will cover CSS, CSS3 even we discuss here about the proficient use of CSS with SASS and LASS technology. We will cover the technique of cross browser compatibility of CSS and CSS3. We will also cover learning with project basis so that we can create a complete sense of understanding of CSS. I hope you will stay with us.

Definition

Cascading style sheet is a language which is used for describing presentation of a written document in the markup language. It is highly used for styling web pages which is written in HTML, XHTML and HTML5 etc. CSS3 is advanced behavior CSS. It has added new dimension in CSS presentation with its interactivity. CSS3 can add a dynamic look it web document with its multiple interactive behavior.

What is needed to learn CSS LANGUAGE ?

CSS is a presentational language of web document. So, we have to have a fine understanding on HTML, XHTML and HTML5. Because all web document is made with html in web. CSS only adds the presentational behavior in HTML.

CSS Syntax

CSS declaration is consist of two parts 1st is selector and another is declaration

CSS Basic Part-1

Selector is the property of HTML documents that are calls tags. These selectors can be declared by many ways. These declarations could be HTML tags, ID, CSS, Child selector and so on. These selectors are the hook of CSS declaration. The things should be followed that CSS declaration should be wrapped in the curly braces and each declaration should be closed with semicolon.

CSS comment

CSS comments are really an awesome way to work with Team and Future proof Design. Because It helps in future to make it updated. It is also helpful for developer himself because he can easily make any reasonable changes any time following CSS comment.  Even you want to be a Freelance. You will be asked to design CSS with CSS comment. The interesting matter is CSS comment ignored by browsers.

Code goes here

/*This is a comment*/
 p
 {
 text-align:center;
 /*This is another comment*/
 color:black;
 font-family:arial;

CSS CLASS and ID Selector

As I discussed earlier that CSS ID and CLASS are the hook for designing HTML elements. CLASS and ID help to target specific HTML elements. ID only works for specific targeted elements only one time but CLASS is defined for the presentation that multiple times.

Example of ID selector

//CSS

<style>

#para1

{

text-align:center;

color:red;

}

</style>

// HTML

<p id="para1">Hello World!</p>

(ID selector is defined in Style sheet with # sign in the beginning of ID selector declaration. One Class must use one time)

Example of CLASS selector

//CSS

<style>

.para1

{

text-align:center;

color:red;

}

</style>

 

// HTML

<h1>Hello World!</h1>

<p>Hello World!</p>

(CLASS selector is defined in Style sheet with . sign in the beginning of ID selector declaration. One Class can be anywhere anytime.)

  Way to insert CSS style in HTML Document

There are three ways to insert style sheet in HTML documents.

  • External Style Sheet
  • Internal Style Sheet
  • Inline Style

Inline Style:

Inline styles are only declared into HTML Tags. But this method is not appropriate for vast project. This could be time consuming. This method should be followed sparingly. This style is declared with CSS STYLE property in HTML tags.

<p style=”color:#cc;padding:20px”>This is a paragraph.</p>

Internal Style Sheet:

An internal style sheet should be used when a single document has a unique style. But the drawback of Internal Style Sheet is that Internal Style sheet cannot help you to design multiple pages with the same codes. You define internal styles in the head section of an HTML page, by using the <style> tag

<head>
 <style>
 hr {color:sienna;}
 p {margin-left:20px;}
 body {background-color:#ccc;
 </style>
 </head>

External Style Sheet

An external styles sheet is an ideal way to declared style sheet for your vast project. It helps you to use same codes for multiple pages. It reduces development time. External Style sheet is document of Web presentation that links this document in the HTML document in the head section in <link> tag.

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
 </head>

Leave a Reply

Your email address will not be published. Required fields are marked *