{"id":69442,"date":"2019-12-30T16:20:44","date_gmt":"2019-12-30T10:50:44","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=69442"},"modified":"2024-04-12T14:21:48","modified_gmt":"2024-04-12T08:51:48","slug":"learning-css","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/learning-css\/","title":{"rendered":"Cascading Style Sheets (CSS)"},"content":{"rendered":"\n

Go back to tutorial<\/a><\/p>\n\n\n

Learning Cascading Style Sheets (CSS) <\/strong><\/h1>\n

Cascading Style Sheets (CSS) is specifically used for illustrating the appearance\/styling of various parts of a web page in HTML or XHTML. CSS offers the option to control the text color, fonts style, inter- paragraph spacing, columns sizing and layout, background images or colors and many other visual effects. The primary benefit of CSS is that it helps to customize the style of an entire website without changing each page individually. CSS-driven web design, thereby making writing HTML easier.<\/p>\n

How to include CSS?<\/strong><\/h3>\n

CSS can be included in a web page in following following ways –<\/p>\n

FIRST METHOD – Embedded Style Sheets<\/strong> – Embedded style sheets are included between <style> and <\/style> tags in an web page\u2019s head section.<\/p>\n

Example<\/strong><\/em><\/p>\n

<style type=\u201dtext\/css\u201d><\/p>\n

body { font: 12px sans-serif; }<\/p>\n

<\/ style ><\/p>\n

SECOND METHOD – External Style Sheets<\/strong> \u2013 CSS is in a separate document linked to a web page by the <link> element with \u201crel\u201d attribute having \u201cstylesheet\u201d as its value, \u201ctype\u201d attribute having \u201dtext\/css\u201d  as its value and \u201chref \u201c attribute having the path to CSS file.<\/p>\n

Example<\/strong><\/em><\/p>\n

<link rel=\u201dstylesheet\u201d type=\u201dtext\/css\u201d href=\u201dstyle.css\u201d><\/p>\n

THIRD METHOD – Import Rule<\/strong> \u2013 It is similar to external style sheet but instead of <link> element, it uses \u201c@import\u201d with \u201curl\u201d attribute storing the path to the CSS file.<\/p>\n

Example<\/strong><\/em><\/p>\n

<style type=\u201dtext\/css\u201d><\/p>\n

@import url(style.css);<\/p>\n

<\/ style ><\/p>\n

FOURTH METHOD – Direct Style<\/strong> – Inline styles with the style attribute are used to apply CSS rules directly to an element in a web.<\/p>\n

Example<\/strong><\/em><\/p>\n

<body style=\u201dfont: 12px sans-serif;\u201d><\/p>\n

Component of CSS <\/strong><\/h3>\n

CSS style 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. CSS style consist of two elements<\/p>\n