Css style

Cascading Style Sheets (CSS) for Dummies

CSS (Cascading Style Sheets) is not a programming language, it’s the code you use to selectively style the web. The CSS layout is based on the “box” model, with each *box* taking up space on the webpage having various properties like padding (which is the space around the content) and border (it wraps is the solid line around the padding), and margin. A CSS ruleset consists of selector, declaration, property, and property value.

Brief history

CSS (Cascading Style Sheets) is not a programming language, it’s the code you use to selectively style the web. CSS is a style sheet language for describing the presentation of a document written in a markup language like HTML. It is designed to help improve the accessibility of a site’s content; provide more flexibility and control in specifying presentation characteristics; and allow multiple web pages to share formatting, reducing complexity and repetition.

Before CSS, almost all of the presentation attributes of HTML documents were contained in HTML markup. All font colors, background styles, element alignments, borders, and sizes had to be explicitly described, often multiple times, in the HTML code. CSS allows authors to move much of this information to another file; the style sheet, resulting in considerably simpler HTML.

Anatomy of the CSS ruleset

All CSS rulesets are surrounded by braces { }. They can be specified inside a style element or inside an external CSS file. The CSS layout is based on the “box” model, with each box taking up space on the web page having various properties like padding (which is the space around the content, for example, the space around your paragraph), border (it is the solid line that surrounds the padding ) and the margin (which is around the outside of the border). Here’s what the syntax of typical CSS code looks like:

body {
  font-style: italic
  color: blue;
}

A CSS ruleset consists of selector, declaration, property, and property value. When the above CSS code is applied to an HTML document, the contents of the body the element will be italics in style and blue color. In CSS, anything specified in the /* and */ beacons are a comment. Comments are a useful way to write notes about your code, and browsers ignore them when rendering CSS code. Below is the detailed analysis of a set of CSS rules 👇

  1. Selector: This indicates where selected the HTML element(s) or content [e.g attributes, ids, and classes] to which a set of style rules applies. This is usually at the beginning of the ruleset. For example, in the illustration above, the The element is the selector. To style a different element, you just need to change the selector. Other forms of selectors in CSS include;

    1. a universal selector – denoted by the symbol * and which affects all elements (e.g. title, paragraph, list, etc.) on a document tree or all values ​​of a particular element.

    2. an element selector – also called 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 items can also be selected using a comma, and a single set of rules is applied to them as follows 👉 h1, p, li, {color: blue;}.

    3. pseudo-class – is a keyword added to a selector that specifies a special state of the selected element, for example in this ruleset 👉 a:hover {color: blue;}the color of the selector a turns blue when the mouse pointer hovers over the link.

  2. Statement: This declared the property of an HTML element to style. It determines how elements are formatted on a web page. Each declaration consists of a property and a property value separated by a colon. Statements inside a block are separated by a semicolon. For instance font-style: italic; color: blue;.

  3. Property: This is the attribute to style in an HTML document. Different selectors and HTML elements have different properties, properties specify what to style on a CSS selector. This can be the HTML elements background or its color or font. Just like the CSS selector, some properties are universal and can be used on any element while others only apply to specific groups of elements and under particular conditions. In the example above, the property of body the element chosen to be styled is its color. Commonly used properties in CSS documents include list properties; font properties; border properties; and text properties.

  4. Values: are written after the colon that separates them from properties in CSS. Word values can be quite misleading because CSS values ​​are not just text; they are often in different forms like integers, units, strings, URLs, etc. See below for more details 👇

    1. text values ​​- are quite common in CSS and are usually written without quotes. italic and blue are the textual values ​​of font-style and color in the CSS ruleset above.

    2. integers – are numbers from zero to nine. Some CSS properties allow their values ​​to be described as negative integers. An example integer is “6” as the value for the property column-count. It is not uncommon to see properties like margin take two values ​​(for example 3 auto;). When this happens, the first value (3 in this case) affects the top and bottom sides of the element while the second value affects the left and right sides [note that ‘auto’ is a special value that divides the available horizontal space evenly between left and right].

    3. units/measurements – many properties in CSS take this as their value for effectively positioning general layout and media queries on a web page. Examples of property-specific units for CSS values ​​include; pc – the unit for picas; em – for the calculated size of a font; cm – the unit of centimeters; pt – for points (as a measure in print media); and % – the unit of percentages.

    4. URL – properties such as background-image often take an actual URL as a value. A URL can be absolute or relative, meaning an image’s address can be copied online and used as a background image or an image can be downloaded directly from the user’s computer . For instance: div{background-image: url("./images/picture.jpg");}

Additional Resources

As a code newbie, it’s pretty easy to get overwhelmed with the size of properties, property values, and CSS selectors to remember, so I’ve compiled the following list of resources for future reference. 👇

As always, thanks for reading 👋 👋


Also posted at https://dev.to/dolamu/a-basic-guide-to-cascading-style-sheets-54fd.

LOADING
. . . comments & After!