CSS Introduction | ||||
---|---|---|---|---|
| ||||
Read Less Gain More | ||||
About : CSS is the acronym for "Cascading Style Sheet",
invented by Håkon Wium Lie on October 10, 1994, is a language that
describes the presentation of an HTML document. Basically it provide decoration & attractive style to web pages. With CSS, the style of fonts, color of the text, tables size, the spacing between paragraphs, background images, colors, layout designs etc. aheived with less efforts, for this CSS is combined with the markup languages HTML or XHTML. | ||||
Benifits of CSS : Reduced page size, Saves a lot of work, Saves time, Easily editable, attractive styles to HTML, Multiple device compatibility, Help in offline browsing, Appropriate with browser standards, Pages load faster, Platform Independence Interface. | ||||
Requirements : Basic knowledge of developing simple Web Pages using
HTML or XHTML.
Simple-text editor, such as Notepad, Editplus, Notepad++ is popular editor among web developers. Download here You can also use our online editor given with each example or Click here | ||||
Three Types of CSS :- What is co-relation between CSS & HTML & how to define style declaration. 1. Internal (Embedded) styles - are defined in the <head> section of the current web page within <style>...</style> elements | ||||
| ||||
2. Inline styles - are defined within the HTML markup of a particular page element by using style=" "
attribute inside opening tag. | ||||
| ||||
3. External styles - are defined on the External Style Sheet, which is linked to the
web page using link tag as <link rel="stylesheet" type="text/css" href="filename.css"> It's defined in the <head> section. | ||||
For this, First of all make a folder say myfolder now you open your notepad++, copy paste the below
given codebody { background-color: yellow; } p { color:blue; }& save the file with .css extention in that folder say example.css. Now again make another file & copy paste below given code & save the file with .html extention in the same folder say example.html. Now minimize notepad and open the saved example.html file by double clicking, it'll automatically open with browser, thats it you have created your first web page with External CSS. | ||||
| ||||
From above style declaration keep in mind, For repeated style or codes use External styles because it is easy to handle / edit. If you need to style once in page but in diffrent tags then use Embedded styles. If you need to style once in tag then use inline styles. | ||||
Tips :- All styles declrations can be used altogether or separatly in a single page. Property value and the unit must be together without space as - p{padding-left:10 px;} is wrong use p{padding-left:10px;} instead. Priority wise Inline style will override a style defined inside the <head> tag, or in an external style sheet. So, an inline style (inside a specific HTML element) has the highest priority |
« CSS Index | Next Page » |