{"id":20162,"date":"2020-12-23T13:10:01","date_gmt":"2020-12-23T13:10:01","guid":{"rendered":"http:\/\/www.devopsschool.com\/blog\/?p=20162"},"modified":"2022-04-28T09:01:01","modified_gmt":"2022-04-28T09:01:01","slug":"introduction-to-css-tutorial","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/introduction-to-css-tutorial\/","title":{"rendered":"What is CSS and How does CSS works?"},"content":{"rendered":"\r\n

Introduction To CSS<\/h2>\r\n\r\n\r\n\r\n

CSS<\/strong> (Cascading Style Sheets<\/strong>) is used to style and layout web pages – for example, to change the font, color, size, and spacing of your content, break it into multiple columns<\/strong>, or animations<\/strong> And add other decorative features.<\/p>\r\n\r\n\r\n\r\n

What is CSS?<\/h2>\r\n\r\n\r\n\r\n

CSS<\/strong> stands for Cascading Style Sheet<\/strong>. It is a style sheet language that is used for shaping the HTML<\/strong> sheet, which will be displayed on the web-page of browsers. CSS<\/strong> is a simple mechanism for describing the presentation semantics common to each page of a website. It can control the layout of the web page all over at once. Its latest version is CSS 3<\/strong>.<\/p>\r\n\r\n\r\n\r\n

CSS Syntax<\/h2>\r\n\r\n\r\n\r\n

CSS <\/strong>is a rules-based language – you define rules that specify groups of styles that should be applied to particular elements or groups of elements on your web page. For example, “I want to show as the main title big red text on my page.”<\/p>\r\n\r\n\r\n\r\n

Selector:-<\/strong> The selector indicates the HTML<\/strong> element or HTML tag you want to style. It is used more to select or select HTML<\/strong> elements based on their element name, id, class, attribute<\/strong>.<\/p>\r\n\r\n\r\n\r\n

Property:- <\/strong>When we write something in the property, it indicates that it is a particular property, you have to apply to the selector, which is written as a selector.<\/p>\r\n\r\n\r\n\r\n

Property-Value:-<\/strong> In property-value, we write what we want to assign.<\/p>\r\n\r\n\r\n\r\n

EX:-<\/strong><\/p>\r\n\r\n\r\n

p<\/span> {color<\/span>: red; font-size<\/span>: 22px<\/span>;}\r\n\r\np<\/span> {\r\n   color<\/span>: red;\r\n   font-size<\/span>: 22px<\/span>;\t\r\n  }<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\r\n\r\n\r\n
There are three type of CSS<\/strong>? And how to work.<\/p>\r\n\r\n\r\n\r\n
    \r\n
  • Inline style<\/strong><\/li>\r\n
  • Internal style sheet \/<\/strong> Embedded style sheet<\/strong><\/li>\r\n
  • External style sheet<\/strong><\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n
    Inline styles<\/h2>\r\n\r\n\r\n\r\n
    Inline-styles<\/strong> are CSS <\/strong>declarations that affect a single HTML<\/strong> element, which is contained within a style attribute. An implementation of inline styl<\/strong>e in an HTML<\/strong> document can be as follows:<\/p>\r\n\r\n\r\n\r\n
    The inline CSS <\/strong>style that will look like below code:<\/p>\r\n\r\n\r\n
    <h1<\/span> style<\/span>=\"color: green;\"<\/span>><\/span>DevOpsSchool<\/h1<\/span>><\/span>\r\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\r\n\r\n\r\n
    Internal stylesheet<\/h2>\r\n\r\n\r\n\r\n
    An internal stylesheet <\/strong>resides in an HTML <\/strong>document. To create an internal stylesheet<\/strong>, you place the CSS inside a <style><\/strong> element inside the HTML <head>.<\/strong><\/p>\r\n\r\n\r\n\r\n
    The internal CSS <\/strong>style that will look like below code:<\/p>\r\n\r\n\r\n
    <!DOCTYPE html<\/span>><\/span>\r\n<html<\/span>><\/span>\r\n  <head<\/span>><\/span>\r\n    <title<\/span>><\/span> internal CSS <\/title<\/span>><\/span>\r\n    <style<\/span>><\/span>\r\n     h1<\/span> {\r\n        color<\/span>: green;\r\n     } \r\n    <\/span><\/style<\/span>><\/span>\r\n  <head<\/span>><\/span>\r\n  <body<\/span>><\/span>\r\n    <h1\"<\/span>><\/span>DevOpsSchool<\/h1<\/span>><\/span>\r\n  <\/body<\/span>><\/span>\r\n<\/html<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\r\n\r\n\r\n
    External stylesheet<\/h2>\r\n\r\n\r\n\r\n
    An external stylesheet<\/strong> contains CSS<\/strong> in a separate file with the .css<\/strong> extension. CSS <\/strong>is the most common and useful way to get a document. You can do the same CSS <\/strong>file can add several web pages, all styled with a CSS<\/strong> stylesheet. To begin with CSS<\/strong>, we added an external stylesheet<\/strong> to our web page.<\/p>\r\n\r\n\r\n\r\n
    The external CSS style<\/strong> that will look like below code:<\/p>\r\n\r\n\r\n
    <style<\/span>><\/span>\r\nh1<\/span> {\r\n   color<\/span>: green;\r\n}\r\n<\/span><\/style<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\r\n\r\n\r\n
    Advantages of CSS:<\/h2>\r\n\r\n\r\n\r\n
      \r\n
    • Maintenance:<\/strong> It is easy to maintain, changing in one place will affect your web site globally. There is no need to change every specific location.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n
        \r\n
      • Time-saving: <\/strong>You can use any CSS<\/strong> script to easily reach many places.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n
          \r\n
        • Support:<\/strong> CSS<\/strong> makes the site faster and enhances the search engine capabilities to crawl web pages.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n
            \r\n
          • Native front-end:<\/strong> CSS <\/strong>has a huge list of features and functions that are helpful in designing HTML<\/strong> pages<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n
              \r\n
            • Selectors:<\/strong> In CSS<\/strong>, there are many selectors (ID selectors, class selectors, etc.) that will be helpful in performing specific tasks.<\/li>\r\n<\/ul>\r\n","protected":false},"excerpt":{"rendered":"
              Introduction To CSS CSS (Cascading Style Sheets) is used to style and layout web pages – for example, to change the font, color, size, and spacing of your content, break… <\/p>\n","protected":false},"author":1,"featured_media":20183,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5605],"tags":[5358,5606,4459,5610,5609],"class_list":["post-20162","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-css-tutorial","tag-html","tag-inline-style","tag-internal-style-sheet"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/20162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=20162"}],"version-history":[{"count":2,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/20162\/revisions"}],"predecessor-version":[{"id":20186,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/20162\/revisions\/20186"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/20183"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=20162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=20162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=20162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}