CSS\u00a0is used to style\u00a0HTML. It determines how the\u00a0HTML elements\u00a0appear on the screen, paper, or in other media.<\/p>\n\n\n\n
CSS saves a lot of work. It can control the layout of several pages all at once.<\/p>\n\n\n\n
You can add CSS to HTML elements in 3 ways:<\/p>\n\n\n\n
Let\u2019s look through each way.<\/p>\n\n\n\n
An inline CSS applies a particular style to a single HTML element. Here the style attribute of an HTML element is used.<\/p>\n\n\n\n
In the example below the text color of the\u00a0<p>\u00a0element is red:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <h1>Usage of the inline CSS<\/h1>\n <p style=\"color:red;\">The paragraph is red.<\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nInternal CSS<\/h2>\n\n\n\n
An internal CSS specifies a style for a single HTML page. It is defined in the <head> element of an HTML page, inside of a <style> tag:<\/p>\n\n\n\n
Example of the internal CSS:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n body {\n background-color: yellow;\n }\n h1 {\n font-size: 30px;\n }\n p {\n font-size: 18px;\n }\n <\/style>\n <\/head>\n <body>\n <h1>Lorem Ipsum<\/h1>\n <p>\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nExternal CSS<\/h2>\n\n\n\n
An external style sheet specifies the style for multiple HTML pages. It can change the look of the whole website by changing just one file.<\/p>\n\n\n\n
For using an external style sheet, you should add a link to it inside of the element of the HTML page:<\/p>\n\n\n\n
Example of the external CSS sheet:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <\/head>\n <body>\n <h1>Lorem Ipsum<\/h1>\n <p>\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nThe file can\u2019t contain any HTML code and must be saved with a .css extension.<\/p>\n\n\n\n
CSS Fonts<\/h2>\n\n\n\n
The\u00a0CSS color\u00a0property describes the color of the text content.<\/p>\n\n\n\n
The\u00a0CSS font-family\u00a0property defines the font of the text content.<\/p>\n\n\n\n
The\u00a0CSS font-size\u00a0property defines the text size.<\/p>\n\n\n\n
Example of the CSS fonts:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n h1 {\n color: #008000;\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size: 200%;\n }\n p {\n color: #666666;\n font-family: 'New Roman', serif;\n font-size: 150%;\n }\n <\/style>\n <\/head>\n <body>\n <h1>Lorem Ipsum<\/h1>\n <p>\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nCSS Border<\/h2>\n\n\n\n
The\u00a0CSS border\u00a0property sets values to all four sides of an element.<\/p>\n\n\n\n
Example of the CSS border property:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n p {\n border: 2px dotted red;\n }\n <\/style>\n <\/head>\n <body>\n <h1>Heading<\/h1>\n <p>\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <p>\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nCSS Padding<\/h2>\n\n\n\n
The\u00a0CSS padding\u00a0property specifies padding (space) between the text and the border.<\/p>\n\n\n\n
Example of the CSS padding property:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n p {\n border: 2px dashed #008022;\n padding: 50px;\n }\n <\/style>\n <\/head>\n <body>\n <h1>Heading<\/h1>\n <p>\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <p>\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nCSS Margin<\/h2>\n\n\n\n
The\u00a0CSS margin\u00a0property creates space around the element.<\/p>\n\n\n\n
Example of the CSS margin property:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n p {\n border: 2px dashed #090fce;\n margin: 50px;\n }\n <\/style>\n <\/head>\n <body>\n <h1>Heading<\/h1>\n <p>\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <p>\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nThe id Attribute<\/h2>\n\n\n\n
The\u00a0id attribute\u00a0specifies a specific style for one element.<\/p>\n\n\n\n
Example of the id attribute:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n #large-text {\n border: 8px groove powderblue;\n font-size: 24px;\n padding: 20px;\n }\n <\/style>\n <\/head>\n <body>\n <h1>Heading<\/h1>\n <p id=\"large-text\">\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <p>\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nThe Class Attribute:<\/h2>\n\n\n\n
The\u00a0class attribute\u00a0is used to specify a style for special kinds of elements.<\/p>\n\n\n\n
Example of the class attribute:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n .text {\n border: 8px inset powderblue;\n font-size: 20px;\n padding: 10px;\n }\n <\/style>\n <\/head>\n <body>\n <h1>Heading<\/h1>\n <p class=\"text\">\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <p>\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <p class=\"text\">\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"CSS\u00a0is used to style\u00a0HTML. It determines how the\u00a0HTML elements\u00a0appear on the screen, paper, or in other media. CSS saves a lot of work. It can control the layout of several pages all at once. You can add CSS to HTML elements in 3 ways: Inline, where the\u00a0style\u00a0attribute is used in HTML elements. Internal, where the\u00a0<style>\u00a0element […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[285],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/8096"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=8096"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/8096\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=8096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=8096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=8096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}