Brief Background CSS (Cascading Style Sheets) is not a programming language, it is the code you use to selectively style the web. CSS is a for describing the presentation of a document written in a markup language like HTML. It is designed to help improve a site's content accessibility; provide more flexibility and control in the specification of presentation characteristics; and enable multiples web pages to share formatting which reduces complexity and repetition. style sheet language Before CSS, nearly all presentational attributes of HTML documents were contained within the HTML . All font colors, background styles, element alignments, borders, and sizes had to be explicitly described, often repeatedly, within the HTML. CSS lets authors move much of that information to another file; the style sheet, resulting in considerably simpler HTML. markup Anatomy of CSS Ruleset All CSS rulesets are wrapped in curly braces . They can be specified inside a element or inside an external CSS file. CSS layout is based on the "box" model, with each taking up space on the webpage having various properties like padding (which is the space around the content e.g., the space around your paragraph), border (this is the solid line that encircles the padding), and margin (which is the around the outside of the border). Here's what the syntax of a typical CSS code looks like: { } style box body {
  font-style: italic
  color: blue;
} A CSS ruleset consists of the selector, declaration, property, and the property value. When the above CSS code is applied to an HTML document, the content of the element will be in style and blue in color. In CSS, anything specified within the and tags is a . Comments are a helpful way to write notes about your code and browsers do ignore them as they render the CSS code. Below are the detailed analysis of a CSS ruleset 👇 body italic /* */ comment : This indicates or the HTML element(s) or contents [e.g attributes, ids, and classes] to which a set of styling rules apply. It is usually at the beginning of the ruleset. For instance, in the illustration above, the element is the selector. To style a different element you simply have to change the selector. Other forms of selectors in CSS include; Selector selects <body> a universal selector - denoted by the symbol and which affects all elements (e.g heading, paragraph, list, etc.) on a document tree or all values of a particular element. * an element selector - also known as a tag or type selector, is a commonly-used selector in CSS that involves all HTML elements of an identified type when that type is specified. Multiple elements can also be selected with the use of a comma, and a single ruleset applied to them all as follows 👉 . h1, p, li, {color: blue;} pseudo-class - is a keyword added to a selector that specifies a special state of the selected element, for instance in this ruleset 👉 , the color of the selector changes to blue when the mouse pointer hovers over the link. a:hover {color: blue;} a : This the property of an HTML element to be styled. It determines how elements are formatted on a webpage. Each declaration is made up of a property and a property value which are separated by a colon. Declarations within a block are separated by a semicolon. For example . Declaration declares font-style: italic; color: blue; : This is the attribute to be styled in an HTML document. Different HTML selectors and elements have different properties, properties specify on a CSS selector. This could be the background of the HTML elements or its color or font. Just like the CSS selector, some properties are universal and can be used on any element while others apply only to specific groups of elements and under particular conditions. In the example above, the property of the element chosen to be styled is its . Frequently used properties in CSS documents include list properties; font properties; border properties; and text properties. Property what to style body color : are written after the colon that separates them from the properties in CSS. The word can be quite misleading though because CSS values are not just text; they are often in different forms like integers, units, strings, URLs, etc. See below for more details 👇 Values values text values - are quite common in CSS and are usually written without quotes. and are the text values of and in the CSS ruleset above. italic blue font-style color integers - are numbers from zero to nine. Some CSS properties allow their values to be described as negative integers. An example of an integer is "6" as a value for the property . It isn't uncommon to see some properties like take on two values (e.g. 3 auto;). When this occurs, the first value (3 in this case) affects the element's top and bottom side while the second value affects the left and right side [note that 'auto' is a special value that divides the available horizontal space evenly between left and right]. column-count margin units/measurements - many properties in CSS take this as their value to effectively position general layout and media queries on a webpage. Examples of property-specific units for CSS values include; - the unit for picas; - for the calculated size of a font; - the unit for centimeters; - for points (as a measurement in printed media); and - the unit for percentages. pc em cm pt % URLs - properties like often take an actual URL as their value. A URL could be absolute or relative meaning that the address of an image could either be copied online and used as a background image or an image could be uploaded directly from the user's computer. For example: background-image div{background-image: url("./images/picture.jpg");} Additional Resources As a code newbie, it is quite easy to get overwhelmed by the sheer size of properties, properties values, and CSS selectors to remember, which is why I've compiled the following list of resources for future reference. 👇 ; for a list of all properties, their initial values, and CSS versions. CSS index A comprehensive guide on CSS ruleset . can also be found here at w3schools Finally, check out 👉 for CSS tips and tricks. this site 👋 👋 As always, thanks for reading Also published on . https://dev.to/dolamu/a-basic-guide-to-cascading-style-sheets-54fd

Cloud Computing Basics: A Quick Guide for Newbies

HTML Elements for Code Newbies

Check out my blog! ლ ✌ ლ

2021 - HackerNoon Contributor of the Year - PROGRAMMING-LANGUAGES

Nominated for 2022 - HackerNoon Contributor of the Year - Self Improvement

Nominated for 2022 - HackerNoon Contributor of the Year - Learning

Nominated for 2022 - HackerNoon Contributor of the Year - Motivation

Nominated for 2022 - HackerNoon Contributor of the Year - Developer

Too Long; Didn't Read

Make resilience your competitive advantage

Cascading Style Sheets (CSS) for Dummies

Cascading Style Sheets (CSS) for Dummies

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

4 Tips to Easily Ask for Help from Others in an Online Coding Community

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

4 Tips to Easily Ask for Help from Others in an Online Coding Community

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps