Introduction to CSS
CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be displayed.
CSS is made up of selectors and declaration blocks:
- Selectors are used to declare which element or elements a set of CSS styling rules will apply to.
- Declaration blocks contain one or more declarations that apply styles to the selected elements. Each declaration includes a CSS property name and a value, separated by a colon.
Example of CSS syntax:
selector { property: value; }
Here’s a simple example:
p { color: blue; font-size: 16px; }
In this example, p
is the selector, and the declaration block contains two declarations. This CSS rule will apply a text color of blue and a font size of 16px to all paragraphs (<p>
elements) in the associated HTML document.
There are three primary ways to integrate CSS into a webpage:
- Inline Styling:
- Inline styling involves adding the
style
attribute directly to the HTML tag
- Inline styling involves adding the
- Internal (or Embedded) CSS:
- Internal CSS involves adding the
<style>
tag within the<head>
section of the HTML document and defining the styles there.
- Internal CSS involves adding the
- External CSS:
- External CSS involves linking an external
.css
file to the HTML document using the<link>
tag.
<p style="color: red; font-size: 16px;">This is a red colored, 16px sized text.</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal CSS Example</title>
<style>
p { color: blue; font-size: 18px; }
</style>
</head>
<body>
<p>This is a blue colored, 18px sized text.</p>
</body>
</html>
HTML File:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css"> </head>
<body>
<p>This is a green colored, 20px sized text.</p> </body>
</html>
CSS File:
{ color: green; font-size: 20px; }
Practice CSS:
Table of CSS Attributes
please find the full list of attributes on the website of the W3C.
Attribute | Description | Example |
---|---|---|
color | Sets the color of text. | color: red; |
font-size | Sets the size of the font. | font-size: 16px; |
text-align | Sets the horizontal alignment of text. | text-align: center; |
line-height | Sets the amount of space above and below inline elements. | line-height: 1.6; |
margin | Sets the outer margin of an element. | margin: 10px; |
padding | Sets the inner padding of an element. | padding: 10px; |
border | Sets the border around an element. | border: 1px solid black; |
background-color | Sets the background color of an element. | background-color: yellow; |
width | Sets the width of an element. | width: 100px; |
height | Sets the height of an element. | height: 100px; |
display | Sets how an element should be displayed. | display: block; |
position | Sets how an element is positioned in its parent element. | position: relative; |
opacity | Sets the opacity level for an element. | opacity: 0.5; |
border-radius | Defines the radius of the element border corners. | border-radius: 5px; |
box-shadow | Adds shadow effects around the element’s frame. | box-shadow: 5px 5px 5px grey; |
z-index | Sets the stack order of an element. | z-index: 1; |
Table of CSS selectors
Selector | Description | Example |
---|---|---|
.class | Selects all elements with the specified class attribute. | .intro { color: blue; } |
#id | Selects the element with the specified id attribute. | #firstname { color: red; } |
* | Selects all elements. | * { margin: 0; } |
element | Selects all elements with the specified tag name. | p { text-align: center; } |
element,element | Selects all specified elements. | div, p { margin: 5px; } |
element element | Selects all elements inside the specified element. | div p { color: red; } |
element>element | Selects all elements that are direct children of the specified element. | div>p { color: blue; } |
:hover | Selects elements when you mouse over them. | a:hover { color: orange; } |