Intro to CSS
•Download as PPTX, PDF•
2 likes•120 views
Explains why, when and how to use CSS for web site design with a brief intro to Bootstrap as a CSS framework.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Intro to CSS
Similar to Intro to CSS (20)
Recently uploaded
Recently uploaded (20)
Intro to CSS
- 1. INTRO TO CSS With Theo Crithary
- 2. A BIT OF HISTORY • Cascading Style Sheets were created to remove HTML style tags and attributes from web pages • HTML was never intended to contain tags for formatting • CSS1 was first published in Dec 1996 • Current standard is CSS3, first draft in 1999
- 3. HTML = STRUCTURE, CSS = STYLE, JAVASCRIPT = CONTROL
- 4. STYLE SHEET TYPES Inline CSS Embedded style inside of HTML tags <h1 style="color:blue;margin- left:30px;">This is a heading</h1> Internal CSS Styles defined within the <head> tag at the top of HTML web page <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> External CSS External .css file that can be used by many web pages <head> <link rel="stylesheet" type="text/css" hre f="mystyle.css"> </head>
- 5. EXAMPLE EXTERNAL CSS FILE body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }
- 6. ELEMENT TYPES ID’s must be unique HTML Code: <h2 id=“menuHeading”>Menu</h2> CSS Code: #menuHeading { color: blue } Classes are used many times HTML Code: <p class=“menuItem”>Home</p> CSS Code: .menuItem { color: lightblue }
- 7. CSS FRAMEWORKS • CSS frameworks include; Foundation, Blueprint, Bootstrap, Cascade Framework and Materialize • Frameworks are libraries of pre-prepared styles that make web development easy and fast • They include things like cross browser compatibility, mobile first styles, responsive pages to adjust to any device, etc…..
- 8. BOOTSTRAP • Most widely used and supported CSS framework • Easy to add to any web page: getbootstrap.com <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384- BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
- 9. MOBILE FIRST Add this to your <head> <meta name="viewport" content="width=device-width, initial-scale=1">
- 10. RESPONSIVE DESIGN • Bootstrap uses a grid system to react to screen sizes and re-arrange columns automatically as required
- 11. EXAMPLE <div class="row"> <div class="col-sm-12">Top Menu</div> </div> <div class="row"> <div class="col-sm-4">Left Menu</div> <div class="col-sm-8">Main Body</div> </div>