W3 Web Tutorials
CSS Tutorial

CSS Tutorial

CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed.

What is CSS?

CSS stands for Cascading Style Sheets. It can control the layout of multiple web pages all at once.

Example

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

CSS Syntax

A CSS rule consists of a selector and a declaration block. Declarations are separated by semicolons.

Example

p {
  color: red;
  text-align: center;
}

A horizontal navigation bar can be built with flexbox. Space items evenly and keep them vertically centered.

Example 

body{
margin: 0;
}

.menu{
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgb(59, 61, 63);
}

.logo {
width: 60px;
height: 60px;
}

.navigace{
display: flex;
gap: 80px;
}

.navigace a{
border-radius: 5px;
padding: 12px 24px;
background-color: rgb(63, 35, 35);
}

CSS Buttons

Buttons can be solid or outlined. A ghost button uses a border and changes background on hover.

Example 

.btn{
padding: 18px 44px;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
}

.btn-cta{
background-color: rgb(241, 203, 156);
color: rgb(0, 1, 2);
}

.btn-ghost{
  border: 2px solid rgb(241, 203, 156);
  color: rgb(241, 203, 156);
}

.btn-ghost:hover {
  background: rgb(241, 203, 156);
  color: #000000;
}

CSS Colors

Colors can be specified with names, HEX, RGB, or HSL values.

Example

h1 {
  background-color: #04AA6D;
  color: white;
}

CSS Hero Image

A hero image is a large background photo with text on top. A dark gradient keeps the text readable.

Example 

body, html {
    height: 100%;
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../obrazky/kocak.jpg");
  height: 88%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: left;
  position: absolute;
  top: 50%;
  left: 17%;
  transform: translate(-50%, -50%);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

h1{
font-size: 32px;
}

.hero-tlacitka{
display: flex;
gap: 20px;
margin-top: 30px;
}

CSS Fade Overlay

Position an overlay on top of an image and animate opacity on hover.

Example 

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #35556196;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.sluzby-container{
display: flex;
padding: 50px 50px;
gap: 20px;
}

h2{
text-align: center;
}

CSS Box Model

All HTML elements can be considered as boxes. The box model includes margin, border, padding, and content.

Example

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

A preview box can use background-image and background-size: cover so photos fill the area.

Example 

#myDIV{
background-image: url("../obrazky/apple.png");
height: 200px;
width: 200px;
background-size: cover;
margin: 0px auto;
}

.ukazky{
display: flex;
flex-direction: column;
padding: 50px 50px;
width: 50%;
margin: 0px auto;
}

.nazvy-sluzeb{
display: flex;
justify-content: space-between;
}

.nazvy-sluzeb h3{
cursor: pointer;
}

CSS Forms

Center a contact form with text-align when the layout is simple.

Example

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
}

Example 

.formular{
text-align: center;
}
❮ Previous Next ❯