DOCSLIB.ORG

UNIT –II Cascading Style Sheets

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
UNIT –II Cascading Style Sheets UNIT –II Cascading Style Sheets: Introduction, using Styles, simple examples, your own styles, properties and values in styles, style sheet, formatting blocks of information, layers. Introduction:- Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. CSS is designed primarily to enable the separation of presentation and content, including aspects such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate. css file, and reduce complexity and repetition in the structural content. It can also display the web page differently depending on the screen size or viewing device. Readers can also specify a different style sheet, such as a CSS file stored on their own computer, to override the one the author specified. Advantages of CSS :- CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want. Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times. Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes. Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing. Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers. Offline Browsing − CSS can store web applications locally with the help of an offline catche.Using of this, we can view offline websites.The cache also ensures faster loading and better overall performance of the website. Platform Independence − The Script offer consistent platform independence and can support latest browsers as well. 1.Types of CSS:- There are three types of cascading style sheet(css) are listed below: 1. Inline Style Sheet 2. Internal Style Sheet / Embedded Style Sheet and 3. External Style Sheet 1.Inline Style Sheet:- Inline style sheets are declared within individual tags and affect those tags only. Inline style sheets are declared with the style attribute. Every CSS change has to be made in every tag that has the inline style applied to it. The inline style is good for one an individual CSS change that you do not use repeatedly through the site. Syntax: <element style=”declarations”>the text appears here</element> Example: <p style=”text-align:center; font-size:40; text-decoration:underline;”> Cascading Style Sheet</p> //inline.html <html> Output:- <head> <title>Inline Style Sheet</title> </head> <body> Cascading Style Sheet <p style="text-align:center;text- decoration:underline;font-size:40;">Cascading Inline Style Sheet Style Sheet</p> <h3 style="color:orange;">Inline Style Sheet</h3> </body> </html> 2.Internal Style Sheet / Embedded Style Sheet:- An internal style sheet holds the CSS code for the webpage in the head section of the particular file. This makes it easy to apply styles like classes or id’ in order to reuse the code. The downside(body section) of using an internal style sheet is that changes to the internal style sheet only effect the page the code is inserted into. The <style> tag specifies the content type of a stylesheet with its type attribute which should be set to "text/css". Syntax: Example: <head> <head> <style type=”text/css”> <style type="text/css"> h1{ styles go here text-align:center; </style> text-transform:uppercase; </head> } p{ font-family:algerian; font-style:italic; //internal.html:- } </style> <html> <head> </head> <title>Internal Style Sheet </title> <style type="text/css"> h1{ text-align:center; text-transform:uppercase; } Output:- p{ font-family:algerian; font-style:italic; } </style> USING INTERNAL STYLE SHEET </head> <body> First Para <h1>Using Internal Style Sheet</h1> <p>First Para</p> <p>Second para</p> Second para </body> </html> 3.External Style Sheet:- Use an external stylesheet when you want to apply one style to many pages. If you make one change in an external stylesheet, the change is universal on all the pages where the stylesheet is used. An external stylesheet is declared in an external file with a .css extension. It is called by pages whose interface it will affect. External stylesheets are called using the <link> tag which should be placed in the head section of an HTML document. This tag takes three attributes. Attributes of the <link> tag: rel - When using an external stylesheet on a webpage, this attribute takes the value "stylesheet" type - When using an external stylesheet on a webpage, this attribute takes the value "text/css" href - Denotes the name and location of the external stylesheet to be used. Syntax:- <head> <link rel=”stylesheet” type=”text/css” href=”filename.css”> </head> //external.html //style.css <html> h1{ <head> text-align:center; <title>External Style Sheet</title> font-weigt:bold; <link rel="stylesheet" type="text/css" } href="style.css"> p{ </head> font-size:20; <body> font-style:oblique; <h1>Introduction</h1> color:blue; <p>ESS is defines the css file } seperately.</p> <p>It includes many html document.</p> </body> Output:- </html> Introduction ESS is defines the css file seperately. It includes many html document. 2.Explain Defining your own styles in CSS. Defining styles:- Styles are defined by simple rules. A style can contain as many rules as we want and as with processing HTML, if something doesn’t makes sense it can be ignored. Cascading Styles: Conventionally, styles are cascaded. This means that we do not have to use a single set of styles inside a document. We can import as many styles sheets as we like. This is useful if we define a set of organizational can take place in stylesheets, this means that the first is overriding can also happen by defining styles within the body of the page. Rules: A style rule has two parts: a selector and a set of declarations 1. The Selector is used to create a link between the rule and the HTML tag. Selectors can be placed into classes so that a tag can be formatted in a variety of ways. 2. The Declaration has two parts: a property and a value. Property and value must be separated with colons and terminated with semicolon( ; ). Syntax:- selector { property : value; property : value; ……………….; } Example: body{ background-color:blue; } h1{ text-align:center; text-transform:uppercase; } p{ font-family:algerian; font-style:italic; } Classes:- You may be wondering if it is possible to give an HTML element multiple looks with CSS. For example, sometimes you want the font to be large and white color, while other times you would prefer the font to be small and black color. CSS allows you to do just that with the use of classes. Example 1:- CSS Code: p.first { color:blue; } p.second { color:red;} HTML Code: <html> <head> <title> Using classes </title> </head> <body> <p class=”first”>This is a paragraph that uses the p.first CSS code</p> <p class=”second”>This is a paragraph that uses the p.second CSS code!</p> </body> </html> User Stylesheet are an exciting feature of CSS. In CSS, the presentation of a document is controlled by the combination of user and author style preference. This mechanism is needed(text only) to allow CSS to describe fully(and the extend) the behavior of browsers. Users can define their own styles sheets to format pages based on their preferences. In below example, user defines different declaration for own styles (using class ). Example 2:- <html> <head> <title>Using Class</title> <style type="text/css"> .head{ text-align:center; color:brown; text-decoration:underline; } .para{ <body> color:green; <h1 class="head">Define you own style using class</h1> font-size:40; <p class="para">Some of the questions are listed:</p> font-family:algerian; <p class="question">What is your name?</p> } <p class="answer">My name is Krishna.</p> .question{ <p class="question">What is your Qualification?</p> color:#00ff00; <p class="answer">My Qualification is Bachelor of Computer font-size:30; Science.</p> </body> } .answer{ </html> color:#0000ff; font-size:25; text-transform:uppercase; } </style> </head> Output:- Define you own style using class Some of the questions are listed: What is your name? MY NAME IS KRISHNA. What is your Qualification? MY QUALIFICATION IS BACHELOR OF COMPUTER SCIENCE 3.Properties and Values in CSS:- The following are the properties and its values used in styles: Property Meaning Values 1. text-align Specifies the horizontal alignment of text. text-align: left | center |right 2. text-decoration This text decoration can be done by specifying text-decoration: underline | underline,overline and line-through overline | line-through 3. text-transform Controls the capitalization of text text-transform: uppercase | lowercase | capitalize 4. font-family Specifies the font family for text font-family: aria | algerian | verdana | Calibri 5. font-size The size of the text can be given( in pixels(px), font-size: 20px | 50% | 80in percentage(%), inches(in)) 6.
Load more

Recommended publications
  • Style Sheets CSS
    P1: OSO/OVY P2: OSO/OVY QC: OSO/OVY T1: OSO GTBL013-03 GTBL013-Jackson-v10 July 12, 2006 10:36 CHAPTER 3 Style Sheets CSS As we have learned, HTML markup can be used to indicate both the semantics of a document (e.g., which parts are elements of lists) and its presentation (e.g., which words should be italicized). However, as noted in the previous chapter, it is advisable to use markup predominantly for indicating the semantics of a document and to use a separate mechanism to determine exactly how information contained in the document should be presented. Style sheets provide such a mechanism. This chapter presents basic information about Cascading Style Sheets (CSS), a style sheet technology designed to work with HTML and XML documents. CSS provides a great deal of control over the presentation of a document, but to exercise this control intelligently requires an understanding of a number of features. And, while you as a software developer may not be particularly interested in getting your web page to look “just so,” many web software developers are members of teams that include professional web page designers, some of whom may have precise presentation require- ments. Thus, while I have tried to focus on what I consider key features of CSS, I’ve also included a number of finer points that I believe may be more useful to you in the future than you might expect on first reading. While CSS is used extensively to style HTML documents, it is not the only style- related web technology.
    [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]
  • 1Lesson 1: Markup Language and Site Development Essentials
    1Lesson 1: Markup Language and Site Development Essentials Objectives By the end of this lesson, you will be able to: 2.1.1: Relate the history of markup languages to current techniques and technologies, including Standard Generalized Markup Language (SGML), previous versions of Hypertext Markup Language (HTML). 2.1.2: Identify the format and various versions of HTML, including HTML 4.01, Extensible HTML (XHTML), HTML5. 2.1.8: Explain the importance of consistently developing to a single W3C standard (e.g., HTML5). 2.6.1: Describe the functionality of XML. 2.7.1: Obtain input from stakeholders about acceptable technologies and color combinations. 2.7.2: Create an initial Web site diagram (i.e., a story board or prototype), and translate it into a site map. 2.7.3: Verify compliance with government and industry accessibility standards, including W3C Web Accessibility Initiative (WAI), U.S. Government Section 508, Americans with Disabilities Act (ADA). 2.7.4: Validate Web page design according to technical and audience standards adopted by employers. 2.7.5: Verify Web site usability, viewability and browser compatibility. 2.12.1: Test and validate Web documents. 2.12.3: Test Web pages in multiple browsers. 2.13.1: Work as a team member to develop pages and sites. 1-2 Site Development Associate 2.13.2: Collaborate with technical (e.g., IT) and non-technical (e.g., marketing) members of the organization to ensure sites meet requirements. 2.13.3: Determine information and audience requirements for a site, including stakeholders such as customers, employees, shareholders, suppliers. 2.13.4: Document a Web site plan.
    [Show full text]
  • Cascading Style Sheets for PGDCA HTML Styles – CSS Cascading Style Sheets (CSS) Is a Style Sheet Language Used for Describing
    Cascading Style Sheets for PGDCA Semester –II PGDCA-204 By: Arshdeep Singh, University computer centre HTML Styles – CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS can be added to HTML elements in 3 ways: Inline - by using the style attribute in HTML elements Internal - by using a <style> element in the <head> section External - by using an external CSS file Inline CSS An inline CSS is used to apply a unique style to a single HTML element and uses the style attribute of an HTML element. Example: <!DOCTYPE html> <html> <body> <h1 style="color:blue;">This is a red Heading</h1> </body> </html> Result in browser: This is a Blue Heading Internal CSS The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag. ... With Internal style sheets, you can style the visited, hover, active, and link color of an anchor tag. But in the Internal CSS, we can not control styles for multiple documents at once. Internal style Sheet is applicable to the Page in which it is included. Internal Style Sheet is used to style individual page. It’s impossible to style "pseudo-elements" and classes with inline styles. With Internal style sheets, you can style the visited, hover, active, and link color of an anchor tag.
    [Show full text]
  • Automated Extraction of Mixins in Cascading Style Sheets Alan Charpentier, Jean-Rémy Falleri, Laurent Réveillère
    Automated Extraction of Mixins in Cascading Style Sheets Alan Charpentier, Jean-Rémy Falleri, Laurent Réveillère To cite this version: Alan Charpentier, Jean-Rémy Falleri, Laurent Réveillère. Automated Extraction of Mixins in Cas- cading Style Sheets. 32rd IEEE International Conference on Software Maintenance and Evolution (ICSME), Oct 2016, Raleigh, United States. pp.56-66, 10.1109/ICSME.2016.15. hal-02182065 HAL Id: hal-02182065 https://hal.archives-ouvertes.fr/hal-02182065 Submitted on 6 Jan 2020 HAL is a multi-disciplinary open access L’archive ouverte pluridisciplinaire HAL, est archive for the deposit and dissemination of sci- destinée au dépôt et à la diffusion de documents entific research documents, whether they are pub- scientifiques de niveau recherche, publiés ou non, lished or not. The documents may come from émanant des établissements d’enseignement et de teaching and research institutions in France or recherche français ou étrangers, des laboratoires abroad, or from public or private research centers. publics ou privés. Automated Extraction of Mixins in Cascading Style Sheets Alan Charpentier, Jean-Rémy Falleri and Laurent Réveillère University of Bordeaux LaBRI, UMR 5800 F-33400, Talence, France Email: {acharpen,falleri,reveillere}@labri.fr Abstract—Cascading style sheets (CSS) is a language that projects such as Bootstrap3 and Foundation4, the two most describes the presentation of web documents. CSS is widely popular CSS frameworks. However, many applications still adopted in web development and it is now common for web rely on low level CSS code. A recent survey5 with more than projects to have several thousands of CSS lines of code. Because the language lacks advanced features to allow code reuse, several 13; 000 responses from web developers showed that almost languages such as Sass and Less have emerged as extensions to half of them do not use CSS preprocessors.
    [Show full text]
  • Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification W3C First Public Working Draft 12 April 2016
    Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification W3C First Public Working Draft 12 April 2016 This version: http://www.w3.org/TR/2016/WD-CSS22-20160412/ Latest version: http://www.w3.org/TR/CSS22/ Latest CSS level 2: http://www.w3.org/TR/CSS2/ Latest CSS: http://www.w3.org/TR/CSS/ Editors' draft: http://dev.w3.org/csswg/css2/ Editors: Bert Bos <BERT @w3.org> Former editors: Tantek Çelik <TANTEK @cs.stanford.edu> Ian Hickson <IAN @hixie.ch> Håkon Wium Lie <HOWCOME @opera.com> Chris Lilley <CHRIS @w3.org> Ian Jacobs <IJ @w3.org This document is also available in these non-normative formats: plain text p.0, gzip'ed tar file p.0, ZIP FILEp.0, gzip'ed PostScript p.0, PDFp.0. See also translations. Copyright © 2016 W3C® (MIT, ERCIM, Keio, Beihang). W3C LIABILITY, TRADEMARK AND document use rules apply. Abstract This specification defines Cascading Style Sheets level 2. CSS is a style sheet language that allows au- thors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS simplifies Web authoring and site maintenance. CSS 2.2 is the second revision of CSS level 2 [CSS2]p.363. It corrects a few errors in CSS 2.1, the first revision of CSS level 2. It is not the latest version of CSS. See the "CSS Snapshot" [CSS]p.363 for an overview of specifications that make up the whole of CSS.
    [Show full text]
  • Synchronized Multimedia Integration Language (SMIL) Boston Specification
    Synchronized Multimedia Integration Language (SMIL) Boston Specification Synchronized Multimedia Integration Language (SMIL) Boston Specification W3C Working Draft 25 February 2000 This version: http://www.w3.org/TR/2000/WD-smil-boston-20000225 (Other formats: single PostScript file, single PDF file, zip archive) Latest version: http://www.w3.org/TR/smil-boston Previous version: http://www.w3.org/TR/1999/WD-smil-boston-19991115 Editors: Jeff Ayars (RealNetworks), Dick Bulterman (Oratrix), Aaron Cohen (Intel), Erik Hodge (RealNetworks), Philipp Hoschka (W3C), Eric Hyche (RealNetworks), Ken Day (Macromedia), Kenichi Kubota (Panasonic), Rob Lanphier (RealNetworks), Nabil Layaïda (INRIA), Philippe Le Hégaret (W3C), Thierry Michel (W3C), Jacco van Ossenbruggen (CWI), Lloyd Rutledge (CWI), Bridie Saccocio (RealNetworks), Patrick Schmitz (Microsoft), Warner ten Kate (Philips), Ted Wugofski (Gateway). Copyright ©2000 W3C® (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Abstract This document specifies the "Boston" version of the Synchronized Multimedia Integration Language (SMIL, pronounced "smile"). SMIL Boston has the following two design goals: Define a simple XML-based language that allows authors to write interactive multimedia presentations. Using SMIL Boston, an author can describe the temporal behavior of a multimedia presentation, associate hyperlinks with media objects and describe the layout of the presentation on a screen. Allow reusing of SMIL syntax and semantics in other XML-based languages, in particular those who need to represent timing and synchronization. For example, SMIL Boston components should be used for integrating timing into XHTML [XHTML10]. 1 24 Feb 2000 08:26 Synchronized Multimedia Integration Language (SMIL) Boston Specification Status of this document This section describes the status of this document at the time of its publication.
    [Show full text]
  • Design and Implementation of MEARN Stack-Based Real-Time Digital Signage System
    Journal of Korea Multimedia Society Vol. 20, No. 5, May 2017(pp. 808-826) https://doi.org/10.9717/kmms.2017.20.5.808 Design and Implementation of MEARN Stack-based Real-time Digital Signage System Trinh Duy Khue†, Thanh Binh Nguyen††, UkJIn Jang†, Chanbin Kim†, Sun-Tae Chung††† ABSTRACT Most of conventional DSS’s(Digital Signage Systems) have been built based on LAMP framework. Recent researches have shown that MEAN or MERN stack framework is simpler, more flexible, faster and more suitable for web-based application than LAMP stack framework. In this paper, we propose a design and implementation of MEARN (ME(A+R)N) stack-based real-time digital signage system, MR-DSS, which supports handing real-time tasks like urgent/instant messaging, system status monitoring and so on, efficiently in addition to conventional digital signage CMS service tasks. MR- DSCMS, CMS of MR-DSS, is designed to provide most of its normal services by REST APIs and real- time services like urgent/instant messaging by Socket.IO base under MEARN stack environment. In addition to architecture description of components composing MR-DSS, design and implementation issues are clarified in more detail. Through experimental testing, it is shown that 1) MR-DSS works functionally well, 2) the networking load performance of MR-DSCMS’s REST APIs is better compared to a well-known open source Xibo CMS, and 3) real-time messaging via Socket.IO works much faster than REST APIs. Key words: Digital Signage System, Content Management System, Real-time Web Service, MEAN Stack, MERN Stack, REST API, Socket.IO 1.
    [Show full text]
  • Beginning CSS: Cascading Style Sheets for Web Design
    www.GetPedia.com 01_576429 ffirs.qxd 11/18/04 12:25 PM Page iii Beginning CSS: Cascading Style Sheets for Web Design Richard York 01_576429 ffirs.qxd 11/18/04 12:25 PM Page i Beginning CSS: Cascading Style Sheets for Web Design 01_576429 ffirs.qxd 11/18/04 12:25 PM Page ii 01_576429 ffirs.qxd 11/18/04 12:25 PM Page iii Beginning CSS: Cascading Style Sheets for Web Design Richard York 01_576429 ffirs.qxd 11/18/04 12:25 PM Page iv Beginning CSS: Cascading Style Sheets for Web Design Published by Wiley Publishing, Inc. 10475 Crosspoint Boulevard Indianapolis, IN 46256 www.wiley.com Copyright © 2005 by Wiley Publishing, Inc., Indianapolis, Indiana Published simultaneously in Canada ISBN: 0-7645-7642-9 Manufactured in the United States of America 10 9 8 7 6 5 4 3 2 1 1B/QZ/RS/QU/IN No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Legal Department, Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4355, e-mail: [email protected].
    [Show full text]
  • Preview CSS Tutorial (PDF Version)
    About the Tutorial CSS is used to control the style of a web document in a simple and easy way. CSS stands for Cascading Style Sheets. This tutorial covers both the versions CSS1 and CSS2 and gives a complete understanding of CSS, starting from its basics to advanced concepts. Audience This tutorial will help both students as well as professionals who want to make their websites or personal blogs more attractive. Prerequisites You should be familiar with: Basic word processing using any text editor. How to create directories and files. How to navigate through different directories. Internet browsing using popular browsers like Internet Explorer or Firefox. Developing simple Web Pages using HTML or XHTML. If you are new to HTML and XHTML, then we would suggest you to go through our HTML Tutorial or XHTML Tutorial first. Copyright & Disclaimer Copyright 2017 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at [email protected] i Table of Contents About the Tutorial ....................................................................................................................................
    [Show full text]
  • Reasoning with Style
    Proceedings of the Twenty-Fourth International Joint Conference on Artificial Intelligence (IJCAI 2015) Reasoning with Style Mart´ı Bosch∗ y z Pierre Geneves` y z Nabil Laya¨ıday z ∗ Universitat Politecnica` de Catalunya y CNRS, LIG z Inria Abstract Mesbah and Mirshokraie, 2012]. The simplicity of CSS syn- tax may be misleading as it hides the complexity of its most The Cascading Style Sheets (CSS) language constitutes a key advanced aspects. For this reason, developers increasingly component of web applications. It offers a series of sophis- rely on frameworks that automatically generate CSS files. ticated features to stylize web pages. Its apparent simplicity This often results in a code that is very hard to maintain. This and power are however counter-balanced by the difficulty of also leads to redundant declarations and inaccessible selec- debugging and maintaining style sheets, tasks for which de- tors, that unnecessarily increase resources required to transfer velopers still lack appropriate tools. In particular, significant the CSS files (and therefore web traffic at a global scale) and portions of CSS code become either useless or redundant, and to process the page layout. Previous studies [Meyerovich and tend to accumulate over time. The situation becomes even Bodik, 2010] showed that the visual layout of web pages con- worse as more complex features are added to the CSS lan- sumes 40–70% of the processing time of the browser. Simpli- guage (e.g. CSS3 powerful selectors). A direct consequence fying CSS code is essential in reducing this cost. Current syn- is a waste of CPU that is required to display web pages, as tax optimizers1 perform only syntactic analyses, and are un- well as the significant amount of useless traffic at web scale.
    [Show full text]
  • CSS Preprocessing: Tools and Automation Techniques | HTML
    07/11/2019 Information | Free Full-Text | CSS Preprocessing: Tools and Automation Techniques | HTML Information 2018, 9(1), 17; https://doi.org/10.3390/info9010017 Article CSS Preprocessing: Tools and Automation Techniques † by Ricardo Queirós CRACS/INESC TEC and School of Media Arts and Design, Polytechnic of Porto, Rua D. Sancho I, n.° 981, 4480-876 Vila do Conde, Portugal † This paper is an extended version of our paper published in the 6th Symposium on Languages, Applications and Technologies (SLATE 2017), Porto, Portugal, 26–27 June 2017. Scientific Repository of the Polytechnic Institute of Porto Received: 12 Nprovidedo by vember 2017 / Accepted: 10 January 2018 / Published: 12 January 2018 View metadata, citation and similar papers at core.ac.uk CORE brought to you by Abstract: Cascading Style Sheets (CSS) is a W3C specification for a style sheet language used for describing the presentation of a document written in a markup language, more precisely, for styling Web documents. However, in the last few years, the landscape for CSS development has changed dramatically with the appearance of several languages and tools aiming to help developers build clean, modular and performance-aware CSS. These new approaches give developers mechanisms to preprocess CSS rules through the use of programming constructs, defined as CSS preprocessors, with the ultimate goal to bring those missing constructs to the CSS realm and to foster stylesheets structured programming. At the same time, a new set of tools appeared, defined as postprocessors, for extension and automation purposes covering a broad set of features ranging from identifying unused and duplicate code to applying vendor prefixes.
    [Show full text]