Download to read offline
Uploaded bycompengwaelalahmar
PPTX, PDF10 views
Introduction to CSS.pptx web for web web
This document provides an overview of CSS, explaining its significance, syntax, and various selectors. It discusses the advantages of using CSS, such as improved design efficiency, faster loading times, and better separation of content and presentation. Additionally, it covers how to implement CSS using inline, internal, and external stylesheets, as well as the importance of comments and grouping selectors for better code organization.
Recommended
More Related Content
Similar to Introduction to CSS.pptx web for web web
More from compengwaelalahmar
Recently uploaded
Introduction to CSS.pptx web for web web
- 1.
- 2.Why CSS?• CSSProvides Efficiency in Design and Updates• CSS relatively easy to use• Can give you more flexibility and control• Faster loading pages• Increased consistency• Brings more sophistication to web design• CSS is designed primarily to enable the separationof document content from document presentation.
- 3.Why CSS? (continued)•W3C standard, started in 1996• Improves accessibility– Tables not required for elegance• Reduces the complexity of pages– Which in turn has led to more sophistication…• It’s open up the way for other technologies to bebuilt on and be supported by CSS. There are dozens,and still growing.• Example, “Bootstrap”, which is an open sourceframework that combines CSS, HTML and Javascript
- 4.CSS Overview• CSS(Cascading Style Sheets)• CSS defines HTML display• Styles were added to HTML 4.0 to solve aproblem• External Style Sheets are stored in .css files
- 5.CSS Syntax• Selectors•Declaration• Properties• Values
- 6.Selectors• A “selector”is an instruction in a CSS rule setthat tells the browser what elements to‘select’ for styling.• Here are some that we will look at:– element Selector– id Selector– class Selector– grouping Selectors
- 7.Element or TagSelector• This selector selects tags by tag or “element”name.• This selector must match one or more HTMLelements of the same name.• Easiest to use
- 8.Element Selectorp {text-align:center;color: red;}HTML<p>UAlbany is one of the SUNYcenters.</p>
- 9.ID Selector• TheID selector as a unique identifier to an element.• The id selector is used if you want to select a single,unique element.• CSS uses a hash or pound sign (#) to indicate it’s ID• ID's are unique– IDs in theory, are only supposed to be used once perpage– In other words, a page would not be validate by W3Cstandards.• Anytime we see ID in the computer world, think“unique”.
- 10.The id Selector#text1{text-align: center;color: green;}<h1 id="text1">Think Spring!</h1>
- 11.Class Selector• Thisselector allows you to style contentirrespective of what tag you apply it to• Classes are NOT unique– Use same class on multiple elements.– Use multiple classes on the same element.
- 12.The class Selector.center{text-align: center;color: green;}<h1 class="center">Think Spring!</h1><p class="center">Think Spring!</p>
- 13.CSS Grouping• Whenseveral selectors share the same declarations, they may begrouped into a comma-separated list.• Take thish1 { font-family: sans-serif }h2 { font-family: sans-serif }h3 { font-family: sans-serif }And, do this:h1, h2, h3 { font-family: sans-serif }
- 14.CSS Comments• Aswith other computer languages, CSS allowsfor comments• Comments remind you and tell fellow coderswhat your CSS does• Allows you to “flag” code for further review• Indispensable for large website andprogramming projects
- 15.CSS Commentsh1 {font-size: 24px; font-weight: bold; border: 1px solidblack; color: pink; }/* This will make all <h1>headers big, bold, pink, andinside of a thin blackrectangle! */
- 16.Ways to InsertCSS• Externally• Internally• Inline styles (inside tags)
- 17.Inline Styles• InsertCSS style right within the HTML tag thatyou want to apply them too.• Very quick• However, difficult to maintain• Use sparingly<h1 style="color:blue;margin-left:30px;">Think Spring!</h1>
- 18.Internal (or Embedded)CSS• Placed right on top of the page that it willaffect• As with DTDs, you can internally create astylesheet• They are more convenient for small webpages• Mixing content and style will cause your pagesto become unwieldy over time.
- 19.Internal CSS stylesheet<html><head><styletype="text/css">p {color: white; }body {background-color: black; }</style></head><body><p>White text on a black background!</p></body></html>
- 20.External Stylesheet• Whyuse an external stylesheet?– It keeps your website design and content separate.• CSS code is easier to reuse.• Instead of typing the same CSS code on every webpage you have,• Merely have many pages refer to a single CSS filewith the "link" tag.• You can make massive alterations to your webpages with just a few changes in a single CSS file
- 21.External CSS StylesheetInyour .XSL file, you will link out using thiscommand:<head><link rel="stylesheet" type="text/css" href="mystyle.css“/></head>
- 22.Browsers and CSS3Tobereplaced byproject“Spartan”