{"id":72240,"date":"2020-01-13T16:46:34","date_gmt":"2020-01-13T11:16:34","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=72240"},"modified":"2024-04-12T14:22:49","modified_gmt":"2024-04-12T08:52:49","slug":"css-3","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/","title":{"rendered":"CSS"},"content":{"rendered":"<p>Cascading Style Sheets (CSS) is a language specifically made for illustrating the appearance of various parts of a web page. CSS gives option to control the text color, fonts style, inter- paragraph spacing, columns sizing and layout, background images or colors and many other visual effects. CSS is used to style web pages, developed in HTML or XHTML<\/p>\n<p>The major advantage of CSS is to customize the style of an entire website without changing each page individually. CSS-driven web design makes writing HTML easier. The HTML-only approach requires a lot more code to achieve the same visual effects compared with CSS version.<\/p>\n<h4>Including CSS<\/h4>\n<p>CSS can be included in a web page in following four ways<\/p>\n<p><strong>Embedded Style Sheets<\/strong> &#8211; Embedded style sheets are included between &lt;style&gt; and &lt;\/style&gt; tags in an web page\u2019s head section as<\/p>\n<p>&lt;style type=\u201dtext\/css\u201d&gt;<\/p>\n<p>body { font: 12px sans-serif; }<\/p>\n<p>&lt;\/ style &gt;<\/p>\n<p><strong>External Style Sheets<\/strong> \u2013 In it CSS is in a separate document which is linked to an web page by the &lt;link&gt; element with \u201crel\u201d attribute having \u201cstylesheet\u201d as its value, \u201ctype\u201d attribute having \u201dtext\/css\u201d \u00a0as its value and \u201chref \u201c attribute having the path to CSS file. It is used as<\/p>\n<p>&lt;link rel=\u201dstylesheet\u201d type=\u201dtext\/css\u201d href=\u201dstyle.css\u201d&gt;<\/p>\n<ul>\n<li>rel=&#8221;stylesheet&#8221; tells the link type \u2014in this case, a link to a style sheet.<\/li>\n<li>type=&#8221;text\/css&#8221; lets web browser know the type of data to get\u2014a text file, having CSS.<\/li>\n<li>href points to the location of the external CSS file and has the value of a URL similar to the src attribute in an &lt;image&gt; tag.<\/li>\n<\/ul>\n<p><strong>Import Rule<\/strong> \u2013 It is similar to external style sheet but instead of &lt;link&gt; element, it uses \u201c@import\u201d with \u201curl\u201d attribute storing the path to the CSS file. It is used as<\/p>\n<p>&lt;style type=\u201dtext\/css\u201d&gt;<\/p>\n<p>@import url(style.css);<\/p>\n<p>&lt;\/ style &gt;<\/p>\n<p>It can attach external style sheets to an external style sheet but the &lt;link&gt; tag can\u2019t.<\/p>\n<p><strong>Direct Style<\/strong> &#8211; Inline styles with the style attribute are used to apply CSS rules directly to an element in an web as<\/p>\n<p>&lt;body style=\u201dfont: 12px sans-serif;\u201d&gt;<\/p>\n<h4>CSS Components<\/h4>\n<p>A CSS style is basically a rule which specifies to a web browser about how to format a HTML element on a web page like a rule to make a headline blue, draw a border around a photo, or create a 250- pixel-wide sidebar box to hold a list of links. A style consist of two elements<\/p>\n<ul>\n<li>The web page element that the browser formats also called as the selector.<\/li>\n<li>The actual formatting instructions also called as the declaration block or rules block.<\/li>\n<\/ul>\n<h4>CSS Rules<\/h4>\n<p>A selector can be a &lt;h1&gt; or a &lt;h2&gt; tag, a &lt;p&gt; tag having a paragraph of text and declaration block can turn that text blue, add a red border around a paragraph, position the photo in the center of the page as required by the user.<\/p>\n<p>The declaration block also called as rules block consists of property and value pairs separated by \u2018;\u2019 and curly braces to surround the block and colons to separate the property and value. The following rule shows the parts of a style sheet and the special characters that separate them.<\/p>\n<p>h2 {<\/p>\n<p>font-size: 16px;<\/p>\n<p>margin-top: 0;<\/p>\n<p>}<\/p>\n<p>Also illustrated in the figure<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114685\" src=\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2018\/05\/image010-2.jpg\" alt=\"\" width=\"549\" height=\"244\" \/><\/p>\n<p>Rules can be given in any sequence and spacing or line breaks or white space are given for better organization and readability as given in HTML. Thus giving increased maintainability and productivity.<\/p>\n<h4>CSS Selector Basics<\/h4>\n<p>Selectors are used to select the HTML elements on the web page on which declarations or rules given in the declaration block or rule block will be applied. Selectors can be divided into the following categories<\/p>\n<ul>\n<li>Simple selectors: Match one or more elements based on element type, class, or id.<\/li>\n<li>Attribute selectors: Match one or more elements based on their attributes\/attribute values.<\/li>\n<li>Pseudo-classes: Match one or more elements that exist in a certain state, such as an element that is being hovered over by the mouse pointer, or a checkbox that is currently disabled or checked, or an element that is the first child of its parent in the DOM tree.<\/li>\n<li>Pseudo-elements: Match one or more parts of content that are in a certain position in relation to an element, for example the first word of each paragraph, or generated content appearing just before an element.<\/li>\n<li>Combinators: These are not exactly selectors themselves, but ways of combining two or more selectors in useful ways for very specific selections. So for example, you could select only paragraphs that are direct descendants of divs, or paragraphs that come directly after headings.<\/li>\n<li>Multiple selectors: Again, these are not separate selectors; the idea is that you can put multiple selectors on the same CSS rule, separated by commas, to apply a single set of declarations to all the elements selected by those selectors.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Cascading Style Sheets (CSS) is a language specifically made for illustrating the appearance of various parts of a web page. CSS gives option to control the text color, fonts style, inter- paragraph spacing, columns sizing and layout, background images or colors and many other visual effects. CSS is used to style web pages, developed in&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8417],"tags":[6766],"class_list":["post-72240","page","type-page","status-publish","hentry","category-angular-js-web-development","tag-css"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS - Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Cascading Style Sheets (CSS) is a language specifically made for illustrating the appearance of various parts of a web page. CSS gives option to control the text color, fonts style, inter- paragraph spacing, columns sizing and layout, background images or colors and many other visual effects. CSS is used to style web pages, developed in...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:52:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2018\/05\/image010-2.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/\",\"name\":\"CSS - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2018\/05\/image010-2.jpg\",\"datePublished\":\"2020-01-13T11:16:34+00:00\",\"dateModified\":\"2024-04-12T08:52:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/#primaryimage\",\"url\":\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2018\/05\/image010-2.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2018\/05\/image010-2.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS - Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/","og_locale":"en_US","og_type":"article","og_title":"CSS - Tutorial","og_description":"Cascading Style Sheets (CSS) is a language specifically made for illustrating the appearance of various parts of a web page. CSS gives option to control the text color, fonts style, inter- paragraph spacing, columns sizing and layout, background images or colors and many other visual effects. CSS is used to style web pages, developed in...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:52:49+00:00","og_image":[{"url":"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2018\/05\/image010-2.jpg","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/","name":"CSS - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2018\/05\/image010-2.jpg","datePublished":"2020-01-13T11:16:34+00:00","dateModified":"2024-04-12T08:52:49+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/#primaryimage","url":"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2018\/05\/image010-2.jpg","contentUrl":"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2018\/05\/image010-2.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/72240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=72240"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/72240\/revisions"}],"predecessor-version":[{"id":72488,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/72240\/revisions\/72488"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=72240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=72240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=72240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}