CSS Is Easy!

Share this article

Cascading Style Sheets. The name alone is intimidating, conjuring up images of cryptic code and syntax, too difficult for the layperson to grasp. In reality, however, CSS is one of the simplest and most convenient tools available to Web developers. In this article, I’ll guide you through the basics of CSS, showing how it can be applied to simplify the task of managing a consistently formatted Web site with minimal headaches.

The Problem with HTML

CSS is a language for defining the formatting used in a Web site. This includes things like colours, background images, typefaces (fonts), margins, and indentation. “But I do all that now with HTML tags,” you might think. “Why do I need CSS?” A valid question, and the best way to answer it is with an illustration of what is wrong with defining such styles using HTML.

A common design choice at present is to use a sans-serif font (like Arial, Verdana, Tahoma, etc.) for the main body text of a site. Since most Web browsers default to a serif font like Times New Roman, creating a complex Web page layout using a sans-serif font will often involve a lot of <font> tags. With the nested table layouts that have become commonplace on the Web, it would not be uncommon to see ten or twenty <font> tags simply dedicated to applying the same font to all of the text on the page. Multiply this by 5 pages for a modest site and we’re in the neighbourhood of one hundred tags. A beefier site might have 50 pages or more, in which case you’re looking at a thousand <font> tags, all dedicated to applying that one basic, consistent style to the text of your document.

Now here’s the kicker: what if your client calls you late one Friday afternoon to say, “Verdana is nice, but everyone uses it. Let’s use Tahoma instead.” Fancy search-and-replace tools aside, you are now faced with the task of adjusting one hundred, one thousand, or even more <font> tags to make what, from your client’s perspective, may seem like a very simple change. You can pretty much kiss that ski weekend you had planned goodbye. Try not to groan out loud – it doesn’t go over well with most customers.

If you know your HTML, you may be thinking that the <basefont> tag, which lets you set the default font to be used throughout a page, provides a nice solution to this problem. Even then, you’d have to adjust one tag for each page of your site. Add another font style to the equation (say you want to use a different font for that fancy navigation bar of yours), and the problem returns in full.

To this problem and others, Cascading Style Sheets are the solution.

Defining Styles with CSS

The basic principle of CSS is to allow the designer to define a style (a list of formatting details like fonts, sizes, and colours) and then apply it to one or more portions of one or more HTML pages using a selector. Let’s look at a basic example to see how this is done.

Consider the following HTML document outline:

<HTML>
<HEAD>
<TITLE> A simple page </TITLE>
</HEAD>
<BODY>

<H1><FONT FACE="sans-serif" COLOR="#3366CC">First Title</FONT></H1>
<P>...</P>

<H1><FONT FACE="sans-serif" COLOR="#3366CC">Second Title</FONT></H1>
<P>...</P>

<H1><FONT FACE="sans-serif" COLOR="#3366CC">Third Title</FONT></H1>
<P>...</P>

</BODY>
</HTML>

This document contains three headings, created using <H1> tags. To make these headings stand out more, I have used <FONT> tags to make them light blue in a sans-serif font (Windows browsers will display them in Arial, for example). Notice the repetition involved, even at this basic level. I had to specify the details of the font I wanted three separate times. Wouldn’t it make sense to define the font just once and then apply it to my headings? Here’s the CSS version:

<HTML>  
<HEAD>  
<TITLE> A simple page </TITLE>  
<STYLE TYPE="text/css">  
<!--  
 
H1 {  
 font-family: sans-serif;  
 color: #3366CC;  
}  
 
-->  
</STYLE>  
</HEAD>  
<BODY>  
 
<H1>First Title</H1>  
<P>...</P>  
 
<H1>Second Title</H1>  
<P>...</P>  
 
<H1>Third Title</H1>  
<P>...</P>  
 
</BODY>  
</HTML>

All of the magic is between the <STYLE> tags in the <HEAD> of the document, where we define our light blue, sans-serif font and apply it to the <H1> tags in the document. Don’t worry about the syntax; I’ll explain it in detail in a moment. Meanwhile, the <FONT> tags have completely disappeared from the <BODY>, leaving our document looking a lot less cluttered. Changes to the style definition at the top of the page affect all three headings, and any other headings added to the page will also take on the style.

Now that you’ve got some idea of what CSS does, let me explain the different ways of using CSS styles in your HTML documents.

Adding CSS Styles to HTML Documents

The simplest way of putting CSS styles in your Web pages is to use the <STYLE> tag, as I did in the example above. This lets you declare any number of CSS styles by placing them between the opening <STYLE> tag and the closing </STYLE> tag, as follows:

<STYLE TYPE="text/css">   
 CSS Styles here  
</STYLE>

The TYPE attribute specifies the language that you’re using to define your styles. CSS is the only language in wide use as of this writing, and is indicated with the value text/css. Another language that is only supported by Netscape 4.x is called JavaScript Style Sheets (JSS), and is specified by text/javascript. Due to the very limited compatibility of JSS, however, it is rarely of any use.

Since Web browsers are designed to ignore any tags they do not recognize, older browsers that don’t support CSS would normally output the CSS style definitions as plain text in the document. To guard against this, it is common practice to enclose the style definitions within an HTML comment tag:

<STYLE TYPE="text/css">   
<!--  
 CSS Styles here  
-->  
</STYLE>

While nice and simple, the <STYLE> tag has one major disadvantage. Specifically, if you want to use a particular set of styles throughout your site, you’ll have to repeat those style definitions in a <STYLE> tag at the top of every one of your site’s pages.

A more sensible alternative is to put those definitions in a plain text file (usually given a .css filename), and then link your documents to that one file. Any changes to the style definitions in that one file will affect all pages that link to it. This provides for our ideal objective of site-wide style definitions, as we mentioned earlier.

To link a document to a CSS text file (say, styles.css), place a <LINK> tag in the document’s header:

<LINK REL="STYLESHEET" TYPE="text/css" HREF="styles.css">

Returning to my original example of three headings sharing a single style, the document would now look like this:

<HTML>
<HEAD>
<TITLE> A simple page </TITLE>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="styles.css">
</HEAD>
<BODY>

<H1>First Title</H1>
<P>...</P>

<H1>Second Title</H1>
<P>...</P>

<H1>Third Title</H1>
<P>...</P>

</BODY>
</HTML>

And the styles.css file would contain the style definition:

H1 {   
 font-family: sans-serif;  
 color: #3366CC;  
}

Like an image file, you can reuse this styles.css file in as many pages as you need. Not only will it save you typing, but it also ensures a consistent look to the headings across your entire site.

CSS Selectors

To every CSS style definition there are two components: the selector, which defines which tags the style will be applied to, and the attributes, which specify what the style actually does. In the previous example, the selector was H1, specifying that the style should apply to all <H1> tags. The remainder of the style definition was the attributes, specifying the font and colour that should be applied by the style. In this section, I’ll describe the basic CSS selector types, giving examples of each.

Tag Selectors

The most basic form of selector is that which we have already seen. By naming a particular HTML tag, you can apply a style definition to every occurrence of that tag in the document. This is often used to set the basic styles that will appear throughout a Web site. For example, the following might be used to set the default font for a Web site:

BODY, P, TD, TH, DIV, BLOCKQUOTE, DL, UL, OL {    
 font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;    
 font-size: 10pt;    
 color: #000000;    
}

This rather long selector is a list of tags, all of which will take on the style definition (font, size, and colour). In theory, the BODY tag would be all that is needed (since all of the other tags appear inside the BODY tag, and would thus inherit the properties), but many browsers don’t properly carry style properties into tables and other elements, so I specified the other elements for the sake of completeness.

Pseudo-Class Selectors

The formatting of the <A> tag in HTML is more versatile than it is for most other tags. By specifying LINK, VLINK, and ALINK attributes in the BODY tag, you can set the colours for the various states of the links in your page (unvisited, visited, and being clicked on respectively). CSS provides its own way of doing this, and adds a fourth state for when the mouse is over the link. Consider the following example:

A:link { color: #0000FF; }
A:visited { color: #FF00FF; }
A:hover { color: #00CCFF; }
A:active { color: #FF0000; }

This code contains four CSS style definitions. Each of the selectors uses what is termed a pseudo-class of the <A> tag. The first applies to all links, and specifies that they should be blue. The second applies to visited links, and overrides the first definition by making them magenta. The third style definition overrides the first two by making links light blue when the mouse is over them (note the name of the pseudo-class: hover), whether they be visited or not. The final style definition makes links red when clicked on. Since it appears last, it overrides the first three so that it will take effect whether the links be visited or not, and whether the mouse is over them or not. Note that the hover pseudo-class is not supported by Netscape 4.x (Netscape 6 does support it, however).

<A> is the only tag that has pseudo-classes under the original CSS1 specification, and all four are demonstrated in the example above. The newer CSS2 spec that is beginning to see support in recent browsers specifies several other pseudo-classes, most of which have to do with how elements look when printed.

Class Selectors

Assigning styles to tags is all well and good, but what happens if you want to assign different styles to identical tags in different places in your document? This is where CSS classes come in. Consider the following style, which makes all paragraph text in the page blue:

P { color:#0000FF; }

Now, what if you had a sidebar on your page with a blue background? You wouldn’t want text in the sidebar to be blue as well, because it would be invisible! What you need to do is define a class for your sidebar text and then assign the CSS style to that class instead:

P { color: #0000FF; }
.sidebar { color: #FFFFFF; }

This second rule uses a class selector that indicates the style should be applied to any tag of the sidebar class. The period indicates a class is being named instead of a tag. To create a paragraph of text of the sidebar class, you add a CLASS attribute to the tag:

<P CLASS="sidebar">This text will be white, as specified by the CSS style definitions above.</P>

Now, what if there were links in your sidebar? By default, they’d be rendered just like any other links in your page; however, add a CLASS="sidebar" attribute to the tag, and they’d turn white as well:

<P CLASS="sidebar">This text will be white, <A CLASS="sidebar" HREF="link.html">and so will this link</A>.</P>

That’s pretty neat, but what if you wanted to make the links to stand out a bit more by displaying them in bold text? Adding the bold text attribute to the sidebar class would make your whole sidebar bold. You need a CSS selector that selects links of the sidebar class only. By combining a tag selector with a class selector, you can do exactly that:

P { color: #0000FF; }
.sidebar { color: #FFFFFF; }
A.sidebar:link { font-weight: bold; }

Note that we’ve also used a pseudo-class to specify <A> tags that are links (as opposed to <A NAME> tags that are not).

Note also that our sidebar links are still white – both of the styles pertaining to the sidebar class apply to our sidebar links. If we specified a different colour in the third style, however, links would adopt that new colour since the third selector is more specific, and CSS styles are applied in order of increasing selector specificity.

Incidentally, this effect of applying multiple styles to a single page element is called cascading, and is where Cascading Style Sheets got their name.

Finally, you may find that the link does not appear in bold under Netscape 4.x due a bug in that browser. An alternative approach that achieves the same effect is demonstrated in the next section.

Contextual Selectors

If your sidebar happens to contain a lot of links, it becomes tedious assigning the sidebar class to every single <A> tag. Instead, wouldn’t it be nice to use a selector that selected any link appearing inside a paragraph of the sidebar class? That’s what contextual selectors are for: selecting a tag based on its context; that is, based on the tag(s) that contain it.

Here’s the new CSS:

P { color: #0000FF; }    
.sidebar { color: #FFFFFF; }    
P.sidebar A:link {    
 font-weight: bold;    
 color: #FFFFFF;    
}

And here’s the updated HTML:

<P CLASS="sidebar">This text will be white, <A HREF="link.html">and so will this link</A>.</P>

As you can see, a contextual selector provides a list of selectors separated by spaces that must match tags ‘from the outside in’. In this case, since the link (matched by the A:link selector) is inside a sidebar paragraph (matched by the P.sidebar selector), the style applies to the link.

Note that to keep the link white, we had to add that colour to the CSS attributes for the links, since the style for the sidebar class no longer applies to the links.

ID Selectors

Similar to class selectors, ID selectors are used to select one particular tag, rather than a group of tags. The tag that you select is identified by an ID attribute as follows:

<P ID="sidebar1">This paragraph is uniquely identified by the ID "sidebar1".</P>

An ID selector is simply the ID preceded by a hash (#). Thus, the following style will make the above paragraph white:

#sidebar1 { color: #FFFFFF; }

ID selectors can be used in combination with the other selector types. The following style, for example, applies to links appearing in the sidebar1 paragraph:

#sidebar1 A:link {
font-weight: bold;
color: #FFFFFF;
}

Other selector types exist but they are not widely used, and support for them in some browsers (especially Netscape 4.x) is buggy at best.

CSS Attributes

In the examples used so far in this document, I’ve used several CSS attributes like color, font-family, font-size, and font-weight. In this section, I’ll direct your attention to the most common CSS attributes supported by today’s browsers. Unless otherwise indicated, these attributes should work in Netscape 4 or later and MSIE 4 or later.

An exciting aspect of CSS is that it allows you to achieve many effects that cannot be reproduced using plain HTML. For a complete list of CSS1 attributes (most of which are supported by current browsers), see the Chapter 5 of the CSS1 Spec. For a complete list of CSS2 attributes (many of which are supported by current browsers), see the CSS2 Spec.

border-color

Sets the colour of the border surrounding the selected element(s). The colours for each side may be set individually in IE4 and NS6 or later using border-top-color, border-right-color, border-bottom-color, and border-left-color.

Ex: .errormessage { border-color: #FF0000; }

border-style

Sets the style of the border surrounding the selected element(s). Styles supported by 4.x browsers are as follows: double, groove, inset, none, outset, ridge, solid. The style for each side may be set individually in IE4 and NS6 or later using border-top-style, border-right-style, border-bottom-style, and border-left-style.

Ex: .framed { border-style: ridge; }

border-width

Sets the width of the border surrounding the selected element(s). The style for each side may be set individually using border-top-width, border-right-width, border-bottom-width, and border-left-width.

Ex: .thickborder { border-width: 3px; }

margin

Sets the size of the margin between the outside of an element’s border (if any) and surrounding page elements. The margin for each side may be set individually using margin-top, margin-right, margin-bottom, and margin-left.

Ex: .spacedout { margin: 10px; }

padding

Sets the size of the padding between the inside of an element’s border (if any) and the element itself. The padding for each side may be set individually using padding-top, padding-right, padding-bottom, and padding-left.

Ex: .roomyborder { padding: 10px; }

background-attachment

Specifies whether the background image of an element (in particular, the BODY tag) scrolls with that element, or remains fixed as the element’s contents scroll over it. This attribute can be set to either fixed or scroll. This is not supported in NS4.

Ex: BODY { background-attachment: fixed; }

background-color

Sets the background colour of the selected element(s). May be set to any HTML colour code or name, or transparent.

Ex: .highlighted { background-color: yellow; }

background-image

Sets the background image for the selected element(s). May be set to a URL (note the syntax in the example below), or none.

Ex: .flowery { background-image: url(flowers.gif); }

background-position

Not supported in NS4, this attribute lets you set where an element’s background is positioned. For tiled backgrounds, this specifies the top-left corner of the first tile. For non-tiled backgrounds (see background-repeat below), it specifies the position of the top-left corner of the background image. You can specify one or two percentages, lengths, or positions (left, center, or right), where the first specifies the horizontal position and the second specifies the vertical position. If the vertical position is not specified, it is taken to be 50%.

Ex:
.flowermiddle {    
 background-image: url(flowers.gif);    
 background-position: center center;    
 background-repeat: no-repeat;    
}    
   
.watermark {    
 background-image: url(fadedlogo.gif);    
 background-position: 50px 50px;    
 background-repeat: no-repeat;    
}

background-repeat

Sets the tile method for the background image of the selected element(s). You may choose to tile the background horizontally (repeat-x), vertically (repeat-y), both ways (repeat), or not at all (no-repeat). This attribute is not supported by NS4.

Ex:
TD.sidebar {    
 background-image: url(bar.gif);    
 background-repeat: repeat-y;    
}

color

Sets the foreground colour of the selected element(s). This is usually the colour of the text within the element.

Ex:
P.inverse {    
 color: white;    
 background-color: black;    
}

list-style-type

Sets the type of list to use in a <UL> or <OL> tag. Available types for <UL> tags are circle, disc, and square. Available types for <OL> tags are decimal (1), lower-alpha (a), lower-roman (i), upper-alpha (A), and upper-roman (I).

Ex: UL { list-style-type: square; }

list-style-image

Lets you specify the URL for an image that is to be used as the bullets in a list (<DL>, <OL>, <UL>), or for a particular list item (<DT>, <LI>). A setting of none for a particular list item specifies that the default bullet should be used instead of an image, and can override an image specified for the list as a whole. This attribute is not supported by NS4.

Ex: #listItem1 { list-style-image: url(fileicon.gif); }

list-style-position

Sets whether the list marker (bullet or number) is placed inside or outside the box outlined by the list item text. Another way to look at this attribute is that a setting of inside causes the text to wrap to the beginning of the line, whereas a setting of outside causes the text to wrap to the first character after the list marker on the first line. This attribute is not supported by NS4.

Ex: OL { list-style-position: inside; }

font-family

Sets the font/typeface to be used in the selected element(s). Performs the same function as the FACE attribute of the <FONT> tag. The value should be a comma-separated list of font names in order of preference, with font names containing spaces appearing with quotes around them. As in the <FONT> tag, the last item in the list of fonts should usually be a ‘generic’ font name selected from the following: serif, sans-serif, cursive, fantasy, or monospace.

Ex: P { font-family: "Times New Roman", Times, serif; }

font-size

Specifies the size of the font to be used in the selected element(s). You can specify the font size using one of the available presets: xx-small, x-small, small, medium, large, x-large, xx-large. The presets larger and smaller may also be used to set the font size in relation to the size inherited from a parent element, or the browser default. Alternatively, you can specify a font size in pixels (px), points (pt), ems (em), or as a percentage of the parent element’s font size (%).

Ex: .navbar { font-size: 8px; }

font-style

Specifies whether the font should be rendered normally (normal), or in italics (italic) in the selected element(s).

Ex: EM { font-style: italic }

font-variant

Can be used to display the text all in capital letters, with the lowercase letters of the source code displayed in a smaller font size. A setting of small-caps enables this effect, while normal disables it. NS4 does not support this attribute.

Ex: H1 { font-variant: small-caps; }

font-weight

Sets the boldness of the font in the selected element(s). Most browsers only really support normal and bold, but the CSS spec defines the following values: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900, where normal is the same as 400, and bold is the same as 700.

Ex: B { font-weight: bolder; }

letter-spacing

Specifies the spacing between characters in the selected element(s). A value of normal uses the default spacing, whereas positive and negative measurements (pt, em, px) may be used to tighten or loosen the spacing, respectively. This attribute is not supported by NS4.

Ex: .tight { letter-spacing: -0.1em }

text-align

Sets the horizontal alignment of text within the selected element(s) to left, right, center, or justify. The justify option is rendered as left in NS4 for Windows and IE4 for Macintosh.

Ex: .newscolumn { text-align: justify; }

text-decoration

Sets the text in the selected element(s) to be rendered with one of several effects including underline, overline, line-through, or none. NS4 ignores the overline setting.

Ex: A:link { text-decoration: none; }

line-height

Specifies the line spacing for the text inside the selected element(s). Acceptable values include normal (the browser default), a number (where 1 is single-spaced, 2 is double-spaced, and 1.5 is halfway between the two), a measurement (px, pt, em), or a percentage (where 100% is single-spaced). Test this attribute carefully when you use it in your designs, as it is buggy in version 4 browsers.

Ex: .doublespace { line-height: 2; }

text-indent

Sets the indent (or outdent, in the case of a negative value) of the first line of text in the selected element(s). The value may be a measurement (px, pt, em), or a percentage of the parent element’s width.

Ex: P.story { text-indent: 3em; }

text-transform

Sets the capitalization of the text in the selected element(s). A value of none specifies that text should be capitalized as in the source code. capitalize sets the first letter of every word to uppercase. lowercase and uppercase convert all letters to the specified case.

Ex: H1 { text-transform: capitalize; }

vertical-align

Sets the vertical alignment of text within the selected element(s) (bottom or top), or of the selected element(s) in relation to the surrounding text (baseline, middle, sub, super, text-bottom, or text-top).

Ex: .superscript { vertical-align: super; text-size: smaller }

Summary and Further Reading

See? Isn’t CSS easy? In this article I provided a very thorough introduction to CSS; however, I left out many of this powerful formatting language’s more advanced selector features and style attributes for brevity. While you could sort through the CSS1 and CSS2 specs at http://www.w3.org, many of the advanced features described in these specifications remain unsupported in current browsers. The CSS2 spec in particular is only about half-implemented in even the most up-to-date browsers. Features to do with aural presentation and printing just haven’t been a priority for browser manufacturers, even if they have been in the official spec for years.

A better bet would be to pick up a good book on the subject. I recommend Dynamic HTML: The Definitive Reference from O’Reilly, but there are any number of other choices out there, all perfectly good. Just make sure your reference of choice includes information about browser compatibility for every feature discussed. It will keep you from spending long hours scratching your head when something doesn’t work as expected.

Frequently Asked Questions about CSS

Why does CSS seem difficult to learn?

CSS, or Cascading Style Sheets, can seem challenging to learn because it is a different kind of language than HTML. While HTML is a markup language used to structure content on the web, CSS is a style sheet language used to describe the look and formatting of a document written in HTML. CSS requires a different mindset, as it involves thinking about the visual layout and design of a website. However, with practice and understanding of its core concepts, it becomes easier to use.

What are the basic concepts I need to understand in CSS?

Some of the basic concepts in CSS include selectors, properties, and values. Selectors are used to select the HTML element you want to style. Properties are what you want to style in the element, such as color, font size, width, etc. Values are the settings you want to apply to the properties. Understanding these concepts is key to mastering CSS.

How can I make my CSS code more efficient?

There are several ways to make your CSS code more efficient. One way is to use shorthand properties, which allow you to specify several properties in one line. Another way is to group selectors that share the same properties, instead of repeating the same properties for each selector. Also, using a CSS preprocessor like Sass or Less can help manage and maintain your CSS.

Why is my CSS not working?

There could be several reasons why your CSS is not working. It could be due to a syntax error, such as a missing semicolon or bracket. It could also be due to specificity issues, where some styles are not being applied because other styles have higher specificity. Also, make sure your CSS file is properly linked to your HTML file.

How can I center elements with CSS?

Centering elements with CSS can be done in several ways, depending on the situation. For inline or inline-block elements, you can use text-align: center on the parent element. For block-level elements, you can use margin: auto. For absolute or fixed position elements, you can use a combination of left, right, top, and bottom properties.

What is the difference between inline, block, and inline-block in CSS?

In CSS, inline elements do not start on a new line and only take up as much width as necessary. Block elements start on a new line and take up the full width available. Inline-block elements are a hybrid of the two, they can appear on the same line as other elements, but they also respect padding and margins like block elements.

How can I make my website responsive with CSS?

Making a website responsive with CSS involves using media queries, which allow you to apply different styles for different devices based on screen size, resolution, and other characteristics. You can also use flexible layouts with percentages instead of fixed widths, and CSS grid or flexbox for more complex layouts.

What is the difference between CSS and CSS3?

CSS3 is the latest version of CSS. It introduces new features and modules that were not available in previous versions, such as rounded corners, gradients, transitions, animations, and much more. However, not all browsers fully support all CSS3 features, so it’s important to check browser compatibility.

How can I debug CSS issues?

Debugging CSS issues can be done using the browser’s developer tools. You can inspect elements to see what styles are being applied, and modify them on the fly to see the effect. You can also use the console to check for any errors or warnings.

How can I learn CSS more effectively?

Learning CSS more effectively involves a combination of theory and practice. Start by understanding the basic concepts, then apply them by building simple web pages. Use online resources and tutorials, and practice regularly. Also, don’t be afraid to experiment and make mistakes, as they are part of the learning process.

Kevin YankKevin Yank
View Author

Kevin Yank is an accomplished web developer, speaker, trainer and author of Build Your Own Database Driven Website Using PHP & MySQL and Co-Author of Simply JavaScript and Everything You Know About CSS is Wrong! Kevin loves to share his wealth of knowledge and it didn't stop at books, he's also the course instructor to 3 online courses in web development. Currently Kevin is the Director of Front End Engineering at Culture Amp.

Share this article
Read Next
Retrieval-augmented Generation: Revolution or Overpromise?
Retrieval-augmented Generation: Revolution or Overpromise?
Kateryna ReshetiloOlexandr Moklyak
How to Deploy Apache Airflow on Vultr Using Anaconda
How to Deploy Apache Airflow on Vultr Using Anaconda
Vultr
Cloud Native: How Ampere Is Improving Nightly Arm64 Builds
Cloud Native: How Ampere Is Improving Nightly Arm64 Builds
Dave NearyAaron Williams
How to Create Content in WordPress with AI
How to Create Content in WordPress with AI
Çağdaş Dağ
A Beginner’s Guide to Setting Up a Project in Laravel
A Beginner’s Guide to Setting Up a Project in Laravel
Claudio Ribeiro
Enhancing DevSecOps Workflows with Generative AI: A Comprehensive Guide
Enhancing DevSecOps Workflows with Generative AI: A Comprehensive Guide
Gitlab
Creating Fluid Typography with the CSS clamp() Function
Creating Fluid Typography with the CSS clamp() Function
Daine Mawer
Comparing Full Stack and Headless CMS Platforms
Comparing Full Stack and Headless CMS Platforms
Vultr
7 Easy Ways to Make a Magento 2 Website Faster
7 Easy Ways to Make a Magento 2 Website Faster
Konstantin Gerasimov
Powerful React Form Builders to Consider in 2024
Powerful React Form Builders to Consider in 2024
Femi Akinyemi
Quick Tip: How to Animate Text Gradients and Patterns in CSS
Quick Tip: How to Animate Text Gradients and Patterns in CSS
Ralph Mason
Sending Email Using Node.js
Sending Email Using Node.js
Craig Buckler
Creating a Navbar in React
Creating a Navbar in React
Vidura Senevirathne
A Complete Guide to CSS Logical Properties, with Cheat Sheet
A Complete Guide to CSS Logical Properties, with Cheat Sheet
Ralph Mason
Using JSON Web Tokens with Node.js
Using JSON Web Tokens with Node.js
Lakindu Hewawasam
How to Build a Simple Web Server with Node.js
How to Build a Simple Web Server with Node.js
Chameera Dulanga
Building a Digital Fortress: How to Strengthen DNS Against DDoS Attacks?
Building a Digital Fortress: How to Strengthen DNS Against DDoS Attacks?
Beloslava Petrova
Crafting Interactive Scatter Plots with Plotly
Crafting Interactive Scatter Plots with Plotly
Binara Prabhanga
GenAI: How to Reduce Cost with Prompt Compression Techniques
GenAI: How to Reduce Cost with Prompt Compression Techniques
Suvoraj Biswas
How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests
How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests
Aurelio De RosaMaria Antonietta Perna
Quick Tip: How to Align Column Rows with CSS Subgrid
Quick Tip: How to Align Column Rows with CSS Subgrid
Ralph Mason
15 Top Web Design Tools & Resources To Try in 2024
15 Top Web Design Tools & Resources To Try in 2024
SitePoint Sponsors
7 Simple Rules for Better Data Visualization
7 Simple Rules for Better Data Visualization
Mariia Merkulova
Cloudways Autonomous: Fully-Managed Scalable WordPress Hosting
Cloudways Autonomous: Fully-Managed Scalable WordPress Hosting
SitePoint Team
Best Programming Language for AI
Best Programming Language for AI
Lucero del Alba
Quick Tip: How to Add Gradient Effects and Patterns to Text
Quick Tip: How to Add Gradient Effects and Patterns to Text
Ralph Mason
Logging Made Easy: A Beginner’s Guide to Winston in Node.js
Logging Made Easy: A Beginner’s Guide to Winston in Node.js
Vultr
How to Optimize Website Content for Featured Snippets
How to Optimize Website Content for Featured Snippets
Dipen Visavadiya
Psychology and UX: Decoding the Science Behind User Clicks
Psychology and UX: Decoding the Science Behind User Clicks
Tanya Kumari
Build a Full-stack App with Node.js and htmx
Build a Full-stack App with Node.js and htmx
James Hibbard
Digital Transformation with AI: The Benefits and Challenges
Digital Transformation with AI: The Benefits and Challenges
Priyanka Prajapat
Quick Tip: Creating a Date Picker in React
Quick Tip: Creating a Date Picker in React
Dianne Pena
How to Create Interactive Animations Using React Spring
How to Create Interactive Animations Using React Spring
Yemi Ojedapo
10 Reasons to Love Google Docs
10 Reasons to Love Google Docs
Joshua KrausZain Zaidi
How to Use Magento 2 for International Ecommerce Success
How to Use Magento 2 for International Ecommerce Success
Mitul Patel
5 Exciting New JavaScript Features in 2024
5 Exciting New JavaScript Features in 2024
Olivia GibsonDarren Jones
Tools and Strategies for Efficient Web Project Management
Tools and Strategies for Efficient Web Project Management
Juliet Ofoegbu
Choosing the Best WordPress CRM Plugin for Your Business
Choosing the Best WordPress CRM Plugin for Your Business
Neve Wilkinson
ChatGPT Plugins for Marketing Success
ChatGPT Plugins for Marketing Success
Neil Jordan
Managing Static Files in Django: A Comprehensive Guide
Managing Static Files in Django: A Comprehensive Guide
Kabaki Antony
The Ultimate Guide to Choosing the Best React Website Builder
The Ultimate Guide to Choosing the Best React Website Builder
Dianne Pena
Exploring the Creative Power of CSS Filters and Blending
Exploring the Creative Power of CSS Filters and Blending
Joan Ayebola
How to Use WebSockets in Node.js to Create Real-time Apps
How to Use WebSockets in Node.js to Create Real-time Apps
Craig Buckler
Best Node.js Framework Choices for Modern App Development
Best Node.js Framework Choices for Modern App Development
Dianne Pena
SaaS Boilerplates: What They Are, And 10 of the Best
SaaS Boilerplates: What They Are, And 10 of the Best
Zain Zaidi
Understanding Cookies and Sessions in React
Understanding Cookies and Sessions in React
Blessing Ene Anyebe
Enhanced Internationalization (i18n) in Next.js 14
Enhanced Internationalization (i18n) in Next.js 14
Emmanuel Onyeyaforo
Essential React Native Performance Tips and Tricks
Essential React Native Performance Tips and Tricks
Shaik Mukthahar
How to Use Server-sent Events in Node.js
How to Use Server-sent Events in Node.js
Craig Buckler
Five Simple Ways to Boost a WooCommerce Site’s Performance
Five Simple Ways to Boost a WooCommerce Site’s Performance
Palash Ghosh
Elevate Your Online Store with Top WooCommerce Plugins
Elevate Your Online Store with Top WooCommerce Plugins
Dianne Pena
Unleash Your Website’s Potential: Top 5 SEO Tools of 2024
Unleash Your Website’s Potential: Top 5 SEO Tools of 2024
Dianne Pena
How to Build a Chat Interface using Gradio & Vultr Cloud GPU
How to Build a Chat Interface using Gradio & Vultr Cloud GPU
Vultr
Enhance Your React Apps with ShadCn Utilities and Components
Enhance Your React Apps with ShadCn Utilities and Components
David Jaja
10 Best Create React App Alternatives for Different Use Cases
10 Best Create React App Alternatives for Different Use Cases
Zain Zaidi
Control Lazy Load, Infinite Scroll and Animations in React
Control Lazy Load, Infinite Scroll and Animations in React
Blessing Ene Anyebe
Building a Research Assistant Tool with AI and JavaScript
Building a Research Assistant Tool with AI and JavaScript
Mahmud Adeleye
Understanding React useEffect
Understanding React useEffect
Dianne Pena
Web Design Trends to Watch in 2024
Web Design Trends to Watch in 2024
Juliet Ofoegbu
Building a 3D Card Flip Animation with CSS Houdini
Building a 3D Card Flip Animation with CSS Houdini
Fred Zugs
How to Use ChatGPT in an Unavailable Country
How to Use ChatGPT in an Unavailable Country
Dianne Pena
An Introduction to Node.js Multithreading
An Introduction to Node.js Multithreading
Craig Buckler
How to Boost WordPress Security and Protect Your SEO Ranking
How to Boost WordPress Security and Protect Your SEO Ranking
Jaya Iyer
Understanding How ChatGPT Maintains Context
Understanding How ChatGPT Maintains Context
Dianne Pena
Building Interactive Data Visualizations with D3.js and React
Building Interactive Data Visualizations with D3.js and React
Oluwabusayo Jacobs
JavaScript vs Python: Which One Should You Learn First?
JavaScript vs Python: Which One Should You Learn First?
Olivia GibsonDarren Jones
13 Best Books, Courses and Communities for Learning React
13 Best Books, Courses and Communities for Learning React
Zain Zaidi
5 jQuery.each() Function Examples
5 jQuery.each() Function Examples
Florian RapplJames Hibbard
Implementing User Authentication in React Apps with Appwrite
Implementing User Authentication in React Apps with Appwrite
Yemi Ojedapo
AI-Powered Search Engine With Milvus Vector Database on Vultr
AI-Powered Search Engine With Milvus Vector Database on Vultr
Vultr
Understanding Signals in Django
Understanding Signals in Django
Kabaki Antony
Why React Icons May Be the Only Icon Library You Need
Why React Icons May Be the Only Icon Library You Need
Zain Zaidi
View Transitions in Astro
View Transitions in Astro
Tamas Piros
Getting Started with Content Collections in Astro
Getting Started with Content Collections in Astro
Tamas Piros
What Does the Java Virtual Machine Do All Day?
What Does the Java Virtual Machine Do All Day?
Peter Kessler
Become a Freelance Web Developer on Fiverr: Ultimate Guide
Become a Freelance Web Developer on Fiverr: Ultimate Guide
Mayank Singh
Layouts in Astro
Layouts in Astro
Tamas Piros
.NET 8: Blazor Render Modes Explained
.NET 8: Blazor Render Modes Explained
Peter De Tender
Mastering Node CSV
Mastering Node CSV
Dianne Pena
A Beginner’s Guide to SvelteKit
A Beginner’s Guide to SvelteKit
Erik KückelheimSimon Holthausen
Brighten Up Your Astro Site with KwesForms and Rive
Brighten Up Your Astro Site with KwesForms and Rive
Paul Scanlon
Which Programming Language Should I Learn First in 2024?
Which Programming Language Should I Learn First in 2024?
Joel Falconer
Managing PHP Versions with Laravel Herd
Managing PHP Versions with Laravel Herd
Dianne Pena
Accelerating the Cloud: The Final Steps
Accelerating the Cloud: The Final Steps
Dave Neary
An Alphebetized List of MIME Types
An Alphebetized List of MIME Types
Dianne Pena
The Best PHP Frameworks for 2024
The Best PHP Frameworks for 2024
Claudio Ribeiro
11 Best WordPress Themes for Developers & Designers in 2024
11 Best WordPress Themes for Developers & Designers in 2024
SitePoint Sponsors
Top 10 Best WordPress AI Plugins of 2024
Top 10 Best WordPress AI Plugins of 2024
Dianne Pena
20+ Tools for Node.js Development in 2024
20+ Tools for Node.js Development in 2024
Dianne Pena
The Best Figma Plugins to Enhance Your Design Workflow in 2024
The Best Figma Plugins to Enhance Your Design Workflow in 2024
Dianne Pena
Harnessing the Power of Zenserp for Advanced Search Engine Parsing
Harnessing the Power of Zenserp for Advanced Search Engine Parsing
Christopher Collins
Build Your Own AI Tools in Python Using the OpenAI API
Build Your Own AI Tools in Python Using the OpenAI API
Zain Zaidi
The Best React Chart Libraries for Data Visualization in 2024
The Best React Chart Libraries for Data Visualization in 2024
Dianne Pena
7 Free AI Logo Generators to Get Started
7 Free AI Logo Generators to Get Started
Zain Zaidi
Turn Your Vue App into an Offline-ready Progressive Web App
Turn Your Vue App into an Offline-ready Progressive Web App
Imran Alam
Clean Architecture: Theming with Tailwind and CSS Variables
Clean Architecture: Theming with Tailwind and CSS Variables
Emmanuel Onyeyaforo
How to Analyze Large Text Datasets with LangChain and Python
How to Analyze Large Text Datasets with LangChain and Python
Matt Nikonorov
6 Techniques for Conditional Rendering in React, with Examples
6 Techniques for Conditional Rendering in React, with Examples
Yemi Ojedapo
Introducing STRICH: Barcode Scanning for Web Apps
Introducing STRICH: Barcode Scanning for Web Apps
Alex Suzuki
Using Nodemon and Watch in Node.js for Live Restarts
Using Nodemon and Watch in Node.js for Live Restarts
Craig Buckler
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form