Css basic
Download as PPTX, PDF0 likes382 views
CSS (Cascading Style Sheets) is used to describe the presentation and formatting of HTML elements on web pages. CSS allows separation of document structure (HTML) from presentation (CSS), and can control layout, colors, fonts and other aspects of visual presentation. There are three main ways to attach CSS styles to HTML - external stylesheets, internal stylesheets, and inline styles. CSS rules consist of selectors that specify the element(s) targeted and a declaration block that contains properties to style the element.
Css basic
- 1. CSS for Styling HTML Contents CS380 1
- 2. Cascading Style Sheets (CSS) CSS use to describes the appearance, layout, and presentation of information on a web page CSS Advantages: 2 •Separates structure from presentation •Provides advanced control of presentation •Easy maintenance of multiple pages •Faster page loading •Better accessibility for disabled users •Easy to learn
- 3. Basic CSS rule syntax A CSS file consists of one or more rules Each rule starts with a selector A selector specifies an HTML element(s) and then applies style properties to them 3 SYNTAX to Write CSS= selector { property: value; ... property: value; } CSS Example=== p { font-family: sans-serif; color: red; }
- 4. Types of CSS or Attaching a Style Sheet Attach a style sheet to a page by adding the code to the <head> section of the HTML page. There are 3 ways to attach CSS to a page: 1. External Style Sheet: Best used to control styling on multiple pages. <link rel="stylesheet" type="text/css" media="all" href="css/styles.css" /> 2. Internal Style Sheet: Best used to control styling on one page. <style type=“text/css”> h1 {color: red) </style> 3. Inline Style Sheet*: CSS is not attached in the <header> but is used directly within HTML tags. <p style=“color: red”>Some Text</p>
- 5. Types of CSS- External CSS A page can link to multiple style sheet file. It uses Two fils-1 .CSS and 2. .HTML 5 P{color:red;} style.CSS <head> <link href="style.css" rel="stylesheet" /></head> <body><p>This is External CSS</p> .HTML CS380
- 6. Internal CSS: It apply on Single Page. It uses <style> Tag in <head> and </head>. 6 <head> <style> p { font-family: arial; color: red; } h2 { background-color: yellow; } </style> </head> <body><h1>Internal CSS</h1> <p>This is Internal CSS</p></body> HTML CS380
- 7. Inline styles: the style attribute It apply on single line of HTML code. It uses style as attribute. Higher precedence than internal or external CSS styles 7 <p style="font-family: chiller; color: red;"> This is a paragraph</p> HTML CS380
- 8. CSS properties for colors 8 p { color: red; background-color: yellow; } CSS CS380 This paragraph uses the style above output property description color color of the element's text background-color color that will appear behind the element
- 9. CSS comments /*…*/ 9 /* This is a comment. It can span many lines in the CSS file. */ p { color: red; background-color: aqua; } CSS CSS (like HTML) is usually not commented as rigorously as programming languages such as Java The // single-line comment style is NOT supported in CSS The <!-- ... --> HTML comment style is also NOT supported in CSS CS380
- 10. CSS properties for fonts property description font-family which font will be used font-size how large the letters will be drawn font-style used to enable/disable italic style font-weight used to enable/disable bold style CS380 10 <html> <head><style> p { font-family :chiller; font-size :20px; font-style :italic; font-weight :bold } </style></head><body> <p> This text formatted with font properties</p></body></html Example:
- 11. CSS properties for text property description text-align alignment of text within its element text-decoration decorations such as underlining line-height, word-spacing, letter-spacing gaps between the various portions of the text text-indent indents the first letter of each paragraph CS380 11
- 12. Example CS380 12 <html> <head><style> p { line-height:12px; Text-align: center; Text-decoration:Overline; Text-transform: uppercase; word-spacing:20px; letter-spacing:30px; } </style></head><body> <p> This text formatted with text properties</p></body></html Example:
- 13. CSS properties for backgrounds property description background-color color to fill background background-image image to place in background background-position placement of bg image within element background-repeat whether/how bg image should be repeated CS380 13
- 14. Example: CS380 14 <html> <head><style> body{ background-color:red; Background-image:url(image1.jpg); background-position:right; Background-repeat:no-repeat; Background-size: 200px 300px; } </style></head><body> <p> This page formatted with background properties</p></body></html
- 15. CSS Box Model Properties: CS380 15 property description height To Change height of Section. width To Change width of Section. margin Use to define margin space along with four side Padding Use to define space along with four side between border and content. Border Use to define border around content
- 16. Example: CS380 16 <html> <head><style> div{ Hight:300px; Width:300px; Border: solid 20px red; Margin-left:50px; Padding:30px; //apply to for side } </style></head><body> <div> <p> This section formatted with box model properties</p></div></body></html