CSS: the style of websites

Source: Wikipedia, 2020

What is CSS?

  • “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

  • 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

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

ID SELECTOR

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

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

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

ORDER OF RULES

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

SPECIFICITY

  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

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

CSS Comments

  • 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

p {
background-color: blue;
}

3. Font Family

GENERIC FONT FAMILY

  • 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:

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

4. Font Characteristics

FONT SIZE

p {
font-size: 20px;
}

FONT STYLE

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

FONT WEIGHT

  • 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

  • left
  • right
  • center
  • justified

6. Text Decoration

  • 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;
}

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Reset Samsung Galaxy J5 ⑥ SM-J510L

Reset Samsung Galaxy

NFT- Weekly Digest | Week 04

Detecting Chinese Characters in Unicode Strings

Hackathon Workshop transcripts

Meet Our Team: Sergey Lesninsky, Infomatix CTO

Lightweight

ISTQB® Certification: what does it offer and why you should get certified

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/

More from Medium

How to get items side-by-side

Top CSS Code vs Real Pic Challenge

SCSS: Started with static website

CSS: Responsiveness

CSS3 image and a laptop with cascade styling