1 / 13

Introduction to Basic CSS - Lesson 1

An introduction to Cascading Style Sheets. CSS is the acronym for: 'Cascading Style Sheets'. CSS is an extension to basic HTML that allows you to style your web pages.

trainingdevelopment
Download Presentation

Introduction to Basic CSS - Lesson 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Basic CSSLesson 1 Publisher : Attitude Academy

  2. What is CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects. CSS is easy to learn and understand but it provides a powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML

  3. CSS VERSION

  4. EDITOR SOFTWARE DO I NEED? A browser and a simple text editor is all you need. (Example: Adobe Dreamweaver & Notepad)

  5. TYPE OF CSS THERE ARE THREE TYPES OF CSS INLINE CSS APPLY STYLE FOR A SINGLE ELEMENT INTERNAL CSS ADD IN HEAD OF HTML DOCUMENT EXTERNAL CSS IN A SEPARATE FILE

  6. Inline CSS An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. Example Here: <h1 style="color : yellow; font-size:18px; font-weight : bold;"> Property show on browser</h1> PROPERTY SHOW ON BROWSER

  7. Internal CSS This way you are simply placing the CSS code within the <head> </head> tags of each HTML file you want to style with the CSS. The format for this is shown in the example below. Example Here: <head> <style type=”text/css”> CSS Property write there </style> </head>

  8. External CSS An external CSS file can be created with any text or HTML editor such as “Notepad” or “Dreamweaver”. An external style sheet is a separate text file with .CSS extension. You define all the Style rules within this text file and then you can include this file in any HTML document on <head> Section using <link> element. Example Here: <head> <link href=“Path To stylesheet.css” type=”text/css” rel=”stylesheet”/> </head>

  9. By using an external style sheet, your entire HTML files link to one CSS files in order to style the pages. This means, that if you need to alter the design of all your pages, you only need to edit one .css file to make global changes to your entire website. • Here are a few reasons this is better. • (1) Easier Maintenance (2) Reduced File Size • (3) Reduced Bandwidth (4) Improved Flexibility

  10. Click CSS Name You will show page like this

  11. External CSS file save name by style.css. Style is universal name of css Saving file

  12. Add External file on Your Html document (Note: Path Should be Right) Type=“text/css” = Show your written text in css Rel=“stylesheet” = Show your include file relation with stylesheet

  13. Visit Us : Attitude Academy

More Related