Introduction

CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.

CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content. Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}

Let's jump to the practice

The Syntax

The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

p {
color: red;
text-align: center;
}

The explaination:

  • p is a selector in CSS (it points to the HTML element you want to style).
  • color is a property, and red is the property value
  • text-align is a property, and center is the property value

The Selector

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

  • Simple selectors (select elements based on name, id, class)
  • Combinator selectors (select elements based on a specific relationship between them)
  • Pseudo-class selectors (select elements based on a certain state)
  • Pseudo-elements selectors (select and style a part of an element)
  • Attribute selectors (select elements based on an attribute or attribute value)
  • This page will explain the most basic CSS selectors.

p {
text-align: center;
color: red;
}
Icons

The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome. Add the name of the specified icon class to any inline HTML element (like i or span). All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.)

instruction unclear, stuck head
Position

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

div.static {
position: static;
border: 3px solid #73AD21;
}
Get Help

NCI’s Smokefree.gov offers science-driven tools, information, and support that has helped smokers quit. You will find state and national resources, free materials, and quitting advice from NCI.

Smokefree.gov was established by the Tobacco Control Research Branch of NCI, a component of the National Institutes of Health, in collaboration with the Centers for Disease Control and Prevention and other organizations.

pip main.py