- Style Element
- Font Family
- Font Size
- Font Weight
- Font-Style
- Font-Variant
- Font
- Text-Align
- Text-Decoration
- Text-Transform
- Text-Indent
- Margin-Top
- Margin-Right
- Margin-Bottom
- Margin-Left
- Max-Width
- Padding
- Margin
- Display: Flex
- Border-Bottom
- Border-Top
- Border-Radius
- Nav Element
- Nav A
- Nav Li
- List-Style-Type
- Nav Ul
- Background-Color
- Display
- Pseudo-Classes
- Nav a:link
- Nav a:visited
- Nav a:hover
- Nav a:active
- The Box Model
| Syntax | Description | Example |
|---|---|---|
|
A tag used to define CSS styles within an HTML document. |
|
font-family |
Specifies the font of the text. |
|
font-size |
Defines the size of the font. |
|
font-weight |
Determines the thickness of the font. |
|
font-style |
Defines the style of the font (normal, italic, oblique). |
|
font-variant |
Controls text appearance, such as small caps. |
|
font |
Shorthand for setting font-related properties. |
|
text-align |
Aligns text to left, right, center, or justify. |
|
text-decoration |
Controls text underline, overline, and line-through. |
|
text-transform |
Changes the capitalization of text. |
|
text-indent |
Indents the first line of a paragraph. |
|
margin-top |
Sets the top margin of an element. |
|
margin-right |
Sets the right margin of an element. |
|
margin-bottom |
Sets the bottom margin of an element. |
|
margin-left |
Sets the left margin of an element. |
|
max-width |
Sets the maximum width an element can be. |
|
padding |
Sets the space between an element’s content and border. |
|
margin |
Shorthand property for setting margins. |
|
display: flex |
Defines a flex container. |
|
border-bottom |
Sets the bottom border of an element. |
|
border-top |
Sets the top border of an element. |
|
border-radius |
Rounds the corners of an element. |
|
background-color |
Sets the background color of an element. |
|
display |
Determines how an element is displayed. |
|
list-style-type |
Defines the appearance of list bullets or numbers. |
|
pseudo-classes |
Used to define a special state of an element. |
|
nav a:link |
Styles unvisited links in a navigation bar. |
|
nav a:visited |
Styles visited links in a navigation bar. |
|
nav a:hover |
Changes the style when the mouse hovers over a link. |
|
nav a:active |
Styles the link when it is clicked. |
|
Fiddle: https://jsfiddle.net/15mky8hr/
Completed Fiddle: https://jsfiddle.net/joseortiz/dft983h2/
<!-- Link to CSS Examples COMPLETED version:
https://jsfiddle.net/joseortiz/dft983h2/
-->
<!doctype html>
<html>
<head>
<title>Selectors Example</title>
</head>
<body>
<section>
<article>
This is the first article.
</article>
<article>
This is the second article.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</article>
</section>
<section>
<article>
This is the third article.
</article>
<article>
This is the fourth article.
</article>
</section>
</body>
</html>
<html>
<head>
<title>Selectors Example</title>
</head>
<body>
<section>
<article class="box" id="main_box">
This is the first article.
</article>
<article class="box">
This is the second article.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</article>
</section>
<section>
<article>
This is the third article.
</article>
<article>
This is the fourth article.
</article>
</section>
</body>
</html>
/* Type selector */
article {
color: blue;
margin: 10px;
}
/* Class selector */
.box {
border: 1px solid black;
padding: 10px;
}
/* ID selector */
#main_box {
background-color: red;
}
/* Using combinators:
Use a space to specify a descendant selector
*/
.box li {
color: purple;
}
<!-- Link to CSS Examples COMPLETED version:
https://jsfiddle.net/joseortiz/dft983h2/
-->
<!doctype html>
<html>
<head>
<title>Selectors Example</title>
</head>
<body>
<section>
<article>
This is the first article.
</article>
<article>
This is the second article.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</article>
</section>
<section>
<article>
This is the third article.
</article>
<article>
This is the fourth article.
</article>
</section>
</body>
</html>
<!-- Link to CSS Examples COMPLETED version:
https://jsfiddle.net/joseortiz/dft983h2/
-->
<!doctype html>
<html>
<head>
<title>Selectors Example</title>
</head>
<body>
<section>
<article id="redbox">
This is the <em>first</em> article.
</article>
<article class="box">
This is the second article.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</article>
</section>
<section>
<article class="box">
This is the third article.
</article>
<article>
This is the fourth article.
</article>
</section>
</body>
</html>
/* CSS Rule */
/* Selector */
/* Type Selector */
article {
color: blue; /* Declaration */
/*
border-width: 1px;
border-style: solid;
border-color: black;
*/
/* border: 1px solid black */
}
body {
background: lavenderblush;
}
li {
color: green;
}
/*
ul {
color: red;
}
*/
/* Class Selector */
.box {
border: 3px double black;
padding: 10px;
margin: 10px;
}
/* ID Selector */
#redbox {
background-color: lightblue;
}
/* Combinator Selector */
.box li {
color: orange;
}