HTML CSS

HTML CODES & EXAMPLES

HTML CSS

Learn how to style HTML webpages using CSS with practical examples for colors, fonts, spacing, layouts, buttons, cards and responsive designs.

← Classes & IDs Start Learning →

What is CSS?

Cascading Style Sheets

CSS stands for Cascading Style Sheets. It is used to control the appearance, layout and presentation of HTML elements. CSS can change colors, fonts, spacing, borders, backgrounds, sizes and responsive layouts.

Simple idea:HTML creates the structure, while CSS controls how that structure looks and behaves visually.

Inline CSS

CSS directly inside an HTML element

inline-css.html

<h1 style="color:blue;">

  Welcome to SNCEC

</h1>

Internal CSS

CSS inside the HTML document

internal-css.html

<style>

h1{

  color:#1769d5;

  font-size:32px;

}

</style>


<h1>
  Computer Education
</h1>

External CSS

Connect a separate CSS file

external-css.html

<link
  rel="stylesheet"
  href="style.css">


<h1>
  Welcome to SNCEC
</h1>


<!-- style.css -->

h1{

  color:#1769d5;

  font-size:32px;

}

CSS Selectors

Select HTML elements for styling

selectors.html

/* Element selector */

p{
  color:#555;
}


/* Class selector */

.course{
  padding:20px;
}


/* ID selector */

#main-title{
  font-size:32px;
}


/* Universal selector */

*{
  box-sizing:border-box;
}

CSS Colors

Change text and background colors

colors.html

<h2 class="title">
  Computer Courses
</h2>


<div class="box">
  Learn Computer Skills
</div>


<style>

.title{
  color:#1769d5;
}

.box{
  background:#eaf4ff;
  color:#172337;
}

</style>

CSS Fonts

Control typography

fonts.html

h1{

  font-family:Arial,sans-serif;

  font-size:36px;

  font-weight:700;

  line-height:1.2;

}


p{

  font-size:16px;

  line-height:1.7;

}

Text Styling

Format text using CSS

text-style.html

.heading{

  text-align:center;

  text-transform:uppercase;

  letter-spacing:1px;

}


.link{

  text-decoration:none;

}


.important{

  font-weight:bold;

}

Backgrounds

Add colors and gradients

background.html

.hero{

  background:#071a31;

}


.gradient{

  background:
    linear-gradient(
      135deg,
      #071a31,
      #1769d5
    );

}

Borders & Radius

Create clean modern components

borders.html

.card{

  border:1px solid #dfe7ef;

  border-radius:16px;

}


.circle{

  width:100px;

  height:100px;

  border-radius:50%;

}

CSS Box Model

Margin, border, padding and content

box-model.html

.box{

  width:300px;

  padding:20px;

  border:2px solid #1769d5;

  margin:20px;

}

Width & Height

Control element dimensions

size.html

.box{

  width:300px;

  min-height:200px;

  max-width:100%;

}

CSS Flexbox

Create flexible layouts

flexbox.html

.course-grid{

  display:flex;

  gap:20px;

  justify-content:center;

  align-items:stretch;

  flex-wrap:wrap;

}


.course{

  flex:1 1 250px;

}

CSS Grid

Create modern card layouts

grid.html

.course-grid{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:20px;

}


@media(max-width:700px){

  .course-grid{

    grid-template-columns:1fr;

  }

}

CSS Button

Create modern buttons

button.html

<a href="#" class="btn">
  Enroll Now
</a>


<style>

.btn{

  display:inline-block;

  padding:12px 20px;

  border-radius:8px;

  background:#1769d5;

  color:#fff;

  text-decoration:none;

  font-weight:bold;

}

.btn:hover{

  transform:translateY(-2px);

}

</style>

Course Card Design

Practical education website component

course-card-css.html

<div class="course-card">

  <span class="tag">
    COMPUTER COURSE
  </span>

  <h2>
    Diploma in Computer Application
  </h2>

  <p>
    Learn practical computer
    application skills.
  </p>

  <a href="#" class="btn">
    View Course
  </a>

</div>


<style>

.course-card{

  max-width:350px;

  padding:25px;

  background:#fff;

  border:1px solid #dfe7ef;

  border-radius:18px;

  box-shadow:
    0 10px 30px
    rgba(20,50,90,.08);

}

.tag{

  font-size:10px;

  font-weight:bold;

  color:#1769d5;

}

.course-card h2{

  font-size:21px;

}

.course-card p{

  color:#657387;

  line-height:1.7;

}

.btn{

  display:inline-block;

  padding:10px 16px;

  background:#1769d5;

  color:#fff;

  border-radius:8px;

  text-decoration:none;

}

</style>

CSS Hover Effect

Add interaction to components

hover.html

.card{

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.card:hover{

  transform:
    translateY(-6px);

  box-shadow:
    0 15px 35px
    rgba(20,50,90,.12);

}

CSS Transition

Create smooth visual changes

Responsive CSS

Make webpages mobile friendly

responsive.html

.container{

  width:1100px;

  max-width:100%;

  margin:auto;

  padding:20px;

}


@media(max-width:700px){

  .container{

    padding:15px;

  }

  h1{

    font-size:28px;

  }

}