css

HTML Styles - CSS

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

Using CSS

CSS can be added to HTML documents in 3 ways:

Blog IT
1 year 5 months ago

Read More

Nesting sass

But Sass wants to make your life easier. Rather than repeating the same selectors over and over again, you can write one style rules inside another. Sass will automatically combine the outer rule’s selector with the inner rule’s.

code sass

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

code css

Web Developer
1 year 6 months ago

Read More

Selector Lists sass

Nested rules are clever about handling selector lists (that is, comma-separated selectors). Each complex selector (the ones between the commas) is nested separately, and then they’re combined back into a selector list.

code sass

.alert, .warning {
  ul, p {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }
}

code css

.alert ul, .alert p, .warning ul, .warning p {
  margin-right: 0;
  margin-left: 0;
  padding-bottom: 0;
}

 

Web Developer
1 year 6 months ago

Read More

Selector Combinators sass

You can nest selectors that use combinators as well. You can put the combinator at the end of the outer selector, at the beginning of the inner selector, or even all on its own in between the two.

code sass

ul > {
  li {
    list-style-type: none;
  }
}

h2 {
  + p {
    border-top: 1px solid gray;
  }
}

p {
  ~ {
    span {
      opacity: 0.8;
    }
  }
}

code css

Web Developer
1 year 7 months ago

Read More

Interpolation sass

You can use interpolation to inject values from expressions like variables and function calls into your selectors. This is particularly useful when you’re writing mixins, since it allows you to create selectors from parameters your users pass in.

code sass

@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", "");

code css

Web Developer
1 year 8 months ago

Read More

How to Center an Image with the CSS text-align Property

In general, you cannot use the CSS text-align property to center an image, as it works only on block elements, and the <img> is an inline one. But there is a trick that will help you to center the image with the text-align property. If you need this property for some reasons, you can add a <div> element and specify the text-align property on it. Use the “center” value of this property.

Blog IT
2 years 3 months ago

Read More

How to Align Labels Next to Inputs

When you create a web form, you’ll probably need to know how to align labels with inputs. Here, we’ll show how it’s possible to create right-aligned and left-aligned <label> elements next to inputs.

Blog IT
2 years 3 months ago

Read More

How to Make a Back to Top Button

You've probably seen a "back-to-top" button at the bottom-right corner on many websites when you're scrolling around. Clicking on that button takes you back to the top of the page.

This is a great feature to have on any website, and today we are going to see how to build it with nothing but HTML, CSS, and JavaScript.

Blog IT
2 years 3 months ago

Read More

How to Create a Drop-Down Navigation Menu With CSS

A good attractive navigation menu is very important for your website. Navigation menus are essential for the good accessibility of your website. Users love well-designed websites.

Today's tutorial explains how to create a drop-down navigation menu on a web application. Let's create a good step-by-step drop-down navigation menu.

Blog IT
2 years 4 months ago

Read More

How To Create a form

The first article in our series gives you a very first experience of creating a form in HTML, including designing it, implementing it using the right HTML elements, adding some very simple decorations with CSS, and how the data is sent to a server.

Blog IT
2 years 4 months ago

Read More