DOCSLIB.ORG

Using Cascading Style Sheets (CSS) Technology

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Using Cascading Style Sheets (CSS) Technology 2Lesson 2: Using Cascading Style Sheets (CSS) Technology Objectives By the end of this lesson, you will be able to: 2.1: Explain the function and purpose of the Cascading Style Sheets (CSS) technology. 2.2: Explain the importance of using style guides when designing sites and documents. 2.3: Define common CSS terms and syntax. 2.4: Apply CSS styles to format pages. 2.5: Develop and apply page layouts with CSS. 2.6: Use CSS to position content and apply document flow. 2.7: Define common CSS positioning schemes. 2.8: Use the CSS Box Model. 2-2 Advanced HTML5 and CSS3 Specialist Pre-Assessment Questions 1. In CSS, what is the name for a selector, property and value all grouped together? a. Declaration b. Tag c. Structure d. Rule 2. In a CSS style sheet, which of the following determines the image behind the contents of a page? a. The background-image property b. The background attribute of the <body> tag c. The background-image selector in the <body> tag d. The img property 3. What is liquid layout? © 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 Lesson 2: Using Cascading Style Sheets (CSS) Technology 2-3 Cascading Style Sheets (CSS) OBJECTIVE As a Web designer, you know that there is more to creating a good Web page than posting 2.1: CSS technology good written content and images. Most users have multiple sites to choose from when they are searching the Web for something, whether it is information, entertainment or products. If several reputable sites offer the same content and are easy to use, then which one will users prefer? Quite often, it will be the one that looks the best. Cascading Style Cascading Style Sheets (CSS) is a Web design technology that enables developers to Sheets (CSS) A W3C language for determine how the HTML elements in their Web pages will display, giving a page or entire applying structure site a particular "look and feel." and formatting instructions to HTML CSS instructions can be: pages and other markup language documents. • Applied inline to individual HTML elements on an HTML page. • Embedded within an HTML page to affect all specified elements on that page. • Collected in an external file that is linked to multiple HTML pages. ® CIW Online Resources – Movie Clips Visit CIW Online at http://education.Certification-Partners.com/CIW to watch a movie clip about this topic. Lesson 2: Using Cascading Style Sheets (CSS) Technology External style sheets An external CSS file, or style sheet, is a text file that contains CSS formatting instructions to define the font, color and position of elements used on any markup page(s) to which you attach the style sheet. NOTE: CSS benefits include: Have you experienced any • Consistency — CSS easily gives an entire site a consistent look and feel. benefits from using CSS in your past • projects? How has Easy change management — You have the ability to change the look and feel of an CSS helped you? Do entire site by simply changing one part of a single line of code, rather than having to you think it is change possibly thousands of lines in hundreds of Web pages. absolutely necessary? Are If all pages on your site are linked to the same external style sheet, then one simple there situations when it is not change to the style sheet will change all associated elements across the site. For example, necessary? if you want to change your <h1> heading styles, you do not need to change every page manually. Simply change one line in a style sheet file attached to all your pages, and then all your <h1> headings will change their appearance to conform to the style sheet. This technology can save a great deal of development and maintenance time, as well as provide a more consistent, accessible interface for your Web site. Style Guides OBJECTIVE A style guide or style manual is a set of standards for the writing and/or design of 2.2: Style guides documents, either for general use or for a specific publication, organization or field. Implementing a style guide provides uniformity in style and formatting within a document and across multiple documents. © 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 2-4 Advanced HTML5 and CSS3 Specialist Style guides are common for general and specialized use, especially for those who write, edit and/or design documents in the following fields: • Various academic disciplines (both students and scholars) • Journalism • Technology • Medicine • Law • Government • Business and industry Some organizations follow a CSS style guide to define the CSS formatting to be used for all Web documents across the organization. It defines styles such as the page layout, font sizes, colors, and image placement for Web sites. Following a CSS style guide creates consistency in appearance for an organization's communications. Many companies create their own CSS Style Guides and some even share them with other organizations (Figure 2-1). Google and WordPress make them available to the public: • Google HTML/CSS Style Guide (http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml) • WordPress CSS Coding Standards (http://make.wordpress.org/core/handbook/coding-standards/css/) Figure 2-1: Google CSS style guide Following are some examples of guidelines and tips from the Google HTML/CSS Style Guide: • Be consistent — When editing existing code, for example, match the written code style (spacing, comment use, etc.). If code that you add to a file looks drastically different from the existing code around it, other users of the code can become distracted or even confused. The purpose of style guidelines is to provide a common vocabulary for coding. Global style rules are helpful in general, but local style (dictated by your organization) is also important. © 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 Lesson 2: Using Cascading Style Sheets (CSS) Technology 2-5 • Capitalization — Use only lowercase letters for your code, including HTML element names, attributes, attribute values, CSS selectors, properties and property values. • Declaration order — In a style sheet, alphabetize your declarations to create consistent code that is easy to remember, search and maintain. For example: background: fuchsia; border: 1px solid; border-radius: 4px; color: black; text-align: center; text-indent: 2em; CSS and HTML CSS was created to solve a problem with HTML. The developers of HTML intended it to identify only the content and structure of a document, such as <title> and <body>, not the style, look and feel of the content. Before style sheets, the HTML standard introduced many style elements that quickly complicated the language. Developers had to check each page of a Web site to ensure it had the correct HTML style tags for each element. Imagine the time and difficultly involved with this task. To save developers from many headaches, the W3C quickly went into action and standardized CSS, which greatly simplifies the definition and use of styles. Today a style, such as a background color or image, can be added to all Web pages with one change to an external CSS file. CSS versions Currently, three standards exist for style sheets: • Cascading Style Sheets (CSS1) — governs the basic structure of style sheets. • Cascading Style Sheets 2 (CSS2) — adds more capabilities to the CSS1 specification, including the ability to support media types (such as specific printers) and work with tables. NOTE: • Cascading Style Sheets 3 (CSS3) — provides a modularized standard so that when Remember that changes must be made to a style, only a particular module within CSS3 will need to HTML5, CSS3 and JavaScript are be updated, rather than the entire standard. This will allow for a more flexible and considered the timely upgrade of the CSS standard as a whole. New functions are being added to future of Web development as CSS3 to enhance its support of borders, backgrounds, colors, text effects and so mobile devices forth. continue to proliferate. HTML5 adopts CSS as the preferred way to format a page. The CSS standard has evolved over the years and continues to build upon itself. For instance, HTML 4.01 and XHTML 1.0 used CSS1 and CSS2. HTML5 uses CSS1, CSS2 and CSS3. Any given Web page may include CSS rules from all three versions. HTML5, CSS and legacy browsers Because CSS3 contains the latest instructions, most non-HTML5-compliant browsers cannot interpret it. Most of the basic Web page formatting uses CSS1 and CSS2. CSS3 provides advanced features to extend a Web page’s functionality beyond basic formatting. HTML5 is not supported by Internet Explorer 8 or earlier. This is a challenge because Windows XP cannot run IE9, which is the first Internet Explorer version that supports © 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 2-6 Advanced HTML5 and CSS3 Specialist HTML5. The simple solution is to install the latest version of the Chrome or Firefox browser on Windows XP or Vista systems. But what about your site visitors? You cannot force them to install Chrome or Firefox. They may be using IE8, 7 or 6. The only way to support these older IE browsers is to add JavaScript code to your HTML documents and a new rule to CSS. Because older IE browsers will not recognize the new HTML5 elements (such as <header>, <footer>, <article>, etc.), you must use JavaScript to create these elements in your Web pages so that older IE browsers will recognize them. This requires several steps, as follows. NOTE: You can try coding HTML5 document additions for older IE browsers a page to support At a minimum, you should create the basic HTML5 structural elements by adding the legacy browsers in following JavaScript in the <head> element: Optional Lab 2-1: Supporting legacy browsers.
Load more

Recommended publications
  • Introduction to HTML/CSS/SVG/D3
    D3 Tutorial Introduction of Basic Components: HTML, CSS, SVG, and JavaScript D3.js Setup Edit by Jiayi Xu and Han-Wei SHen, THe OHio State University HTML - Hyper Text Markup Language • HTML is the standard markup language for creating Web pages • HTML describes the structure of Web pages using markup • HTML elements • HTML elements are the building blocks of HTML pages • represented by tags • Tags • HTML tags label pieces of content such as • <head> tag for “heading” • <p> for “paragraph” • <table> for “table” and so on • Browsers do not display the HTML tags, but use them to render the content of the page HTML - Plain Text • If we display the information only by plain text HTML Basics HTML is designed for marking up text by adding tags such as <p> to create HTML elements. Example image: HTML - Codes and the Result HTML - DOM • When a web page is loaded, the browser creates a Document Object Model of the page • The HTML DOM model is constructed as a tree of Objects HTML - DOM Document Root element: <html> Element: Element: <head> <body> Element: Element: Element: Element: <p> Element: <p> <title> <h1> <img> "to create Text: "HTML Text: "HTML Element "is designed Element: "by adding Element Element: Attribute: Attribute: HTML Tutorial" Basics" <strong> for" <em> tags such as" <code> <strong> "src" "style" elements. " "marking up “Example "HTML" "<p>" text" image” HTML - DOM • With the object model, JavaScript can create dynamic HTML by manipulating the objects: • JavaScript can change all the HTML elements in the page • Change all the
    [Show full text]
  • 5 Parts 3 Ways to Include CSS CSS Rule Color Model Font CSS Box
    Border-style: solid/douBle min-height, max-height, height CSS3 Border-color width: 1000% loat, clear cornerstone Border-width (create arrow) text-align (left, justify, right) 5 parts Border-image overPlow, overPlow-x, overPlow-y 1. Page layout Border-radius (circle, eclipse, prove) visible, hidden, scroll, auto 2. Element styles Page layout 3. Element position Examples of Block, inline, inline-block overPlow for Ploat child cornerstone loat, inline-block cornerstone 4. Responsive design elements column-count, column-gap 5. Animation Box-shadow display cornerstone CSS selectors 3 ways to include CSS inline, inline-block, Block, none list-style Syntax examples: Inline / Embedded / External Border-collapse (for taBle) *, tag, #id, .class default width/height for each type background image s1, s2 (select all s1 and all s2) set width/height for each type background-image: url(…) s1 s2, s1>s2, s1+s1, s1~s2 CSS rule visibility Background-image: url(…), url(…) [att], [attr=”val”] Selector, Property, Value :active, :focus, :hover, Box-sizing cornerstone background-repeat:no-repeat ::after, ::before Color model Background-repeat:no-repeat, repeat :required, color How margin and padding work for Background-position :Pirst-child, :last-child, Background-color: linear-gradient(to inline, inline-block and Block elements top, right, Bottom, left :nth-child(n), :nth-last-child(n) Bottom right, red, Blue) center ::Pirst-letter, ::Pirst-line, :root rgB,rgba,hex,hsl,name How margin works when set width :not(selector) Background-size opacity margin: collapse, negative auto, cover, contain CSS speciPicity Element styles Background-attachment 1. !important > inline style > id Font scroll, local, ixed selector > pseudo class > class or font-family (5 basic fonts, typography) cursor attribute selector > tag font-size (px, %, em, rem) outline 2.
    [Show full text]
  • Understand the CSS Box Model
    Concordia University SOEN 287: Web Programming 1 – Winter 2016 Assignment 2 ______________________________________________________________________________ Due Date: By 11:55pm Sunday February 14, 2016 Evaluation: 4% of final mark Late Submission: none accepted Type: Individual Assignment Purpose: The purpose of this assignment is to have you practice cascade style sheets and HTML5 tags. CEAB Attributes: This assignments is primarily evaluating your use of the CSS and the HTML5 tags (Use of engineering tools) ______________________________________________________________________________ Exercise 1: Understand the CSS box model The image below illustrates the CSS box model: Figure 1. The CSS Box Model Please use the <div> to implement a page illustrated below. 1) You can use any color combinations for the border and the background; 2) you can decide the width of the paragraph in the border; 3) when you resize the browser window, the text are automatically wrapped. Figure 2. A sample page Exercise 2: Pseudo Class Selector and Navigation Bar Use <list> to create a vertical “navigation bar”. “Home” is the current page (active), with a green background color and a white text. The other non-active items have a grey background and a white text. When mouse is over a non-active item, the text changes to white with black background. Figure 3 is a demo. Figure 3. A sample page of navigation bar Exercise 3 On a single HTML page, include the following two div container elements in the body. Using an external style sheet, add style to the div elements such that one div has some overlap with the second div (Hint: make use of relative or absolute positioning).
    [Show full text]
  • Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
    Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification W3C Recommendation 07 June 2011, edited in place 12 April 2016 to point to new work This version: http://www.w3.org/TR/2011/REC-CSS2-20110607 Latest version: http://www.w3.org/TR/CSS2 Previous versions: http://www.w3.org/TR/2011/PR-CSS2-20110412 http://www.w3.org/TR/2008/REC-CSS2-20080411/ Latest editor's draft: http://dev.w3.org/csswg/css2/ Editors: Bert Bos <BERT @w3.org> Tantek Çelik <TANTEK @cs.stanford.edu> Ian Hickson <IAN @hixie.ch> Håkon Wium Lie <HOWCOME @opera.com> Please refer to the errata for this document. This document is also available in these non-normative formats: plain text, gzip'ed tar file, zip file, gzip'ed PostScript, PDF. See also translations. Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C LIABILITY, TRADEMARK AND DOCUMENT USE rules apply. Abstract This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spac- ing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance. CSS 2.1 builds on CSS2 [CSS2] p. 284 which builds on CSS1 [CSS1] p. 283. It supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. It also sup- ports content positioning, table layout, features for internationalization and some properties related to user interface.
    [Show full text]
  • HTML5 and CSS3 Illustrated
    HTML5 and CSS3 Illustrated Unit H: Implementing Page Layout with HTML and CSS Objectives Assess the CSS box model Construct a multicolumn layout with float Implement relative positioning Implement absolute positioning HTML 5 and CSS 3 – Illustrated Complete 2 Objectives (continued) Stack elements Create a multicolumn layout using positioning Create a fluid layout Control the visibility of elements HTML 5 and CSS 3 – Illustrated Complete 3 Assessing the CSS Box Model Box model: used by CSS to represent characteristics of every Web page element Ø Treats element as rectangular box Border: border surrounding element Margin: space from border to neighboring/parent element Padding: space between border and element content HTML 5 and CSS 3 – Illustrated Complete 4 Assessing the CSS Box Model (continued) Size of padding, margin, and border increase the amount of space occupied by an element Ø Dimensions of these properties not included in specified width / height • Specified width and height refer only to the content of an element When fitting elements into limited space, subtract padding, margin, and border area to get width or height HTML 5 and CSS 3 – Illustrated Complete 5 Assessing the CSS Box Model (continued) When bottom margin of one element is adjacent to top margin of another, the margins combine to the size of the larger of the two Ø Affects element size planning Separate property for each side of padding and margin Ø e.g., padding-top:2px; margin-right:1em; HTML 5 and CSS 3 – Illustrated Complete 6 Assessing the CSS Box Model (continued) Can set a common value using generic property Ø e.g., padding:0; Can use shorthand to set different values.
    [Show full text]
  • Learning XML.Pdf
    Learning XML Erik T. Ray First Edition, January 2001 ISBN: 0-59600-046-4, 368 pages XML (Extensible Markup Language) is a flexible way to create "self-describing data" - and to share both the format and the data on the World Wide Web, intranets, and elsewhere. In Learning XML, the author explains XML and its capabilities succinctly and professionally, with references to real-life projects and other cogent examples. Learning XML shows the purpose of XML markup itself, the CSS and XSL styling languages, and the XLink and XPointer specifications for creating rich link structures. Release Team[oR] 2001 Preface 1 What's Inside Style Conventions Examples Comments and Questions Acknowledgments 1 Introduction 5 1.1 What Is XML ? 1.2 Origins of XML 1.3 Goals of XML 1.4 XML Today 1.5 Creating Documents 1.6 Viewing XML 1.7 Testing XML 1.8 Transformation 2 Markup and Core Concepts 25 2.1 The Anatomy of a Document 2.2 Elements: The Building Blocks of XML 2.3 Attributes: More Muscle for Elements 2.4 Namespaces: Expanding Your Vocabulary 2.5 Entities: Placeholders for Content 2.6 Miscellaneous Markup 2.7 Well-Formed Documents 2.8 Getting the Most out of Markup 2.9 XML Application: DocBook 3 Connecting Resources with Links 60 3.1 Introduction 3.2 Specifying Resources 3.3 XPointer: An XML Tree Climber 3.4 An Introduction to XLinks 3.5 XML Application: XHTML 4 Presentation: Creating the End Product 88 4.1 Why Stylesheets? 4.2 An Overview of CSS 4.3 Rules 4.4 Properties 4.5 A Practical Example 5 Document Models: A Higher Level of Control 119 5.1 Modeling
    [Show full text]
  • IT2353 WEB TECHNOLOGY SCE Department of Information
    IT2353 WEB TECHNOLOGY A Course Material on Web Technology By Mrs.S.SHARMILA ASSISTANT PROFESSOR DEPARTMENT OF INFORMATION TECHNOLOGY SASURIE COLLEGE OF ENGINEERING VIJAYAMANGALAM – 638 056 SCE Department of Information Technology IT2353 WEB TECHNOLOGY QUALITY CERTIFICATE This is to certify that the e-course material Subject Code : IT2353 Subject : Web Technology Class : III Year IT being prepared by me and it meets the knowledge requirement of the university curriculum. Signature of the Author Name: S.SHARMILA Designation: AP/IT This is to certify that the course material being prepared by Mrs.S.SHARMILA is of adequate quality. She has referred more than five books amount them minimum one is from aboard author. Signature of HD Name: S.ASHOK KUMAR SEAL SCE Department of Information Technology IT2353 WEB TECHNOLOGY IT2353 WEB TECHNOLOGY SYLLABUS UNIT I 9 Web Essentials: Clients, Servers, and Communication. The Internet-Basic Internet Protocols The World Wide Web-HTTP request message-response message-Web Clients Web Servers-Case Study. Markup Languages: XHTML.An Introduction to HTML History-Versions-Basic XHTML Syntax and Semantics-Some Fundamental HTML Elements-Relative URLs-Lists-tables-Frames- Forms-XML Creating HTML Documents CaseStudy. UNIT II 9 Style Sheets: CSS-Introduction to Cascading Style Sheets-Features-Core Syntax-Style Sheets and HTML Style Rle Cascading and Inheritance-Text Properties-Box Model Normal Flow Box Layout-Beyond the Normal Flow-Other Properties-Case Study. Client- Side Programming: The JavaScript Language-History and Versions Introduction JavaScript in Perspective-Syntax Variables and Data Types-Statements-Operators- Literals-Functions-Objects-Arrays-Built-in Objects-JavaScript Debuggers. UNIT III 9 Host Objects : Browsers and the DOM-Introduction to the Document Object Model DOM History and Levels-Intrinsic Event Handling-Modifying Element Style-The Document Tree- DOM Event Handling-Accommodating Noncompliant Browsers Properties of window-Case Study.
    [Show full text]
  • Javascript, HTML and CSS Web Development CODICE MOC40410 DURATA 2 Gg PREZZO 700,00 € EXAM
    JavaScript, HTML and CSS Web Development CODICE MOC40410 DURATA 2 gg PREZZO 700,00 € EXAM DESCRIZIONE This course introduces HTML, JavaScript and CSS as programming and markup languages that are used to create web applications. The learner will gain experience with each language individually and then combine them together to create compelling web application solutions. The learner will have an opportunity to use Visual Studio Code on their operating system of choice to create and test their web applications. This course teaches basic tasks that are necessary to create web applications with a strong semantic structure, re-usable style components and custom interactive features. This course includes hands-on labs that enables the learner to build basic HTML pages that are the components of a web application used to solve real world problems. OBIETTIVI RAGGIUNTI • Explore the historical context and justification for HTML • Create HTML5 documents • Use HTML elements to add content to a HTML page • User hyperlinks to connect various HTML pages together • Capture user input using forms • Create content using HTML5 semantic elements • Create SVG Graphics • Create CSS stylesheets • Author sophisticated CSS rule sets and selectors • Lay out HTML elements using CSS margin and padding • Implement program logic using JavaScript • Leverage HTML5 APIs using JavaScript • Implement advanced web applications using jQuery, AngularJS, Bootstrap, TypeScript or Sass TARGET The target audience for this training course is individuals who are interested in learning about the core skills necessary for web development. This course is intended for individuals of all levels. Some light experience Pagina 1 di 4 with software development is helpful but not necessary.
    [Show full text]
  • The CSS Box Model
    The CSS Box Model Practical Exercises Overview The CSS Box Model is fundamental to understanding how to use the range of page layout tools that CSS has to offer. By treating all page elements as boxes with dimensions, borders, padding, margins and position, CSS allows the page to be broken down into layout components which may be independent of the content they contain. Information At the end of these tasks you should be able to: Apply borders, margins and padding to elements in an HTML page Centre content in a web page using CSS Use box properties to format other HTML element What you will need to use these materials You only need a text-file editor and a current web browser to start adding CSS to XHTML documents. The exact type(s) and version(s) available to you will depend on your local set up. Common operating system default editors are Notepad (Windows) and TextEdit (MacOSX) and Gedit (Linux). Suitable web browsers include Mozilla Firefox, Google Chrome, Apple Safari and Microsoft Internet Explorer. © Copyright information and licensing This material from JISC Netskills Share is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. http://creativecommons.org/licenses/by-nc-sa/3.0/ You are free to download, embed, adapt and share this material within the terms of that license. Find out more at: http://www.netskills.ac.uk/share Contents 1. Getting Started 4 2. The CSS Box Model 6 3. Margins 9 4. Width and Centring Content 11 5. Borders 15 6. Padding 17 7.
    [Show full text]
  • Web for Everyone Web on Everything Knowledge Base Trust And
    newsletter http://www.w3c.nl Nieuwsbrief maart 2012 Editorial Al jarenlang pleit W3C en met name Tim Bernes Lee voor het openbaar maken van gegevens via Edithet web. Steeds meer overheden geven gehoor aan deze oproep en stellen Open Data via het web beschikbaar. "Onze" vicevoorzitter van de Europese Commissie Neelie Kroes noemt drie redenen waarom open data belangrijk is: het bevordert de ontwikkeling van nieuwe bedrijven, bevordert transparantie van de overheid en leidt tot meer evidence-based beleid. In juni zal een workshop plaatsvinden waar de aandacht gericht is op het gebruik van al deze gegevens (zie "W3C Workshop - Using Open Data: policy modeling, citizen empowerment, data journalism"). Via het web vindt veel uitwisseling van media plaats. Vaak is dat in de vorm van video. Niet altijd is daarbij het gehele bestand nodig, maar is er interesse in slechts een deel van het mediabestand. Media files zijn in het algemeen grote tot zeer grote bestanden. Door fragmenten daarvan aan te kunnen vragen wordt de interactiviteit van applicaties verbeterd en het dataverkeer efficiënt gebruikt (zie "Call for Review: Media Fragments URI 1.0 (basic)"). De komende maand vindt, dit keer in Lyon, de jaarlijkse World Wide Web conferentie plaats. Uiteraard een aanrader voor iedereen die professioneel of vanuit persoonlijke belangstelling met het web te maken heeft (zie "W3C breidt aanwezigheid op WWW 2012 uit"). Fons Kuijk Nieuwsbrieven worden met regelmaat door het W3C Benelux Kantoor uitgegeven. Ze bevatten het laatste nieuws over W3C activiteiten en evenementen die door of in samenwerking met het W3C Benelux Kantoor worden georganiseerd. Aanmelden of afmelden voor deze nieuwsbrief kan via een bericht naar: [email protected].
    [Show full text]
  • HTML5, HTML and CSS Course- Level 2
    HTML5, HTML and CSS Course- Level 2 By High School Technology Services myhsts.org Thinking Inside the Box By High School Technology Services myhsts.org Elements as Boxes ▪ All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. ▪ The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model: Elements as Boxes Elements as Boxes ▪ Content - The content of the box, where text and images appear ▪ Padding - Clears an area around the content. The padding is transparent ▪ Border - A border that goes around the padding and content ▪ Margin - Clears an area outside the border. The margin is transparent The box model allows us to add a border around elements, and to define space between elements. E.g. - div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; } Elements as Boxes ▪ In order to set the width and height of an element correctly in all browsers, you need to know how the box model works. ▪ Assume we want to style a <div> element to have a total width of 350px: ▪ The total width of an element should be calculated like this: Total element width = width + left padding + right padding + left border + right border + left margin + right margin ▪ The total height of an element should be calculated like this: Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin 320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 350px Elements as Boxes ▪ What if these values are undeclared? ▪ If padding or borders are undeclared, they are either zero (likely if you are using a css reset) or the browser default value (probably not zero especially on form elements that are commonly not reset).
    [Show full text]
  • Rob Crowther
    A user-friendly reference guide HTML5 & CSS3 Rob Crowther MANNING www.allitebooks.com Hello! HTML5 & CSS3 www.allitebooks.com www.allitebooks.com Hello! HTML5 & CSS3 A user-friendly reference guide Rob Crowther MANNING SHELTER ISLAND www.allitebooks.com For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact: Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 261 Shelter Island, NY 11964 Email: [email protected] ©2013 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. User Friendly artwork, characters, and strips used by permission from UserFriendly.Org. All Rights Reserved. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is
    [Show full text]