{"id":1511,"date":"2022-02-03T10:24:14","date_gmt":"2022-02-03T10:24:14","guid":{"rendered":"https:\/\/blog.amt.in\/?p=1511"},"modified":"2022-02-03T10:32:42","modified_gmt":"2022-02-03T10:32:42","slug":"introduction-to-css","status":"publish","type":"post","link":"https:\/\/blog.amt.in\/index.php\/2022\/02\/03\/introduction-to-css\/","title":{"rendered":"Introduction to CSS"},"content":{"rendered":"<p>Cascading Style Sheets\u00c2\u00a0(CSS) is a\u00c2\u00a0style sheet language\u00c2\u00a0used for describing the\u00c2\u00a0presentation\u00c2\u00a0of a document written in a\u00c2\u00a0markup language\u00c2\u00a0like\u00c2\u00a0HTML.\u00c2\u00a0CSS is a cornerstone technology of the\u00c2\u00a0World Wide Web, alongside HTML and\u00c2\u00a0JavaScript.<\/p>\n<p>CSS is designed to enable the separation of presentation and content, including\u00c2\u00a0layout,\u00c2\u00a0colors, and\u00c2\u00a0fonts.<span style=\"font-size: 14.1667px;\">\u00c2\u00a0<\/span>\u00c2\u00a0This separation can improve content\u00c2\u00a0accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple\u00c2\u00a0web pages\u00c2\u00a0to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.<\/p>\n<p>Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or\u00c2\u00a0screen reader), and on\u00c2\u00a0Braille-based\u00c2\u00a0tactile devices. CSS also has rules for alternate formatting if the content is accessed on a\u00c2\u00a0mobile device.<\/p>\n<p>The name\u00c2\u00a0cascading\u00c2\u00a0comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.<\/p>\n<p>The CSS specifications are maintained by the\u00c2\u00a0World Wide Web Consortium\u00c2\u00a0(W3C). Internet media type (MIME type)\u00c2\u00a0<code>text\/css<\/code>\u00c2\u00a0is registered for use with CSS by\u00c2\u00a0RFC 2318\u00c2\u00a0(March 1998). The W3C operates a free\u00c2\u00a0CSS validation service\u00c2\u00a0for CSS documents.<\/p>\n<p>In addition to HTML, other markup languages support the use of CSS, including\u00c2\u00a0XHTML,\u00c2\u00a0plain XML,\u00c2\u00a0SVG, and\u00c2\u00a0XUL.<\/p>\n<p>Before CSS, nearly all presentational attributes of HTML documents were contained within the HTML markup. All font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS lets authors move much of that information to another file, the style sheet, resulting in considerably simpler HTML.<\/p>\n<p>For example, headings (<code>h1<\/code>\u00c2\u00a0elements), sub-headings (<code>h2<\/code>), sub-sub-headings (<code>h3<\/code>), etc., are defined structurally using HTML. In print and on the screen, choice of\u00c2\u00a0font,\u00c2\u00a0size,\u00c2\u00a0color\u00c2\u00a0and\u00c2\u00a0emphasis\u00c2\u00a0for these elements is\u00c2\u00a0presentational.<\/p>\n<p>Before CSS, document authors who wanted to assign such\u00c2\u00a0typographic\u00c2\u00a0characteristics to, say, all\u00c2\u00a0<code>h2<\/code>\u00c2\u00a0headings had to repeat HTML presentational markup for each occurrence of that heading type. This made documents more complex, larger, and more error-prone and difficult to maintain. CSS allows the separation of presentation from structure. CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics, and can do so independently for on-screen and printed views. CSS also defines non-visual styles, such as reading speed and emphasis for aural text readers. The\u00c2\u00a0W3C\u00c2\u00a0has now\u00c2\u00a0deprecated\u00c2\u00a0the use of all presentational HTML markup.<\/p>\n<p>CSS information can be provided from various sources. These sources can be the web browser, the user and the author. The information from the author can be further classified into inline, media type, importance, selector specificity, rule order, inheritance and property definition. CSS style information can be in a separate document or it can be embedded into an HTML document. Multiple style sheets can be imported. Different styles can be applied depending on the output device being used; for example, the screen version can be quite different from the printed version, so that authors can tailor the presentation appropriately for each medium.<\/p>\n<p>The style sheet with the highest priority controls the content display. Declarations not set in the highest priority source are passed on to a source of lower priority, such as the user agent style. This process is called\u00c2\u00a0cascading.<\/p>\n<p>The above is a brief about Cascading Style Sheets. Watch this space for more updates on the latest trends in Technology<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cascading Style Sheets\u00c2\u00a0(CSS) is a\u00c2\u00a0style<\/p>\n","protected":false},"author":1,"featured_media":1513,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[254,253,7],"tags":[256,255,18],"class_list":["post-1511","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cascading-style-sheets","category-css","category-techtrends","tag-cascading-style-sheets","tag-css","tag-technology"],"_links":{"self":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/comments?post=1511"}],"version-history":[{"count":1,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1511\/revisions"}],"predecessor-version":[{"id":1512,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1511\/revisions\/1512"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/media\/1513"}],"wp:attachment":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/media?parent=1511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/categories?post=1511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/tags?post=1511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}