CSS: the style of websites

Source: Wikipedia, 2020

What is CSS?

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

CSS Rules

p {
color: green;
}

Types of CSS Selectors

#opening-paragraph {}
.very-important {
color: red;
font-weight: bold;
}
p {
color: blue;
}
p {
color: green;
}
<p id="greeting" class="cool">Hello</p>.cool {
color: blue;
}
#greeting {
color: red;
}
p {
color: green;
}

Inheriting Styles

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

CSS Comments

/* 
The following selector turns all paragraphs green
*/
p {
color: green;
}

CSS Properties

1. Color property: to give the text color.

p {
color: green;
}

2. Background Color

p {
background-color: blue;
}

3. Font Family

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

4. Font Characteristics

p {
font-size: 20px;
}
p {
font-style: italic;
}
.light-text {
font-weight: lighter;
}
.bold-text {
font-weight: bold;
}
.bolder-text {
font-weight: bolder;
}

5. Text Align

6. Text Decoration

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