Skip to content

khier996/04-Advanced-selectors

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 

Repository files navigation

Background & Objectives

Use advanced CSS selectors (id, class, grouping, descendant selectors) to fine-tune your page with a more subtle design.

Specs

Here is your objective. Any time you want to name an element of your page, ask yourself:

  • Should I use a class or an id? Is it unique or re-usable?
  • What name should I pick for my class? Respect the component-shape convention/
  • Should I split this design into several classes instead of one big class?

Here is an example of bad CSS code:

#home-page-first-image {
  border-radius: 50%;
}
.home-card{
  text-align: center;
  background: white;
  padding: 30px;
  border: 1px solid lightgrey;
}

And here is the good version of it

.img-circle {
  border-radius: 50%;
}
.text-center{
  text-align: center;
}
.card-white {
  background: white;
  padding: 30px;
  border: 1px solid lightgrey;
}
  • Making an image circle and centering texts are very common design tasks. They deserve their own re-usable class, not to be mixed in other classes or ids!

  • Don't repeat yourself and try to use generic class names. Consider each CSS class as a re-usable design that you can apply everywhere on your website. Getting this mindset is the main difficulty for CSS beginners.

Further suggestions & resources (inlining a list)

To design your lists of icons, you'll have to change the block behavior of list items by inlining them. Here is the corresponding CSS rules.

.list-inline > li {
  display: inline-block;
  padding: 0px 20px;
}

Even inline, a list <ul> has some padding-left that you must also kill to perfectly center your list.

.list-inline {
  padding-left: 0px;
}

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published