Syllabus of CSS Based on 16 Top Search Queries

CSS is among the most common technology on the web. It’s used to style web pages making them go from boring to exciting. From unstyled to amazing. CSS brings personality, industry, and tone to all content on the web.

I’ve gathered a list of popular CSS search queries and answered them below. Some have code samples while others contain references to projects. The goal of this syllabus of css is to teach you an abundance of powerful techniques, quickly. With a little practice, you could fully understand and appreciate this often times loved and hated “language”.

Some say it’s a styling language while others claim it’s a programming language. Let’s call it a language. One in which devs may say it’s the most unorganized tool among every language. CSS frameworks and libraries come and go without one evolving as the true winner.

CSS doesn’t have a “Spring Boot” — a framework that dominates the industry. It doesn’t have a library that everyone loves like React. It’s tricky, but CSS can be organized and actually quite fun to work with.

Positioning in CSS

No syllabus of CSS would be complete without position. Positioning CSS seems to stump some developers. Position static is the default. Static stacks elements as you’d expect according to block level and inline elements

Relative is used on parent elements. It’s used for one reason — to contain absolutes. It serves as a boundary for absolutely positioned divs. Absolutely positioned divs have free rein as children. They use top, bottom, left, and right, to position themselves in the relative space.

Absolutes give us tremendous power in UI development. A skilled frontend developer will known how to make literally any UI imaginable using absolutes wherever needed. Containing them via relative.

Here’s some examples. This date picker uses absolute on the calendar

Absolute is used again here on the close button.

These images are absolutely positioned in their parent divs. Parent divs are located here.

Don’t even fret over sticky. In over 15 years of development I don’t think I’ve ever used position sticky. I have used fixed however.

Position fixed is used to position a div within the window. Using relative to contain it will not work. This is ideal for keeping a navbar at the top. Or a footer at the bottom. Fixed is used to position these elements in relation to the window. It takes the div out of the entire page lineup and positions it wherever we want. My website link in the top right is a perfect example. Notice the CSS and fixed assignment here.

Here’s another sample of relative and absolute.

CSS Table

CSS tables aren’t exactly pure CSS. They’re more like components than a syllabus of CSS bullet point. Tables often have searching, sorting, and filtering at the minimum. All of which require JavaScript and a strong knowledge of HTML. Common UI frameworks make it easy to import packages such as pagination which would be tedious to implement single handedly. Check out this table as a reference. Notice the HTML, CSS, and JavaScript.

Here’s an Angular Table using a package for pagination. This makes it much easier than building the feature outright. Only downside is it’s frontend pagination, which may impede speed and performance.

This React Data Table has CSS inbuilt in a variety of ways. Content is populated via an API. Moreover, this Hacker News App pulls in data via an API. This could undoubtedly be a table and would function better if the data was being called and populated via a backend technology.

Otherwise, the markup and CSS for tables in general is vast. Table tags are usually inflexible. CSS flex box and grid simplify the process. Before creating the table, whatever the use case is, plan it out first. Spend time thinking about the pros and cons of your design. Is it sustainable? Is it something you or the next developer will be able to easily add and remove features to? How difficult will responsiveness be?

CSS Login

I’m not sure why CSS login is a popular search query because it requires so much more than rudimentary CSS. Regardless, let’s chat about it in our syllabus of CSS. This W3 Schools example illustrates what the basic structure may be. It even uses frontend form validation.

Here’s an example of form validation and a mock login using a UI framework. Notice how the submit button is inaccessible. All fields must be filled out correctly. Then the form can be submitted. At that point, backend form validation would be executed. Node/ Express makes this semi easy to implement.

Moreover, there may be options in login. Such as admin, employee, etc. In that case, we may use a dropdown menu such as this one. Here’s a dynamic dropdown menu that could be used with native HTML, CSS, and JavaScript. In this case, user roles would be populated in the menu. Here’s another drop down related to login.

The login process can be done two ways. I’m sure there’s other methods, but these two are common. When there’s a single page app with a login, it uses a JWT. JSON Web Tokens are alphanumeric, encrypted strings. They’re appended to the URL. This string is shared throughout the application.

Upon decryption, it reveals things such as a user name, if they’re logged in or not, and perhaps permissions. Think of a JWT as a hotel key. You don’t need to validate yourself at the hotel gym, the pool, and the room. Validation’s done once at checkin and thereafter it works everywhere.

The other method, entirely unrelated to the syllabus of CSS, is a cookie. This minute piece of data communicates with a user session. Together users are granted access. JWT’s have grown in popularity because they work with third party servers, such as cloud environments. Read more about this here.

CSS Important

CSS important is used for overriding styles. This mandatory topic should be on every syllabus of CSS. It’s common to see it used in responsive or dynamic styling. This will often be the case when pages are built without a UI framework. I say this because UI frameworks have an array of ways to show and hide elements in the DOM. In turn, developers will utilize powerful UI framework features rather than using !important.

Though !important is undoubtedly helpful and a great tool, it’s usually frowned upon in my experience as it’s a sign of a poor system. Styling should be structured in ways that enable easy manipulation of elements. Building and maintaining large CSS systems takes practice. A history of working in team environments or experience in commercial grade applications. Regardless, keep these concepts in mind whenever in the realm of CSS.

CSS Navbar

Navbars can be horizontal or vertical. Static or dynamic. Are you looking for a specific navbar? Let me know in the comments. They’re traditionally built with ul and li elements, but it’s just a preference. Flexbox is good alternative. As is CSS grid.

Definitely a syllabus of CSS talking point…

Adding drop downs into the mix can be tricky as we never want them to interfere with page elements. I can’t tell you how many times I’ve worked on a team and the lead developer has the inability to create a navbar without React.

We may begin with a fixed div. One in which hides and shows elements contingent on scrolling position. Knowledge of positioning comes in handy here as absolutes will most likely be used.

Mobile navbars are either incorporated into the desktop version or made separately. It depends on the design. Also called the mock.

CSS Comment

Comments in CSS are like comments in any other language. They’re used to make notes. Descriptions of what has either been done, needs to be done, or both. I use CSS comments in conjunction with comments in JavaScript, TypeScript, .NET, and Spring Boot. They’re used in team environments and among solo developers.

Because comments are used solely for developers, sometimes configurations in large scale applications remove them as they’re of course not needed in production. If you don’t use comments, begin utilizing them. Use them either temporarily or to make notes of where you left off.

Box Shadow in CSS

Box shadow is a shadow that’s applied to elements. A great topic for our syllabus of CSS! This is not for text though. Imagery, video, circles, some icons, and all containers. The property works as follows:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Tinker around with the settings at this exercise from W3 Schools. This is a more thorough resource.

I use shadows for all sorts for elements. Text aside. Surprisingly, box shadow does not work with text. It results in a shadow box around the text. To accomplish a textual drop shadow however, we could duplicate the text and style it with a low opacity and blur. Then transform it slightly for the shadow direction.

Whatever the use case may be, my recommendation is to make your shadows subtle. I’ve noticed this from lots of very skilled designers and every time it looks better than outlandish shadows.

CSS on Hover

CSS on hover is the effect an element has when the mouse is above it. Not clicking or interacting, just hovering. Here’s an example. Hovering is often called the hover state. Hover states are very common not just for visual or aesthetically pleasing purposes, but also for UX.

They signal to the user when text is a link. Hovering will often show tool tips or other meaningful messages in the UI. All this is of course only accessible on desktop because hovering does not exist on devices. We could implement other effects on mobile, all of which are beyond conventional hover states.

See the Pen CSS Button by East Coast Developer (@eastcoastdeveloper) on CodePen.

What is Padding in CSS

Padding in CSS is the opposite of margin. Margin is the space around something. Printed paper have margins. Lined paper in spiral bound notebooks have margins. Padding the space inside of a document or element. Check another item off our syllabus of CSS list!

Button padding increases the space between the button text and the button’s boundary. This is the case whether it’s a div tag, section, header, nav tag or any other tag. Increasing the padding however will increase the width or height. The CSS property box-sizing: border box includes thereof in the total dimensions.

Video Background CSS

I’m not exactly sure what people are looking for here. If you’re searching for video background css, please let me know in the comments below. Videos cannot have transparent backgrounds that are filled by the color of a webpage.

Regardless of the technology being used to create the video, it’s a sealed container. Interacting with videos is possible but certainly far beyond the bounds of CSS. Using a web component or native HTML tag will never be able to provide a video background color. This is also regardless of the video format (.mov, .mp4, etc).

What you could do to fill this void, is to make the video background the same color as the web page background. Even so, compression may change the color slightly. Using a subtle video border may be more aesthetically pleasing.

Text Animation CSS

Text animation’s can be very attractive. Granted I’d imagine there’s a time and place to use them. Advertisements, entertainment, and perhaps character recognition are some good examples. I don’t think audacious text animations would be appropriate in places such as finance, news, or similar genres.

In any event, here’s an example.

Begin by declaring the property starting points in the selector. Thereafter, include a shorthand line with the animation settings. The first block of code declares the settings line by line. The next one is shorthand.

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

div {
  animation: example 5s linear 2s infinite alternate;
}

When the time is right, we can get really creative and produce light weight, mobile friendly animations.

Otherwise, there’s generators that’ll write the code for you. This is also sometimes good to ensure all the properties you use are cross platform compatible. Animista is another good one. I could create an entire blog post just on CSS animations, but I hope this is sufficient for our syllabus of css.

Button CSS

Buttons in CSS are a very easy addition, but cover a wide topic.

• Buttons are often tied to JavaScript which also of course requires HTML.
• Using frameworks complicates buttons vs usage on a static page.
• We may have a button component with a shadow DOM.
• Buttons via tabs.
• Or a JavaScript script that auto generates buttons.
• Buttons can be made with the native HTML button tag or created with a div tag. Using the button tag offers greater accessibility though.
• Floating buttons

There’s clearly numerous ways to accomplish this. What are you using and what are goals? Let me know in the comments below. What do you think of this syllabus of css?

The most important aspect in using buttons is accessibility. If you’re at all concerned with SEO and web compliance, accessibility should be incorporated to everything web. Otherwise, we’ll be penalized. Penalized in a blog. Penalized by Google and other search engines. Always utilize accessibility. Even on simple elements such as buttons.

CSS Bold

Bold is the “font-weight”. Different fonts have different weights. Font weights are categorized usually by numbers in increments of a hundred. Change the boldness via the inbuilt font-weight.

.class { font-weight: 400;  }
.class { font-weight: 500;  }
.class { font-weight: 600;  }
.class { font-weight: bold; }

Otherwise, the simplest way is to use the <b> tag. Simply surround the text with an open and closing <b> tag. The difference here is that different browsers and devices all have their own default setting for the <b> tag. I believe this to be the case. This is probably why I rarely to never see the <b> tag being used. Because we cannot know what the exact appearance will be.

Just as Safari and Chrome have their default font sizes, margin, and padding, the <b> tag is also unique. In turn, devs use font-weight to gauge the effect.

CSS Floats

CSS floats—this is a big concept on the syllabus of CSS. I believe floats are derived from an image that floats in a newspaper or magazine. An image that has text wrapping around it. CSS floats enable us to accomplish the same thing. This creates visually appealing pages. It turns pages into actual media vs single column text with centered imagery. Of course the topic is relative.

Technical articles look better in single column in my opinion. News, politics, and sports are better suited for floats. They may accommodate small pics such as headshots or large icons.

Floats are undoubtedly still used for an array of content though. Here’s some examples.

Transition CSS

Transitions in CSS can be very useful. They add subtle to fancy, unique and short lived animations. The possibilities are no doubt unlimited to where and how this one property can be configured.

• Slide in a logo
• Perform neat transitions between desktop and mobile navbars
• Scale, cross fade, spin, or slide in imagery
• Alternate videos or images of a gallery with effects
• Clever text animations
• Elegant button hover states
• Show and hide elements via timed delay

• This transition fades out buttons
• Transitions are used several times here in this 3D animation
• Book description panel transitions adding a unique flare
• Progress/ status bar powered by transitions
• Icon rotate transition

This works by adding or toggling a class or other selector. In one shorthand line we can change three properties over time. There’s undoubtedly unlimited combinations, but this is the premise. Transitions are pertinent to any syllabus of CSS.

/* Default class sets the rules */
.default-class {
   width: 25px;
   height: 25px;
   transition: width 2s, height 2s, transform 2s;
}

.added-class {
   width: 50px;
   height: 50px;
   transform: translateY(-50%);
}

CSS Center

CSS center is about centering an element. Here’s four ways to do so. The code the for the adjacent link is below.

    <main>
      <div class="area-1">
        <button type="button">Centered Button</button>
      </div>

      <div class="area-2">
        <button type="button">Centered Button</button>
      </div>

      <div class="area-3">
        <button type="button">Centered Button</button>
      </div>

      <div class="area-4">
        <button type="button">Centered Button</button>
      </div>
    </main>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: black;
  background-color: white;
}

main {
  padding: 1rem;
}

[class*='area'] {
  background-color: #2a2a2a;
  border-radius: 4px;
  margin-bottom: 30px;
  height: 100px;
}

button {
  background-color: #e64946;
  border: none;
  padding: 5px;
  border-radius: 3px;
  color: white;
}

.area-1 {
  position: relative;
}

.area-1 > button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.area-2 {
  display: flex;
}

.area-2 > button {
  margin: auto;
}

.area-3 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.area-3 > button {
  display: block;
  margin: 0 auto;
}

.area-4 {
  position: relative;
}

.area-4 > button {
  position: absolute;
  margin: 0 auto;
  /* Half of Button Height */
  transform: translateY(calc(100% + 12.75px));
  left: 0;
  right: 0;
  width: 110px;
}

Should anything else be on this syllabus of CSS?

Conclusion

The goal of this post was to cover a wide array of CSS common questions. Through code samples, project links, personal experience, and pictures, I hope I’ve succeeded in doing so. I also wrote this because it can be difficult to find answers to just the questions we’re looking for. And in depth answers too. In turn, if you have questions, please leave them below! General comments too. If there’s anything I left out in this syllabus of CSS, please let me know!

Other Resources

• Progress Navbar
• Table in HTML
• Expandable Table Rows
• Data Driven Dropdown Menu
• JavaScript Action Buttons