npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

learn-css

v1.0.1

Published

**CSS** - Stands for Cascading Style Sheets

Downloads

1

Readme

Learn CSS

CSS - Stands for Cascading Style Sheets

CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once External stylesheets are stored in CSS files.

CSS Syntax

h1 {
    color: #000000;
}
/* Where h1 is selector, color is property, and #000000 is value. Both with property and value are declaration. */

Seectors

Used to "find" (or select) the HTML elements you want to style.

CSS Selectors are divided 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

Here are most basic CSS selectors used :

1. CSS element Selector - selects HTML elements based on the element name.

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

2. CSS id Selector - uses the id attribute of an HTML element to select a specific element.

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

#para1 {
  text-align: center;
  color: blue;
}

3. CSS class Selector - selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

.center {
  text-align: center;
  color: blue;
}

You can also specify that only specific HTML elements should be affected by a class.

p.center {
  text-align: center;
  color: blue;
}

HTML elements can also refer to more than one class.

<p class="center large">This paragraph refers to two classes.</p>

4. CSS Universal Selector - selects all HTML elements on the page.

* {
  text-align: center;
  color: blue;
}

5. CSS Grouping Selector - selects all the HTML elements with the same style definitions.

h1, h2, p {
  text-align: center;
  color: blue;
}

Three Ways to Add CSS

1. External CSS - With an external style sheet, you can change the look of an entire website by changing just one file!

<!--FileName: index.html-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
/* Filename: styles.css*/
body {
  background-color: lightblue;
}

h1 {
  color: blue;
  margin-left: 20px;
}

2. Internal CSS - used if one single HTML page has a unique style.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: yellow;
}

h1 {
  color: red;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

3. Inline CSS - used to apply a unique style for a single element.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

CSS Comments

Comments are used to explain the code, and may help when you edit the source code at a later date.

/* This is a single-line comment */
p {
  color: red;
}
p {
  color: red;  /* Set text color to red */
}
/* This is
a multi-line
comment */

p {
  color: red;
}

CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS Color Names

A color can be specified by using a predefined color name.

<h1 style="background-color:Orange;">Orange</h1>

CSS Background Color

Set the background color for HTML elements.

<p style="background-color:red;">Lorem ipsum...</p>

CSS Text Color

Set the color of text.

<p style="color:red;">Lorem ipsum...</p>

CSS Border Color

Set the color of borders.

<h1 style="border:2px solid Violet;">Hello World</h1>

CSS Color Values

Specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

<h1 style="background-color:rgb(255, 99, 71);">...</h1>

RGB Value - a color can be specified as an RGB value, using this formula: rgb(red, green, blue).

background-color:rgb(255, 99, 71)

RGBA Value - RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha).

background-color:rgba(255, 99, 71, 0.5)

HEX Value - a color can be specified using a hexadecimal value in the form.

background-color: #000000

3 Digit HEX Value - The 3-digit hex code is a shorthand for some 6-digit hex codes. The 3-digit hex code has the following form: #rgb

background-color:#fc9

HSL Value - a color can be specified using hue, saturation, and lightness (HSL) in the form: hsl(hue, saturation, lightness).

background-color:hsl(0, 100%, 50%)

HSLA Value - HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color. An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha).

background-color:hsla(0, 100%, 50%, 0.5)

CSS Backgrounds

The CSS background properties are used to add background effects for elements.

CSS background-color - specifies the background color of an element.

body {
  background-color: lightblue;
}

Opacity / Transparency

opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent.

div {
  background-color: green;
  opacity: 0.3;
}

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values.

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

CSS background-image - specifies an image to use as the background of an element.

body {
  background-image: url("paper.gif");
}

CSS background-repeat - repeats an image both horizontally and vertically.

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-y;
}
body {
  background-image: url("gradient_bg.png");
  background-repeat: no-repeat;
}

CSS background-position - used to specify the position of the background image.

body {
  background-image: url("gradient_bg.png");
  background-repeat: no-repeat;
  background-position: right top;
}