{"id":112039,"date":"2023-03-01T09:00:47","date_gmt":"2023-03-01T03:30:47","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=112039"},"modified":"2023-03-01T09:46:46","modified_gmt":"2023-03-01T04:16:46","slug":"css-syntax","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/css-syntax\/","title":{"rendered":"CSS Syntax"},"content":{"rendered":"

CSS, or Cascading Style Sheets, is a language used to control the presentation of HTML and XML documents. It defines the layout, colors, and other visual elements of a webpage. The basic syntax of CSS consists of selectors and declaration blocks. The selector specifies which HTML elements the styles will be applied to, and the declaration block contains the styles themselves. The declaration block is enclosed in curly braces {} and each declaration is made up of a property and a value, separated by a colon.<\/p>\n

Properties<\/h3>\n

The properties define the different visual elements that can be modified, such as color or font size, and the values specify how those elements should be modified.<\/p>\n

Here’s an example of a basic CSS rule:<\/p>\n

HTML Code<\/h4>\n
<html>\r\n\r\n<body>\r\n  <h1>Welcome to DataFlair<\/h1>\r\n<\/body>\r\n\r\n<\/html>\r\n<\/pre>\n
CSS Code<\/h4>\n
h1 {\r\n    color: blue;\r\n    font-size: 24px;\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"example<\/a><\/p>\n
In this example, the selector is “h1”, which selects all h1 elements on the webpage. The declaration block contains two declarations, one for color and one for font size. The value for color is “blue” and the value for font size is “24px”. This rule will make all h1 elements on the webpage blue and 24 pixels in size.<\/p>\n
CSS also allows for multiple selectors to be grouped together, with the same declaration block applied to all of them. This is called a “grouping” and is done by separating the selectors with a comma.<\/p>\n
HTML Code<\/h4>\n
<html>\r\n<body>\r\n  <h1>DataFlair in H1<\/h1>\r\n  <h2>DataFlair in H2<\/h2>\r\n  <h3>DataFlair in H3<\/h3>\r\n<\/body>\r\n<\/html><\/pre>\n
CSS Code<\/h4>\n
h1, h2, h3 {\r\n    color: blue;\r\n    font-size: 24px;\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"grouping\"<\/a><\/p>\n
In this example, the declarations will be applied to all h1, h2, and h3 elements on the webpage.<\/p>\n
CSS also allows for class and id selectors, which can apply styles to specific elements on the webpage. Class selectors are defined by a period (.) and id selectors are defined by a hash (#) symbol.<\/p>\n
CSS also allows for pseudo-selectors, which can apply styles to elements based on their state or position in the document.<\/p>\n
CSS syntax in action<\/h3>\n
1. Setting the background color of a webpage:<\/h4>\n
HTML Code<\/h4>\n
<html>\r\n<head>\r\n    <link rel=\"stylesheet\" href=\"\">\r\n<\/head>\r\n<body>\r\n    <h1>Welcome to DataFlair<\/h1>\r\n    <p>Sample text.<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS Code<\/h4>\n
body {\r\n  background-color: red;\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"setting<\/a><\/p>\n
2. Changing the font of a webpage:<\/h4>\n
HTML Code<\/h4>\n
<html>\r\n<head>\r\n<style>\r\nbody {\r\n    font-family: Arial, sans-serif;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n    <h1>DataFlair in Arial Font<\/h1>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS Code<\/h4>\n
body {\r\n    font-family: Arial, sans-serif;\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"changing<\/a><\/p>\n
3. Creating a class to center text:<\/h4>\n
HTML Code<\/h4>\n
<html>\r\n<head>\r\n<style>\r\n.center-text {\r\n    text-align: center;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"center-text\">\r\n        <h1>Welcome to DataFlair<\/h1>\r\n        <p>Lets Learn coding with DataFlair<\/p>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS Code<\/h4>\n
.center-text {\r\n    text-align: center;\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"creating<\/a><\/p>\n
4. Creating a class to change the color of the text to read:<\/h4>\n
HTML Code<\/h4>\n
<html>\r\n<head>\r\n<style>\r\n.red-text {\r\n    color: red;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n    <div>\r\n    \t<p class=\"red-text\">DataFlair will be red<\/p>\r\n    \t<h1 class=\"red-text\">This DataFlair heading will be red<\/h1>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS Code<\/h4>\n
.red-text {\r\n    color: red;\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"creating<\/a><\/p>\n
5. Creating an id to change the font size of an element:<\/h4>\n
HTML Code<\/h4>\n
<html>\r\n<head>\r\n<style>\r\n#large-text {\r\n    font-size: 36px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n    <p id=\"large-text\">DataFlair will be large<\/p>\r\n    <h1 id=\"large-text\">This DataFlair heading will be large<\/h1>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS Code<\/h4>\n
#large-text {\r\n    font-size: 36px;\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"creating<\/a><\/p>\n
6. Creating a hover effect for links:<\/h4>\n
HTML Code<\/h4>\n
<html>\r\n<head>\r\n    <style>\r\n        a:hover {\r\n            color: green;\r\n            text-decoration: underline;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <a href=\"#\">Hover over this DataFlair link<\/a>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS Code<\/h4>\n
a:hover {\r\n    color: green;\r\n    text-decoration: underline;\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
Before Hover:<\/strong><\/p>\n
\"creating<\/a><\/p>\n
After Hover:<\/strong><\/p>\n
#IMAGE#<\/p>\n
7. Using a media query to change the font-size of an element when the screen width is less than 600px:<\/h4>\n
HTML Code<\/h4>\n
<html>\r\n<head>\r\n    <style>\r\n        @media (max-width: 600px) {\r\n            h1 {\r\n                font-size: 18px;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <h1>Welcome to DataFlair<\/h1>\r\n    <p>Learn Code with DataFlair<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS Code<\/h4>\n
@media (max-width: 600px) {\r\n    h1 {\r\n        font-size: 18px;\r\n    }\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
Bigger screen:<\/strong><\/p>\n
\"bigger<\/a><\/p>\n
Smaller screen:<\/strong><\/p>\n
\"using<\/a><\/p>\n
8. Using :before and :after pseudo-elements to add content before and after an element:<\/h4>\n
HTML Code<\/h4>\n
<html>\r\n<head>\r\n    <style>\r\n        p:before {\r\n            content: \"Read this: \";\r\n        }\r\n\r\n        p:after {\r\n            content: \" (End of message)\";\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <p>Learn code with DataFlair<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS Code<\/h4>\n
p:before {\r\n    content: \"Read this: \";\r\n}\r\n\r\np:after {\r\n    content: \" (End of message)\";\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"using<\/a><\/p>\n
Conclusion on CSS Syntax<\/h3>\n
In this article by DataFlair we can conclude by saying that CSS is a powerful language that can be used to control the presentation of web pages. Its syntax consists of selectors, which specify which elements the styles will be applied to, and declaration blocks, which contain the styles themselves. Understanding the basic syntax of CSS is essential for anyone looking to style web pages.<\/p>\n","protected":false},"excerpt":{"rendered":"
CSS, or Cascading Style Sheets, is a language used to control the presentation of HTML and XML documents. It defines the layout, colors, and other visual elements of a webpage. The basic syntax of...<\/p>\n","protected":false},"author":5,"featured_media":112329,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27226],"tags":[27268],"class_list":["post-112039","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutorials","tag-css-syntax"],"yoast_head":"\nCSS Syntax - DataFlair<\/title>\n<meta name=\"description\" content=\"CSS syntax has selectors and declaration blocks which contain the styles themselves. Learn more about it with examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/css-syntax\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Syntax - DataFlair\" \/>\n<meta property=\"og:description\" content=\"CSS syntax has selectors and declaration blocks which contain the styles themselves. Learn more about it with examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/css-syntax\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-01T03:30:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-01T04:16:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/css-syntax.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Syntax - DataFlair","description":"CSS syntax has selectors and declaration blocks which contain the styles themselves. Learn more about it with examples.","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:\/\/data-flair.training\/blogs\/css-syntax\/","og_locale":"en_US","og_type":"article","og_title":"CSS Syntax - DataFlair","og_description":"CSS syntax has selectors and declaration blocks which contain the styles themselves. Learn more about it with examples.","og_url":"https:\/\/data-flair.training\/blogs\/css-syntax\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-03-01T03:30:47+00:00","article_modified_time":"2023-03-01T04:16:46+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/css-syntax.webp","type":"image\/webp"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/css-syntax\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/css-syntax\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"CSS Syntax","datePublished":"2023-03-01T03:30:47+00:00","dateModified":"2023-03-01T04:16:46+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/css-syntax\/"},"wordCount":501,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/css-syntax\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/css-syntax.webp","keywords":["CSS syntax"],"articleSection":["CSS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/css-syntax\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/css-syntax\/","url":"https:\/\/data-flair.training\/blogs\/css-syntax\/","name":"CSS Syntax - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/css-syntax\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/css-syntax\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/css-syntax.webp","datePublished":"2023-03-01T03:30:47+00:00","dateModified":"2023-03-01T04:16:46+00:00","description":"CSS syntax has selectors and declaration blocks which contain the styles themselves. Learn more about it with examples.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/css-syntax\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/css-syntax\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/css-syntax\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/css-syntax.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/css-syntax.webp","width":1200,"height":628,"caption":"css syntax"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/css-syntax\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"CSS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/css-tutorials\/"},{"@type":"ListItem","position":3,"name":"CSS Syntax"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team creates expert-level guides on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Our goal is to empower learners with easy-to-understand content. Explore our resources for career growth and practical learning.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=112039"}],"version-history":[{"count":3,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112039\/revisions"}],"predecessor-version":[{"id":112330,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112039\/revisions\/112330"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/112329"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=112039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=112039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=112039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}