CSS: the style of websites

Source: Wikipedia, 2020

What is CSS?

CSS is a programming language, that defines the style of your web content. CSS code is based on a list of rules, identifying which elements in the HTML document to style (a subset of elements)and how we want these elements to look like (declare their style).

  • “all li elements have a color blue”.
li {
color: blue;
}
  • “select all of the paragraph elements, and make their color green”.
p {
color: green;
}

CSS Rules

A CSS rule consists of four main parts:

  • pSelector: which elements in the document to apply the CSS styles to
  • color Property
  • greenValue: what value the property will contain.
  • {color: green;}Declaration: how to change the element chosen by the selector.
  • ;A semicolon: to finish the declaration.
p {
color: green;
}

Types of CSS Selectors

ELEMENT SELECTOR

An element selector is simply the name of the element to select, followed by double curly braces.

  • p {} selects all paragraph elements
  • h1 {} selects all h1 elements.

ID SELECTOR

HTML attributes and CSS selectors work together. In HTML, the id attribute identifies an element. In CSS, we write a rule that selects the specific element with that id using the id selector:

#opening-paragraph {}
  • idattribute identifies one specific element.
  • #The hash sign makes it clear that we’re writing an id selector.

CLASS SELECTOR

HTML attributes and CSS selectors work together. In HTML, the class attribute identifies more than one, but not all elements. In CSS, we write a rule that selects these elements with that class using the class selector:

.very-important {
color: red;
font-weight: bold;
}
  • classattribute identifies more than one, but not all elements.
  • .The dot makes it clear that we’re writing a class selector.

CASCADING STYLES

In CSS, certain CSS rules “cascade” -overwrite- over other rules, which is influenced by two factors :

  • The order in which the rules are written in your code
  • The specificity of the selector used.

ORDER OF RULES

The order in which you write CSS rules in your source code matters: Rules written later will overwrite rules written earlier.

p {
color: blue;
}
p {
color: green;
}

SPECIFICITY

The specificity of the selector that’s used. CSS will respect this order of specificity in determining which rules to apply:

  1. id selector (specific): “only this one element is green
  2. class selector (a bit specific): “some, not all elements have the color green”
  3. element selector (general): “all elements have the color green”
<p id="greeting" class="cool">Hello</p>.cool {
color: blue;
}
#greeting {
color: red;
}
p {
color: green;
}
  • class selector .
  • id selector #
  • element selector
  • If multiple styles apply to an element, CSS first checks the specificity of the selector. The most specific rule wins.
  • If rules are equally specific, the rule that comes in later in the code wins.

Inheriting Styles

Child elements in HTML inherit the styles of their parents:

#menu {
color: light-blue;
background-color: black;
}
<div id="menu">
<p>HTML: Structure</p>
<p>CSS: Style</p>
</div>

CSS Comments

A code comment is a “grayed-out” text in code: CSS comments start with a /* and end with */. The browser will ignore any text inside the comment.

  • Documentation: to explain how bits of code work.
  • Troubleshooting: temporarily disabling some lines of code from executing. “commenting out” code
/* 
The following selector turns all paragraphs green
*/
p {
color: green;
}

CSS Properties

1. Color property: to give the text color.

p {
color: green;
}
  • A hexadecimal value starts with a # followed by six digits values ranging from 0 (low) to F (high). This color code represents how intense the red, blue, and green components of the color are.
  • #FF0000 The primary color red: the first two digits have the highest values, and the remaining digits are all 0.
  • #00FF00 The primary color green: the second two digits have the highest values, and the remaining digits are all 0.
  • #0000FF The primary color blue: the last two digits have the highest values, and the remaining digits are all 0.

2. Background Color

background-color property: change the background color of an element.

p {
background-color: blue;
}

3. Font Family

font-family property: determines the text font.

GENERIC FONT FAMILY

In CSS, there are six generic font families, that render well by web browsers:

  • serif: often used in printed documents, because of print readability.
  • sans-serif: often used on computer screens, because of web readability.
  • monospace: a font of which all characters- even frequently- used coding symbols <, >, {, } take up the same amount of space width. often used for programming, because of readability.
  • cursive: Font with cursive characteristics.
  • fantasy: Font with decorative characteristics
  • system-ui: Falls back to the default font on the user's operating system (macOS, Windows, Ubuntu, Linux.)

Alternative fonts:

  • serif: Arial; Helvetica
  • sans-serif: Times New Roman

Fall back fonts:

The font-family property supports a syntax where you can specify a list of fonts -separated by commas- to "fall back" if the alternative font isn't found:

/* fall back fonts */
.no-serifs {
font-family: Helvetica, Arial, sans-serif;
}

4. Font Characteristics

FONT SIZE

The font-size property: determines how large the text is.

p {
font-size: 20px;
}

FONT STYLE

The font-style property: to make the text italic, with values:

  • italic
  • normal
p {
font-style: italic;
}

FONT WEIGHT

The font-weight property: to make text bolder (or lighter), with values:

  • lighter
  • normal
  • bold
  • bolder
.light-text {
font-weight: lighter;
}
.bold-text {
font-weight: bold;
}
.bolder-text {
font-weight: bolder;
}
  • Lighter text
  • Normal text
  • Bold text
  • Bolder text

5. Text Align

The text-align property is like aligning text in a word processor, with values:

  • left
  • right
  • center
  • justified

6. Text Decoration

The text-decoration property: to add a decorative line to certain text, with the most common values:

  • overline: Overline.
  • underline: Underline.
  • line-through: "strikethrough" in word processors.
  • none: Removes any text decoration that appears by default. If links (a tags) to not have an underlined!
p {
text-decoration: overline underline line-through;
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Diana Vilé

Diana Vilé

A passionate Digital Communication Professional from Barcelona, Spain. Experience: Content, UX-design, Frontend. https://dianavile.github.io/AllDigitalAgency/