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

Engineering Manager as an Architect

Deque in Python

Creating Desktop Apps using Flutter

Tailored business in Shopify

Tailored business in Shopify by VN Studios

Comments on Creative Selection

CS373 Software Engineering Blog#4

with Redux

🎁 For Joining - Get 2,500 $VOXEL (~$500) ⭐ For each referral - 2,500 $VOXEL (~$500) ⭐Price Listing…

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 make an infinite iframe scroller that stops on hover

My 3 Favorite Time-Saving Web Dev Tricks

How to reset CSS?

SETTING UP A SIMPLE BUILD PROCESS IN CSS WITH NPM SCRIPTS