What is 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 of css
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.
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
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
CSS CLASS and ID:
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.
ID selector
3 | <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
(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
5 | body {background-color:#ccc; |
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.
2 | <link rel="stylesheet" type="text/css" href="style.css"> |
0 comments:
Post a Comment